Enterprise: Affichage en liste : une barre d'outils dans la liste fait déborder tous les boutons dans le thème de l'uplift

Je suggère d'essayer de passer à flex-toolbar ici? Est-ce possible?

J'ai travaillé un peu sur un exemple qui peut être copié dans un nouveau fichier components/listview/test-toolbar.html en fonction de ce que je vois sur le lien.

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

Cela fonctionne bien. Donc aura besoin d'aide pour se reproduire. Une note sur cet exemple si je supprime l'option rightAligned qu'il semble que vous utilisez, je reçois un bouton coupé sur le thème de l'élévation.

La configuration comme celle-ci semble également fonctionner, donc cela vaut la peine d'être testé de votre côté.

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

J'ai poussé l'échantillon de @tmcconechy dans cette branche, pour le tester : 2530-toolbar-menu-cutoff-issue

Si vous tirez cela, créez, exécutez l'application et accédez à http://localhost :4000/components/listview/test-listview-inline-toolbars.html?theme=uplift, cela semble fonctionner correctement. En ce qui concerne la barre d'outils standard, il se peut qu'il y ait autre chose en jeu que nous ne voyons pas.

Je suggérerais également d'essayer la barre d'outils Flex si possible, car la mise en page basée sur CSS gère mieux ce type de problèmes de mise en page.

C'était en fait une règle dans notre CSS définissant la hauteur de ligne trop petite. Il n'y a donc rien à faire dans les commandes.