如何在动态插入元素后 'recompute' Materialize 行中元素的宽度？

Question

我正在尝试编写一个 jQuery 脚本，该脚本将 input 及其对应的 label 移到其父 div 之外，并将 if 放在后面，分开 div:

    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div class='clear-button-wrapper'/>")
    $('.clear-button-wrapper').parent().after($('.clear-button-wrapper'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    
  <form>
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>
  </form>

然而，我注意到，在那之后的元素，div 和 class file-path-wrapper，被向下移动了，因为它不再适合 <div class="row">（注意下划线不再与按钮底部对齐）：

我也看到了与动态添加到 Materialise 表的其他内容类似的行为。似乎 Materialise 会计算每个元素的宽度 'upfront'，并且不会调整宽度以适应稍后动态添加的块元素。

理想情况下，我想调用类似 Materialize.refresh() 的方法来重新计算具有新插入内容的元素的宽度。这可能吗？

Answer 1

为了解决这个特殊问题，我最终只是将 class 'right' 添加到 wrapAll 参数中。这使得 'Clear' 输入向右浮动并且所有内容再次适合一行：

    $("input[id*='-clear_id']").add("label[for*='-clear_id']").wrapAll("<div class='clear-button-wrapper right'/>")
    $('.clear-button-wrapper').parent().after($('.clear-button-wrapper'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    
  <form>
  <div class="row">
    <div class="file-field input-field col s12">
      <label class="active" for="id_headshot">Headshot</label>
      <div class="btn">
        <span>File</span>
        Currently: <a href="https://lucy-dev2.s3.amazonaws.com/uploads/IMG_3515.png">IMG_3515.png</a>
<input type="checkbox" name="headshot-clear" id="headshot-clear_id" />
<label for="headshot-clear_id">Clear</label><br />
Change:
<input type="file" name="headshot" id="id_headshot" />
        
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </div>
  </form>

结果如下：

如何在动态插入元素后 'recompute' Materialize 行中元素的宽度？

How to 'recompute' the width of elements in a Materialize row after dynamically inserting an element?

javascript

jquery

grid-layout

materialize