1

I'm trying to use Angular MaterializeCSS (https://krescruz.github.io/angular-materialize/) to create a form, but my labels and inputs are overlapping and I can't seem to figure out how to fix it. My code is below and I have my form wrapped in input-field tags as instructed in the documentation: 

 <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>

The resulting form looks like this:

enter image description here

What am I missing here?

Thanks!

Improve this question
2
  • can you provide your working code in a codepen ? Commented Jan 2, 2018 at 18:27
  • have you check if the jQuery is properly include in your project? Commented Jan 25, 2018 at 6:19

1 Answer 1

Reset to default
1

This probably isn't the best approach but it works for me, I wrote a code that trigger focus event on each input of my form. I did not use angular-materialize, but maybe work for you with a little changes.

// focus 
$( '.input-field > input' ).each( function( index, el ) {
    $el = $( el );
    if ( $el.val() !== '' )
        $el.trigger( 'focus' );
} );
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.