EasyUI Forum

Hello,

I have an issue that is alsmost identical to the following:

"Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

"
How can I change my easyUI tabs, so that when a tab is hidden, it does the above versus display:none on the panel?

Many thanks
Carl

Hi Carl. I had a similar issue. I just could not find these class selectors. In the end I solved this by calculating page relevant information when the tab was selected. This technique works perfectly. (I had a problem where the accordion height was not being displayed correctly in the hidden tab).

   $("#centerTabs").tabs({
      "onSelect": function (title) {
         if (title == "Replay") {
            //fix the accordion height
            var hAccord = $('#divSearchTrackInfo').parent().height();
            var hSearch = $('#divSearchTrackInfo').height() + 4;
            $('#accordSize').height(hAccord - hSearch);
         }
      }
   });