Grid within subtab

[ParBisParticipant]

Hi.

I have a problem using a grid in a sub tab. Basically I want both the tab, sub tab and grid to use the full screen e.g. width and height 100%. However doing so I apparently are having trouble with controlling the scrollbars and other controls are disappearing when sorting or filtering the grid. As such I think the problem probably is with the my CSS.

Please have a look at http://jsfiddle.net/HjalteParner/qud2w0L4/186 for an example. Try sorting or filtering the grid and you will see the dropdownlist disappearing. However it will appear again if you shift to another tab and back again. In addition the grid is using deferred scrolling. However I can’t seem to be able to scroll all the way to the bottom. So something is hidden.

Can you help me with this?

Hjalte

[TodorParticipant]

Hello ParBis,

jqxDropDownList and #subtabs(jqxTabs) have a common parent which is #Tab1(jqxTabs). Therefore their total height should sum to 100%. In your example jqxDropDownList has height of 30px and #subtabs has height of 100%. I have changed them as it follows – jqxDropDownList’s height to 5% and #subtabs’ height to 95%. You could see this in your updated example.

Also please take a note that you should use initTabContent to integrate jqxTabs with other widgets. This is also updated in the example. More information about this topic you could find in the following article.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[ParBisParticipant]

Many thanks Todor,

That makes sense and solve my problem. Yes, I’m aware of the initTabContent.

Best regards,

Hjalte

[ParBisParticipant]

Hi Todor.

Coming back to above. In your solution you set the jqxDropDownList’s height to 5% and #subtabs’ height to 95%. However having the jqxDropDownList’s height set to a percentage is problematic as the requesting screen might be very small or large which is both are problematic examples. Is there a way to have the jqxDropDownList’s height set to a fixed value (or a value based on context if there are several controls) and then the #subtabs’ height to fill the rest of the screen?

Best regards,

Hjalte

[ParBisParticipant]

Hi Todor,

I guess I have found out myself. Setting the first div to a fixed pixel value and the second div to 100% seems to fix my issue.

Sorry for taking this further. It has nothing to do with jQWidgets but is simple css rules.

Cheers, Hjalte

[Author]

Posts