Angular MaterializeCSS与输入重叠标签

Question

我尝试使用Angular MaterialiseCSS（https://krescruz.github.io/angular-materialize/）来创建表单，但我的标签和输入是重叠的，我似乎无法弄清楚如何修复它。我的代码如下所示，我的表单包含在input-field标记中，如文档中所示：

 <fieldset ng-class="{'form-group-has-focus': hasValueOrFocus()}">
      <input-field>
        <label style="background-color:red;" for="sp_formfield_{{ ::field.name }}" ng-if="field.type != 'boolean'" title="{{::field.hint}}">
          <span class="field-decorations">
            <span ng-show="field.isMandatory()" style="padding-right: .25em" title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}"></span>
            <span title="{{ decoration.text }}" class="decoration {{ decoration.icon }}" ng-repeat="decoration in field.decorations"></span>
          </span>{{ field.label }}
        </label>
        <span ng-switch="field.type" class="type-{{ field.type }} field-actual" ng-class="{'state-mandatory': field.mandatory, 'state-readonly': field.read_only, 'state-hidden': field.hidden}">
          <span ng-if="field.instructions" ng-bind-html="field.instructions"></span>
          <span ng-switch-when="boolean">
            <label for="sp_formfield_{{ ::field.name }}" title="{{::field.hint}}">
              <input ng-false-value="'false'" ng-model="fieldValue" name="{{field.name}}" ng-true-value="'true'" type="checkbox" ng-model-options="{getterSetter: true}" ng-disabled="field.isReadonly()"></input>
            <span>{{getCheckBoxPrice(field)}}</span>
          </span>

          <sp-choice-list field="field" options="field.choices" ng-switch-when="choice" glide-form="getGlideForm()"></sp-choice-list>
          <sp-color-picker field="field" sn-change="fieldValue(newValue)" ng-switch-when="color" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sp-color-picker>
          <sp-css-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="css" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-css-editor><span ng-switch-when="document_id">{{field.displayValue}}</span>
          <sp-duration-element field="field" ng-model="fieldValue" ng-switch-when="glide_duration" ng-model-options="{getterSetter: true}"></sp-duration-element>
          <input ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="email" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" ng-disabled="field.isReadonly()"></input>
          <sn-field-reference field="field" sn-change="fieldValue(newValue)" ng-switch-when="field_name" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sn-field-reference>
          <sn-field-list-element field="field" sn-change="fieldValue(newValue, displayValue)" ng-switch-when="field_list" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sn-field-list-element>
          <sp-date-picker field="field" ng-model="fieldValue" ng-switch-when="glide_date" ng-model-options="{getterSetter: true}" sn-disabled="field.isReadonly()"></sp-date-picker>
          <sp-date-picker sn-include-time="true" field="field" ng-model="fieldValue" ng-switch-when="glide_date_time" ng-model-options="{getterSetter: true}" sn-disabled="field.isReadonly()"></sp-date-picker>
          <sp-reference-element ref-table="formModel.table" ref-id="formModel.sys_id" field="field" ng-switch-when="glide_list" glide-form="getGlideForm()" sn-disabled="field.isReadonly()" record-values="getEncodedRecordValues()" sn-options="{multiple: true, placeholder: field.placeholder}" sn-select-width="100%"></sp-reference-element>
          <sp-glyph-picker field="field" ng-switch-when="glyphicon" sn-disabled="field.isReadonly()"></sp-glyph-picker>
          <sp-html-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="xml" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-html-editor>
          <sp-html-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="html_template" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-html-editor>
          <sp-script-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="json" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-script-editor>
          <input ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="masked" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" type="password" ng-disabled="field.isReadonly()"></input>
          <div ng-switch-when="multiple_choice" class="radio" ng-repeat="c in field.choices">
            <label for="sp_formfield_{{ ::field.name }}" tabindex="-1">
              <input role="radio" ng-model="fieldValue" name="{{field.name}}" ng-checked="field.value == c.value" type="radio" value="{{c.value}}" ng-model-options="{getterSetter: true}" aria-label="{{c.label}}" ng-disabled="field.isReadonly()"></input><span style="margin-left: 1em;">{{c.label}}</span>
            </label>
          </div>
          <textarea sp-autosize="true" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="multi_two_lines" name="{{field.name}}" ng-disabled="field.isReadonly()"></textarea>
          <div ng-switch-when="numericscale" class="radio">
            <label for="sp_formfield_{{ ::field.name }}" ng-repeat="c in field.choices" tabindex="-1">
              <input role="radio" ng-model="fieldValue" name="{{field.name}}" ng-checked="field.value == c.value" type="radio" value="{{c.value}}" ng-model-options="{getterSetter: true}" aria-label="{{c.label}}" ng-disabled="field.isReadonly()"></input><span style="margin-right: 1rem;">{{c.label}}</span>
            </label>
          </div>
          <input ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="password" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" type="password" ng-disabled="field.isReadonly()"></input>
          <sp-currency-element sn-blur="fieldValue(field.stagedValue)" field="field" sn-change="stagedValueChange()" ng-switch-when="price" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sp-currency-element>
          <sp-currency-element sn-blur="fieldValue(field.stagedValue)" field="field" sn-change="stagedValueChange()" ng-switch-when="currency" glide-form="getGlideForm()" sn-disabled="field.isReadonly()"></sp-currency-element>
          <sp-code-mirror mode="properties" sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="properties" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-code-mirror>
          <sp-reference-field ng-switch-when="reference" ng-class="{'field-has-reference': field.value != '', 'field-empty-reference': field.value == ''}"></sp-reference-field>
          <sp-script-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="script_server" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-script-editor>
          <sp-script-editor sn-blur="fieldValue(field.stagedValue)" field="field" ng-switch-when="script" sn-disabled="field.isReadonly()" sn-change="stagedValueChange()" data-length="4000"></sp-script-editor>
          <sn-table-reference field="field" sn-change="fieldValue(newValue)" ng-switch-when="table_name" sn-disabled="field.isReadonly()"></sn-table-reference>
          <textarea sp-autosize="true" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="textarea" name="{{field.name}}" id="sp_formfield_{{field.name}}" ng-disabled="field.isReadonly()"></textarea>
          <sp-tinymce-editor sn-blur="fieldValue(field.stagedValue)" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="html" sn-disabled="field.isReadonly()" name="{{field.name}}" ng-model-options="{getterSetter: true}"></sp-tinymce-editor>
          <sp-tinymce-editor sn-blur="fieldValue(field.stagedValue)" ng-model="field.stagedValue" ng-change="stagedValueChange()" ng-switch-when="translated_html" sn-disabled="field.isReadonly()" name="{{field.name}}" ng-model-options="{getterSetter: true}"></sp-tinymce-editor><span ng-switch-when="user_image"><img ng-if="field.displayValue" ng-src="{{field.displayValue}}" style="max-height: 128px; max-width: 128px;"></img><sn-image-uploader sys-id="{{formModel._attachmentGUID || formModel.sys_id}}" field-name="{{field.name}}" upload-message="Upload an image" on-delete="onImageDelete()" src="field.displayValue" on-upload="onImageUpload(thumbnail)" table-name="{{formModel.table}}" ng-if="!field.isReadonly()" read-only="field.isReadonly()"></sn-image-uploader></span>
          <sp-widget ng-switch-when="widget" widget="field.widget" page="{g_form: getGlideForm(), field: field, fieldValue: fieldValue}"></sp-widget>
          <sp-widget ng-switch-when="widget_value" widget="field.widget" page="{g_form: getGlideForm(), field: field, fieldValue: fieldValue}"></sp-widget>
          <span ng-switch-default="true">
            <input ng-model="field.stagedValue" ng-change="stagedValueChange()" maxlength="{{field.max_length}}" autocomplete="off" name="{{field.name}}" id="sp_formfield_{{field.name}}" data-type="{{field.type}}" ng-if="!field.max_length || 256 &gt; field.max_length" ng-model-options="{allowInvalid: true}" ng-disabled="field.isReadonly()"></input>
            <textarea sp-autosize="true" ng-model="field.stagedValue" ng-change="stagedValueChange()" name="{{field.name}}" id="sp_formfield_{{field.name}}" data-type="{{field.type}}" ng-if="field.max_length &gt;= 256" ng-model-options="{allowInvalid: true}" ng-disabled="field.isReadonly()"></textarea>
          </span>
          <p ng-bind-html="::field.help_text" ng-if="::field.help_text" title="{{::field.help_tag}}" class="help-block"></p>
        </span>
        <div ng-show="field.messages">
          <div class="wrapper-xs r m-t-xs" ng-repeat="message in field.messages" ng-class="{'bg-danger': message.type == 'error', 'bg-info': message.type == 'info'}">{{ message.message }}</div>
        </div>
      </input-field>
    </fieldset>

结果表格如下：

我在这里缺少什么？

谢谢！

Answer 1

这可能不是最好的方法，但它适用于我，我写了一个代码，在我的表单的每个输入上触发焦点事件。我没有使用angular-materialize，但也许可以为你工作一点点改变。

// focus 
$( '.input-field > input' ).each( function( index, el ) {
    $el = $( el );
    if ( $el.val() !== '' )
        $el.trigger( 'focus' );
} );