Enterprise: 목록 보기: 목록의 도구 모음은 모든 버튼이 업리프트 테마에서 오버플로되도록 이동합니다.

여기에서 flex-toolbar로 변경하는 것이 좋습니다. 그게 가능합니까?

링크에서 보고 있는 내용을 기반으로 새 파일 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>

이것은 잘 작동합니다. 따라서 번식에 도움이 필요합니다. 이 예에 대한 한 가지 참고 사항은 사용 중인 것으로 보이는 rightAligned 옵션을 제거하면 향상 테마에서 하나의 버튼이 잘립니다.

또한 이렇게 설정하는 것도 효과가 있는 것 같으므로 테스트할 가치가 있습니다.

        <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의 규칙이었습니다. 따라서 컨트롤에서 아무 것도 수행할 필요가 없습니다.