Enterprise: Visualização de lista: uma barra de ferramentas na lista transborda todos os botões no tema uplift

Eu sugiro tentar mudar para flex-toolbar aqui? Isso é possível?

Eu trabalhei um pouco em um exemplo que pode ser copiado em um novo arquivo components / listview / test-toolbar.html baseado no que estou vendo no link.

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

Isso funciona bem. Então, vai precisar de ajuda para reproduzir. Uma observação sobre este exemplo, se eu remover a opção rightAligned, que parece que você está usando, eu recebo um botão cortado no tema uplift.

Também configurá-lo dessa forma parece funcionar bem, então vale a pena testar do seu lado.

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

Empurrei a amostra de @tmcconechy para este branch, para teste: 2530-toolbar-menu-cutoff-issue

Se você puxar isso, compilar, executar o aplicativo e navegar para http: // localhost : 4000 / components / listview / test-listview-inline-toolbars.html? Theme = uplift, parece estar funcionando bem. No que diz respeito à barra de ferramentas padrão, pode haver algo mais em jogo que não estamos vendo.

Eu também sugiro tentar a Barra de Ferramentas Flex, se possível, já que o layout baseado em CSS lida melhor com esses tipos de problemas de layout.

Na verdade, essa era uma regra em nosso css definindo a altura da linha muito pequena. Portanto, nada precisa ser feito nos controles.