Таблицы прокрутки YUI3 в TabView не отображаются

У меня есть несколько вкладок в YUI3 Tabview. Каждая вкладка содержит пару прокручиваемых таблиц данных YUI3. Таблицы данных создаются, но не отображаются. Все, что я вижу, это часть 1-го столбца каждой таблицы данных.

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

Таблицы данных создаются независимо от Tabs/Tabview.

Любая помощь будет принята с благодарностью.


javascript tabview yui yui3 yui-datatable
person the-petrolhead    schedule 20.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, прокручиваемые таблицы данных должны быть в видимом контейнере при отображении, потому что им нужно вычислить размер некоторых элементов таблицы, чего они не могут сделать, если они находятся под display: none на скрытой вкладке. Чтобы избежать этого, дождитесь отображения вкладки, в которой будут храниться данные. Вы можете сделать это, прослушав стадию «после» события selectedChange вкладки. Например:

tabview.item(1).after('selectedChange', function (e) {
  if (e.newVal) {
    table.render();
 }
});

Вот рабочий пример: http://jsfiddle.net/juandopazo/H2ASR/2/.

person juandopazo    schedule 20.11.2012
comment
Каждая вкладка содержит несколько таблиц. У меня нет конкретного экземпляра таблицы, подобного тому, который вы указали в примере. Что я могу сделать, чтобы преодолеть это? - person the-petrolhead; 20.11.2012
comment
В основном вам нужно получить все экземпляры вашей таблицы и вызывать render() только после события selectedChange. Вы можете игнорировать часть this.get('panelNode'). Я убрал это из ответа на всякий случай - person juandopazo; 20.11.2012