#javascript #html #jquery #gridsplitter
#javascript #HTML #jquery #разделитель сетки
Вопрос:
Вот картина того, что происходит. Я хочу, чтобы вертикальные и горизонтальные полосы прокрутки и таблица заполняли свой контейнер div, а не переполнялись.
Показанные разделители взяты из библиотеки jquery под названием gridsplit.
<script src="dist/jquery.gridsplit.optimised.js"></script>
Заголовок таблицы жестко запрограммирован, но тело создается динамически.
Вот html с одной попытки:
<div style="float:left; overflow:auto; width:100%; height:95%">
<div id="grid4" class="grid">
<div class="innerGrid">
<div id="leftCol" class="gridColumn" gs-width="15%">
<div class="gridCell" gs-height="60%">
<div class="fillCell">
<div id="parent">
<select id="selectWatchlist" style="float:left"><option value="My Portfolio">My Portfolio</option></select>
<button id="addSymbol" type="button" class="btn btn-primary">
<i class="glyphicon glyphicon-plus-sign"></i> Syms
</button>
</div>
<div style="display:table-cell">
<table id="watchlist" style="width:100%; border:0; cellpadding:0; cellspacing:0; margin-bottom:5px;">
<tr>
<th>Sym</th><th>Price</th><th>% Change</th>
</tr>
</table>
</div>
</div>
</div>
<div class="gridCell" gs-height="40%">
<div class="fillCell"><a>Notes</a></div>
</div>
Я весь день гуглил и перепробовал десятки комбинаций, но безрезультатно. Предложения?
Комментарии:
1. Трудно сказать, не имея возможности запустить ваш код. Найдите
<>кнопку в редакторе вопросов, чтобы создать интерактивный фрагмент. Там мы можем видеть то, что вы видите. Не забудьте также включить все зависимости.2. Код сложный. Потребовалось бы несколько дней, чтобы попытаться смоделировать только ту часть, которая показывает проблему. Я надеюсь, что кто-то видел нечто подобное, когда таблица переполняет свой родительский div, несмотря на то, что в этом div установлен процент высоты и перегрузка: auto.
3. Есть ли другой способ увидеть это в действии?
Ответ №1:
Решение состояло в том, чтобы просто добавить display:block вот так:
.gridCell .fillCell {
height: 100%;
display: block;
overflow:auto;
}
Теперь у него есть полосы прокрутки и он не переполняется. Вот картинка:
Я мог бы поклясться, что пробовал это, но, видимо, нет.