2016-11-23 6 views
1

Не могли бы вы показать мне, как настроить виджет табуляции, содержащий виджет сетки, где виджет вкладки автоматически задан по размеру в его контейнере, а сетка автоматически настраивается для табуляции (и правильно прокручивается). Спасибо.Интеграция виджета shieldui - автоматическая вкладка с авторизованной сеткой

+0

Я до сих пор в настоящее время в состоянии установить это довольно базовые настройки. Разве это невозможно с этой картой ui? Я просто хочу, чтобы этот виджет динамически охватывал доступную ширину и высоту своего родителя (в моем тестовом примере: панель вкладок для контейнера панели вкладок и сетки для панели вкладок). Я взламываю css, но это довольно неустойчиво и может полностью сломаться, если виджет решит изменить свою разметку при следующем обновлении. – hpet

ответ

1

Это возможно - здесь a JSBin example.

Чтобы сделать его полным, вы должны рассмотреть такие вещи, как:

  • дросселирования изменения размера обработки событий,
  • настройки стилей CSS - отступы, границы и т.д.,
  • расчет размеров,
  • сохранение и восстановление сетки состояния (текущая страница, выбор и т.д.) ...
+0

Спасибо Владимиру. Я надеялся, что это будет возможно, используя относительные размеры и оставив его в браузере - уменьшая сложность настройки ui. Не зная внутренности, какое влияние на уничтожение/инициализацию оказывают на клиентские ресурсы (процессор, визуальное мерцание и т. Д.)? Каковы шансы взлома с последующим обновлением инфраструктуры (изменение разметки виджета, стили и т. Д.)? Почему это уже не будет частью виджета? – hpet

+0

Я играл с этим, и все это кажется слишком «взломанным». Относительное позиционирование, paddings и поля вызывают реальные проблемы, не учитываются, и слишком много скриптов здесь и там могут создавать огромные проблемы, когда проект становится немного больше, и все начинает бегать. – hpet

2

Я предполагаю, что это то, что и нужно

https://jsbin.com/didiqa/4/edit?output

Просто используйте CSS над виджетом дивы Tab, чтобы получить переполнение-у. Виджет сетки также имеет свойство scrolling, которое дает u вертикальную прокрутку, если ширина столбцов больше, чем сетка. Вы можете проверить его here.

#tabsDiv { 
    height: 250px; 
    overflow: scroll; 
} 
+0

Не совсем. На основании вашего примера я хочу, чтобы: - tabsContainer охватывает ширину и высоту своего родителя (ака 100% тела) - tabsDiv охватывает ширину и ширину вкладокContainer - размеры сетки доступны высота и ширина вкладокDiv - сетка обычно прокручиваемый (фиксированный заголовок сетки) в пределах вкладокDiv – hpet