2番目のmdc-textfieldラベルが最初のmdc-textfieldに付いているのはなぜですか？

Question

私はMDC-Web（Material Design Components Web）を使用してLaravelビューで作業していますが、それぞれの入力に正しく付いていないラベルに問題があります。私はJavaScriptはこのように見ていると

<section class="mdc-card__supporting-text" style="flex-direction: row"> 

     <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> 
     <input id="lang" required onkeyup="return forceLower(this)" 
      type="text" class="mdc-textfield__input" 
      value="{{ $fontmap->lang }}" aria-controls="lang-helptext"> 
     <label class="mdc-textfield__label mdc-textfield__label--float-above" for="lang"> 
      Language 
     </label> 
     <div class="mdc-textfield__bottom-line"></div> 
     </div> 
     <p id="lang-helptext" class="mdc-textfield-helptext" aria-hidden="true"> 
     Please use lowercase name for language. 
     @if ($errors->has('lang')) 
      <span style="color: red"> 
      {{ $errors->first('lang') }} 
      </span> 
     @endif 
     </p> 

     <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> 
     <input id="short" required type="text" onkeyup="return forceLower(this)" 
      maxlength="2" size="2" class="mdc-textfield__input" 
      value="{{ $fontmap->short }}" aria-controls="short-helptext"> 
      <label class="mdc-textfield__label mdc-textfield__label--float-above" for="short"> 
      Short 
      </label> 
     <div class="mdc-textfield__bottom-line"></div> 
     </div> 
     <p id="short-helptext" class="mdc-textfield-helptext" aria-hidden="true"> 
     Please type in the two character lowercase ISO code for the langauge. 
     <a href="https://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank"> 
      ISO 639-1 Chart 
     </a> 
     @if ($errors->has('short')) 
      <span style="color: red"> 
      {{ $errors->first('short') }} 
      </span> 
     @endif 
     </p> 

...

<script type="text/javascript"> 
    mdc.autoInit(); 
    mdc.textfield.MDCTextfield.attachTo(document.querySelector('.mdc-textfield')); 
    function forceLower(strInput) { 
    return strInput.value = strInput.value.toLowerCase(); 
    } 
</script> 

問題は、2番目の '短期' MDC-テキストフィールドが 'LANG' MDC-テキストフィールドの底部に取り付けられていることです。私は、ラベルが正しい入力に添付したいと思いますが、どこに、なぜ私は問題があるのか​​分かりません。

私の他のMDC-テキストフィールドのレイアウトのいずれも（私は正常に動作し、いくつかのマルチフィールドMDC-テキストフィールドのレイアウトを持っている）、この問題を持っていません。私は、エラーが小さく微妙だと思うが、コードを見てもそれを見つけることはできない。

それは私のadditonal force lowercase javascript関数と関係がありますか？

ありがとうございます！

Answer 1

私は、結果のコードされた状態でゼロから、再びMDC-テキストフィールドを書き換えることにより、それを修正することができました：

<section class="mdc-card__supporting-text" style="flex-direction: row"> 

    @if ($errors->any()) 
     <div class="alert alert-danger"> 
      <ul> 
       @foreach ($errors->all() as $error) 
        <li>{{ $error }}</li> 
       @endforeach 
      </ul> 
     </div> 
    @endif 

    <input type="hidden" name="_method" value="PUT"> 

    <div class="mdc-textfield mdc-textfield--upgraded" data-mdc-auto-init="MDCTextfield" style="width: 100%"> 
     <input type="text" id="lang" name="lang" class="mdc-textfield__input" value="{{ $fontmap->lang }}" 
     required onkeyup="return forceLower(this)" aria-controls="lang-helptext"> 
     <label class="mdc-textfield__label mdc-textfield__label--float-above" for="lang"> 
     Language Name 
     </label> 
     <div class="mdc-textfield__bottom-line"></div> 
    </div> 
    <p id="lang-helptext" class="mdc-textfield-helptext" aria-hidden="true"> 
     Please user lowercase name. 
     @if ($errors->has('lang')) 
     <span style="color: red"> 
      {{ $errors->first('lang') }} 
     </span> 
     @endif 
    </p> 

    <div class="mdc-textfield mdc-textfield--upgraded" data-mdc-auto-init="MDCTextfield" style="width: 100%"> 
     <input type="text" id="short" name="short" class="mdc-textfield__input" value="{{ $fontmap->short }}" 
     required onkeyup="return forceLower(this)" aria-controls="short-helptext"> 
     <label class="mdc-textfield__label mdc-textfield__label--float-above" for="short"> 
     Code 
     </label> 
     <div class="mdc-textfield__bottom-line"></div> 
    </div> 
    <p id="short-helptext" class="mdc-textfield-helptext" aria-hidden="true"> 
     Please type in the two character lowercase ISO code for the langauge. 
     <a href="https://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank"> 
     ISO 639-1 Chart 
     </a> 
     @if ($errors->has('short')) 
     <span style="color: red"> 
      {{ $errors->first('short') }} 
     </span> 
     @endif 
    </p> 

それは異なっている必要がありますなぜ私は実際には表示されません。 JavaScriptを変更しても何もしませんでした。私はおそらく入力の属性の順序であるかもしれないと思うが、私はそれを確認することはできない。なぜそれが最初に機能しなかったのかの説明を提供する追加の答えは高く評価されます。ありがとう！