jqxTabs height:'100%' not working?

[GaryParticipant]

I would like my jqxTabs control to fill the height of the div it is in, so I am using height:’100%’.
This does not appear to work, with the jqx-tabs-content div getting assigned a small height via element.style.
First noticed when I tried to put a jqxSplitter with height:’100%’ in a tab with height:’100%’ and it collapsing to 30 or less pixels in height.
https://jsfiddle.net/jqwidgets/HpGSK/
(Tested in Chrome 45.0.2454.85 m on Windows 7.)

[GaryParticipant]

(For some reason, my fiddle did not take, here is the code:)

<div id='jqxTabs'>
    <ul >
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div>
        <div id='jqxSplitter'>
    <div style="background-color: #97FFAF; height="100%""></div>
    <div style="background-color: #E8C0AF"></div>
</div>
    </div>
    <div>Content 2</div>
    <div>Content 3</div>
</div>

 $('#jqxTabs').jqxTabs({
   height: '100%'
 });
$("#jqxSplitter").jqxSplitter({
   height: '100%'
});

https://jsfiddle.net/GaryGen/HpGSK/126/

[Peter StoevKeymaster]

Hi Gary,

height works perfectly well, but it seems that you do not know how height on web pages work i.e our widgets will not set your web page’s height to something other than the default “auto” instead of you. The updated example is: https://jsfiddle.net/md9sxj4L/. I would suggest you before writing that there is a problem with our software, to check whether the problem is not in your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[GaryParticipant]

Hi Peter,

Thank you for showing me a working example by adjusting the fiddle.

With all due respect, I was not reporting this as an error in your software. I reported that I was trying to do something and that the way I expected it to work did not. Thank you for showing me where the problem might be.

Note that I have encountered several different behaviors to height and width setting from your widgets when using them in my application divs (which are all sized the same way). Some widgets fill the parent divs completely without height/width setting, others require height/width 100%, and others require specific pixel sizing to fill the divs. Based on your response, I will take a closer look the parent div definitions to see if they can be tweaked in order to make your widgets behave consistently. However, please rest assured that while I did not spend extensive time debugging my fiddle, I have spent several hours trying to debug and address these inconsistencies in my own applications before deciding to ask about this behavior.

Regards,
-Gary Geniesse

[Author]

Posts