List View: A toolbar in the list goes all buttons to overflow in the uplift theme

[pwpatton]

Describe the bug
uplift - in list view with a card that has a toolbar on the bottom all the actions go under the overflow even though space is available

To Reproduce
Steps to reproduce the behavior:
Text me for a url where this can be duplicated.

Expected behavior
Expect the toolbar items to be displayed (like soho themes do) when space is available

Version

• ids-enterprise: 4.20

Screenshots

[tmcconechy]

I suggest trying to change to flex-toolbar here? Is that possible?

I worked a bit on an example that can be copied into a new file components/listview/test-toolbar.html based on what im seeing on the 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>

This works ok. So will need some help reproducing. One note on this example if i remove the option rightAligned which it appears you are using i get one button cut off on uplift theme.

Also setting it up like this seems to work as well so this is worth testing on your end.

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

[EdwardCoyle]

I pushed @tmcconechy's sample to this branch, for testing: 2530-toolbar-menu-cutoff-issue

If you pull that, build, run the app, and navigate to http://localhost:4000/components/listview/test-listview-inline-toolbars.html?theme=uplift, seems to be working OK. As far as the standard toolbar goes, there may be something else at play we're not seeing.

I'd also suggest trying the Flex Toolbar if possible, since the CSS-based layout better handles these kinds of layout issues.

[Sovia]

This was actually a rule in our css setting the line height too small. So nothing needs to be done in the controls.