Enterprise: Vista de lista: una barra de herramientas en la lista hace que todos los botones se desborden en el tema de mejora

Sugiero intentar cambiar a la barra de herramientas flexible aquí. ¿Es eso posible?

Trabajé un poco en un ejemplo que se puede copiar en un nuevo archivo components / listview / test-toolbar.html en función de lo que veo en el enlace.

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

Esto funciona bien. Por lo que necesitará ayuda para reproducirse. Una nota sobre este ejemplo si elimino la opción rightAligned que parece que estás usando, obtengo un botón cortado en el tema uplift.

Además, configurarlo de esta manera parece funcionar también, por lo que vale la pena probarlo por su parte.

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

Envié la muestra de 2530-toolbar-menu-cutoff-issue

Si extrae eso, compila, ejecuta la aplicación y navega a http: // localhost : 4000 / components / listview / test-listview-inline-toolbars.html? Theme = uplift, parece estar funcionando bien. En lo que respecta a la barra de herramientas estándar, puede haber algo más en juego que no estamos viendo.

También sugiero probar la barra de herramientas Flex si es posible, ya que el diseño basado en CSS maneja mejor este tipo de problemas de diseño.

En realidad, esta era una regla en nuestro CSS que establecía la altura de la línea demasiado pequeña. Por tanto, no es necesario hacer nada en los controles.