MD bootstrap плавающий ввод перекрывает метку

Question

Я использую библиотеку MD Bootstrap с Primefaces, и у меня возникла проблема с использованием плавающих материалов - мои метки перекрывают мои входы.

Есть ли метод, который я использую, чтобы предотвратить эту проблему?

Вот мой код:

<div class="ui-g-12">
    <div class="md-form form-sm">
        <i class="fa fa-user prefix"/>
        <p:inputText value="#{accountBean.account.username}" styleClass="form-control validate" id="username" required="true" requiredMessage="#{msg['message.username.required']}" validatorMessage="#{msg['validator.username']}">
            <f:validateRegex pattern="[a-zA-Z0-9_]+"/>
        </p:inputText>
        <p:outputLabel id="usernameLabel" for="username" value="#{msg['username']}" />
    </div>
</div>
<div class="ui-g-12">
    <div class="md-form form-sm">
        <i class="fa fa-user-circle prefix"/>
        <p:inputText value="#{accountBean.account.fullname}" styleClass="form-control validate" id="fullname" required="true" requiredMessage="#{msg['account.fullName.required']}">
        </p:inputText>
        <p:outputLabel id="fullnameLabel" for="fullname" />
    </div>
</div>
<div class="ui-g-12">
    <div class="md-form form-sm">
        <i class="fa fa-envelope prefix"/>
        <p:inputText value="#{accountBean.account.email}" styleClass="form-control validate" id="email" required="true" validatorMessage="#{msg['validator.email']}" requiredMessage="#{msg['account.email.required']}">
        </p:inputText>
        <p:outputLabel id="emailLabel" for="email" value="#{msg['email']}" />
    </div>
</div>

И это проблема: