Нужна помощь - проектирование интерфейса.

P.S. Обращался в поиск гугла - предлагает использовать для виджета iframe и практически все виджеты - для ВК и ФБ.

откуда данные нужно взять? если база данных ваша зачем нужны iframe?!
если БД ваша, что мешает сделаешь запросы в базу и вывести результат, где нужно и оформить, как нужно?

предполагаю, что AdminLTE на Bootstrap 3,
официальная документация - getbootstrap.com
посмотрите примеры готовых классов, которые нужно добавлять в html-разметку, например, простая панелька для какой либо инфы - getbootstrap.com/components/#panels-heading

В том-то и дело, что виджет собственный и база тоже своя.
По поводу bootstrap - спасибо, я это уже знаю.

В том-то и проблема, что "простая панелька для инфы" меня не устроит.
Слишком много сводных данных, которые нужно отобразить.

И проблема не в том, чтобы отобразить эти данные.
Проблема в том, чтобы у виджета была адаптивная вёрстка.
Чтобы разметка виджета при просмотре на разных устройствах не поплыла.

... может быть, так понятнее будет.
Я зашёл на сайт под пользователем для просмотра списка компаний --->
(компания пока одна, окно сворачивается)

пишите, что про bootstrap знаете, тогда почему документацию не изучаете? там всё написано, смотрите адаптивную сетку (Grid system) - getbootstrap.com/css/#grid-options

например, так:
<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>

используя класс .col-sm-6 для зелёного и оранжевого блоков они будут в один столбик на экранах с разрешением меньше или равно 768px (см. таблицу - Grid options).

Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет. Прямоугольный. И в строке их НЕСКОЛЬКО.
Один только на телефоне (просто потому, что на экране мобильного больше не убирается).

В общем, как-то так --->

... если бы всё было так просто, я бы тут вопросов не задавал.

<div class="row">
<div class="прямоугольник">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>

Вот что поставить в "прямоугольник", чтобы зелёный и оранжевый блоки не распадались и вёрстка не ехала?
И чтобы высота была одинаковой...

Афраний писал(а)
AdminLTE

этот шаблон используете? - usebootstrap.com/theme/adminlte
как я и думал он на bootstrap 3

Афраний писал(а)
Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.

какая разница, что там внутри дивов, если только ваш виджет не js-скриптом подгружается, так как js-скрипты могут свои стили задавать и конфликтовать с bootstrap.

в предыдущем комментариях дал ссылки на сетку bootstrap, ничего сложного там нет, примеры, как работает сетка приведены, а внутрь блоков пихайте что угодно.

для чего дал эту ссылку - getbootstrap.com/css/#grid-options
там же написано, какие классы нужно применять для адаптации.

сразу же после таблицы с описанием классов сетки дан пример, см. "Example: Stacked-to-horizontal"

префиксы:
".col-xs-" - работает на экранах <768px
".col-sm-" - работает на экранах≥768px
".col-md-" - работает на экранах ≥992px
".col-lg-" - работает на экранах ≥1200px

после префикса идёт цифра, которая указывает сколько занимать ячеек для ширины блок,
сетка разделена на 12 ячеек, если нужно два блока поместить в одну строку, то разметка будет такая:

<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>

класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px,
цифра "6" после префикса ".col-sm-" указывает на то, что блок при разрешении экрана более 768px будет занимать ширину равной шести ячейкам из 12-ти, ..т.е. половину.

Ну смотрите внимательнее таблицы "Grid options" и "Example: Stacked-to-horizontal" , поиграйтесь с размером экрана в режиме разработчика - F12 в браузере гугл-хром, в верхнем правом углу при изменении экрана увидите циферки-пиксели, сравните их с указанными в таблицах и следите, что происходит с примерами в "Example: Stacked-to-horizontal".

больше я не знаю, как объяснить, на самом деле ничего сложного, всё готово, только указывай правильные классы.

готовую html-разметку можно также посмотреть в том же шаблоне AdminLTE, посмотрите исходный код похожих блоков, которые наиболее подходят под вашу задачу, да и всё.

себя поправлю..

alexeyweb писал(а)
класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px..

немного не так, при разрешении более 768px блок будет занимать половину экрана (6 частей из 12), а при ширине менее 768px, если больше никаких классов не указано, займёт всю ширину экрана,
ведь можно сразу несколько классов задавать.

ничего, данный лишний див уже нарушает сетку bootstrap.
см. ответ выше

Я думаю, если вы не можете сверстать элементарную страницу, вам не надо этим заниматься, а тем более делать панель управления.
Есть такой замечательный инструмент, Google называется, и уж если вы и тут не справляетесь я тогда не знаю...

ну человек учится, все когда то учились, тут ведь стоит один раз понять принцип, а дальше только опыт набирается и делаешь как по накатанной. и вроде как форумы созданы чтоб помогать, а на нюре порой и спросить то страшно.

Элементарную страницу я как раз сверстать могу.
Но в то время, когда я верстал, не то что смартфонов - мобильных телефонов ещё не было.
И про адаптивную вёрстку тогда ещё не слышали.

А теперь мне надо создать виджет, который будет подчиняться правилам адаптивной вёрстки.
И если Вы умеете читать, то увидите, что гугл я уже допрашивал. С пристрастием.

alexeyweb писал(а)

Афраний писал(а)Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.

какая разница, что там внутри дивов, если только ваш виджет не js-скриптом подгружается, так как js-скрипты могут свои стили задавать и конфликтовать с bootstrap.

Большая. Эти div имеют разные значения свойства display.

По теме - спасибо, документацию читать я и сам умею. И про то, что можно задавать несколько классов - тоже знаю.
И готовую html-разметку я уже смотрел. Виджет пытался сделать по образу и подобию dashboard.

alexeyweb писал(а)
ничего, данный лишний див уже нарушает сетку bootstrap.

Вот! Тогда так...

<div class=row>
<div class=col-sm-3> // прямоугольник
<div style=width: 40%;>ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div style=width: 60%;>ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>

... а вообще посмотрев на таблицы я решил, что виджет тоже лучше верстать через div
Так проще, чем рисовать колонки и делать слева таблицу, а справа надписи.
-----------------------
В общем, спасибо, разобрался.

ну вам же подсказали, что все "свое" должно быть внутри сетки класс "row" не должен ничем разделятся и после него должны быть блоки именно с ячейками, общая сумма которых должна быть 12, а вот потом вы можете вставлять любую другую разметку, главное без класса "row", иначе бутстрап подумает, что это новая сетка. Для каждого экрана у одного блока вы можите повесить разные классы, это какраз и будет управлять "шириной" и расположением ваших блоков. увы в бутстрапе идет жесткая привязка и например нельзя без костылей вырвать блоки из сетки. Я лично адаптив делаю сам, да, мороки больше, но четко понимаешь куда ты хочешь переместить свои элементы.

Спасибо. Это я уже понял.
И то, что мороки больше - это я тоже понял :-)

P.S. Использую:
almsaeedstudio.com/themes/AdminLTE/index.html