EasyUI
Home
Demo
Tutorial
Documentation
Download
Extension
Contact
Forum
EasyUI Forum
May 09, 2024, 01:00:36 AM
Welcome,
Guest
. Please
login
or
register
.
1 Hour
1 Day
1 Week
1 Month
Forever
Login with username, password and session length
News
:
Home
Help
Search
Login
Register
EasyUI Forum
>
General Category
>
EasyUI for jQuery
>
moving a tab panel vs setting display to none for a deselected panel.
Pages: [
1
]
« previous
next »
Print
Author
Topic: moving a tab panel vs setting display to none for a deselected panel. (Read 9475 times)
flyboytyler
Newbie
Posts: 1
moving a tab panel vs setting display to none for a deselected panel.
«
on:
April 03, 2012, 11:15:50 PM »
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
Logged
Kevin
Jr. Member
Posts: 52
Re: moving a tab panel vs setting display to none for a deselected panel.
«
Reply #1 on:
April 04, 2012, 03:20:35 AM »
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);
}
}
});
Logged
Pages: [
1
]
Print
« previous
next »
Jump to:
Please select a destination:
-----------------------------
General Category
-----------------------------
=> News
=> General Discussion
=> EasyUI for jQuery
=> EasyUI for Angular
=> EasyUI for Vue
=> EasyUI for React
=> Bug Report
Loading...