Как добиться адаптивного поведения отдельной области экрана?

Question

[Max Rudik]

Добрый день!
Есть jquery плагин, c помощью которого можно создать сетку, элементы которой пользователь может мышью перетаскивать и изменять в размерах.
gridster.net/demos/resize.html
Элементы сетки строятся следующим образом:

<ul>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
      <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
      <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
</ul>

При попытке вставить в элемент что-то вроде:

<ul>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">

</li>
     
</ul>

Comments

[Max Rudik]

Не дописал вопрос, нечаянно отправил.

Answer 1

[Max Rudik]

Нечаянно нажал отправить. Закончу вопрос:
При попытке вставить что-то вроде

<div class="table-responsive icon-view">     
            <table class="table table-striped">
......

очевидным образом адаптивность не работает при изменении размера родительского элемента, а работает при измерении размера вьюпорта. Можно ли как-то обмануть Бутстрап и заставить его работать при изменении размера элемента сетки пользователем?
Заранее благодарен за любую подсказку, которая прольет свет!

Answer 2

[MNB]

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}

куда нибудь после бутстрапа.