Enterprise: リストビュー：リスト内のツールバーは、隆起テーマですべてのボタンをオーバーフローさせます

ここでフレックスツールバーに変更することをお勧めしますか？ それは可能ですか？

リンクに表示されている内容に基づいて、新しいファイルcomponents / listview /test-toolbar.htmlにコピーできる例に少し取り組みました。

<div class="row">
  <div class="twelve columns">
      <h2 class="fieldset-title">ListView - With a Toolbar</h2>
  </div>
</div>

<div class="row">
  <div class="twelve columns">
    <div class="card" >
      <div class="card-header">
        <h2 class="card-title">Tasks</h2>
        <button class="btn-actions" type="button">
          <span class="audible">Actions</span>
          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="#icon-more"></use>
          </svg>
        </button>
        <ul class="popupmenu">
          <li><a href="#">Add new action item</a></li>
          <li><a href="#">Regular action</a></li>
          <li><a href="#">Individual Action</a></li>
        </ul>
      </div>

      <div class="card-content">
        <div class="listview" id="task-listview" data-options="{'source': '{{basepath}}api/inventory-tasks', 'template': 'task-tmpl', 'selectable': 'false'}"></div>
      </div>
    </div>

  </div>
</div>

{{={{{ }}}=}}
<script id="task-tmpl" type="text/html">
  <ul>
    {{#dataset}}
      <li>
        <p class="listview-heading">Task #{{task}}</p>
        <p class="listview-subheading">{{desc}} </p>
        <p class="listview-micro">Due: {{date}}</p>
        <div id="regular-toolbar-example" class="toolbar" data-options="{'rightAligned': true}" role="toolbar">
          <div class="buttonset">

            <button id="btn-row" class="btn" type="button">
              <span>Find in Organizational tree</span>
            </button>

            <button id="btn-category" class="btn" type="button">
              <span>Find in Organizational Chart</span>
            </button>

            <button id="btn-share" class="btn" type="button">
              <span>Find in Employee List</span>
            </button>
          </div>
        </div>
        </li>
    {{/dataset}}
  </ul>
</script>

これは問題なく動作します。 ですから、再現するのにいくらかの助けが必要になります。 この例に関する1つの注意点として、使用しているように見えるオプションrightAlignedを削除すると、隆起テーマで1つのボタンが切断されます。

また、このように設定することもうまくいくようですので、これはあなたの側でテストする価値があります。

        <div id="regular-toolbar-example" class="toolbar"role="toolbar">
          <div class="title">
            &nbsp;
          </div>
          <div class="buttonset">

テストのために、 @ tmcconechyのサンプルをこのブランチにプッシュしました： 2530-toolbar-menu-cutoff-issue

それをプルして、アプリをビルドして実行し、 http：// localhost ：4000 / components / listview / test-listview-inline-toolbars.html？theme = upliftに移動すると、正常に機能しているようです。 標準ツールバーに関する限り、他に何かが表示されていない可能性があります。

CSSベースのレイアウトはこの種のレイアウトの問題をより適切に処理するため、可能であればFlexツールバーを試すこともお勧めします。

これは実際には、CSSで行の高さを低く設定するルールでした。 したがって、コントロールで何もする必要はありません。