Автоматическое изменение размера содержимого карты (материализация CSS) с Ag-Grid в нем - PullRequest
Новая
       26

Автоматическое изменение размера содержимого карты (материализация CSS) с Ag-Grid в нем

0 голосов
/ 08 октября 2018

В элементе tab-tabs из materialize css framework я пытаюсь настроить таблицу ag-grid.

Вот код. 

        <div class="card-tabs">
          <ul class="tabs tabs-fixed-width">
            <li class="tab"><a href="#test4">Test 4</a></li>
            <li class="tab"><a href="#test5">Test 5</a></li>
          </ul>
        </div>

        <div class="card-content  grey lighten-5">

          <div id="test4" style="height: 200px;">

            <div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>

          </div>

          <div id="test5">Test 5 content</div>
        </div>

       </div>

Проблема в том, чтоЯ не могу автоматически изменить высоту элемента с помощью id='test4', чтобы он был виден.Если я удаляю style="height:200px;" из него, сетка не появляется.Если бы я добавил, что он показывается, но я не хочу, чтобы он был статически на 200px, так как высота сетки может варьироваться.

Есть ли способ сделать div с id='test4' автоматически изменяющим размеры самого себяв соответствии с размером ag-grid?

Я пытался поместить height:auto; в card-content и test4 div, но безуспешно.

1 Ответ

0 голосов
/ 08 октября 2018

Div не будет отображаться, если в нем нет содержимого.Почему бы вам просто не вставить пустое значение &nbsp в HTML. 

    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="#test4">Test 4</a></li>
        <li class="tab"><a href="#test5">Test 5</a></li>
      </ul>
    </div>

    <div class="card-content  grey lighten-5">

      <div id="test4"

        <div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
       &nbsp;
      </div>

      <div id="test5">Test 5 content</div>
    </div>

   </div>
...