jqxtab header size increases on dynamic tab creation

[BallaParticipant]

Hi

Im using JqxTabs for dynamic tab creation ,while adding /remove the tab ,size of the jqx-tab-header increses vertically,Is there any property fix the tab header height.Also while adding new tab ,close Icon appers no of times vertically.how can we prevent that.

[DimitarParticipant]

Hello Balla,

Could you, please, provide us with a JSFiddle example demonstrating the issue. We do not experience such issue on our side with the latest version of jQWidgets (3.4.0), as you can see from the demo Settings.

Best Regards,
Dimitar

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

[fdskiParticipant]

Dimitar, problem does occur in demo you provided.
Screenshow attached:
https://www.dropbox.com/s/28v9pmbuggzycow/Przechwytywanie.PNG?dl=0

please advice. Problem just popped up in UAT testing.. 🙁

Bart

[fdskiParticipant]

Btw, we’re using 3.8.1 and problem is still present.

[fdskiParticipant]

more info:
Problem doesn’t exist in IE11.
In Mozilla(39) it affects all viewing sizes bigger then 80%.
In Chrome (43) it affects all viewing sizes bigger then 100% and not equal to multipliers of 100% ( so 200% seems fine)

[DimitarParticipant]

Hello fdski,

Thank you for your feedback. We confirm the reported issue.

Best Regards,
Dimitar

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

[fdskiParticipant]

Dimitar,
jqxtabs.js line 1178

if (g < this._titleList[c].outerHeight(true)) {
g = Math.round(parseInt(this._titleList[c].outerHeight(true)))
}

when it loops first time it works ok. second time this._titleList[c].outerHeight(true)) returns way too large value.
value of g is an int in IE, but in Chrome its a float. Maybe it’s a rounding problem.

Please let me know if you have an idea how to fix it..

B

[DimitarParticipant]

Hello B,

We have noted the issue and will try to fix it in a future version of jQWidgets. Please abstain from unminifying code and posting such code here, because this violates the jQWidgets End-user license agreement.

Best Regards,
Dimitar

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

[fdskiParticipant]

Ok Dimitar, Can you provide a timeframe ? we’re talking month, 3 months ? Need to update the customer as to when they can expect the fix.

B

[DimitarParticipant]

Hello B,

Unfortunately, we cannot provide you with an ETA of this fix.

Best Regards,
Dimitar

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

[Ben1Participant]

All,

I have been dealing with this “jqxtab header size increases on dynamic tab creation” issue today on a test project and believe I found some useful information. Basically this is an observation. Beware of the Zoom level on your browser! This will happen when …

• Browsers: Any browser, any version ( obviously I could test every version ever made, but in the end the issue was consistent once I knew how to test for it.)
• JQuery Versions: I tested them all in JS Fiddle
• JQWidgets version: I tried a 2.x version using MVC and a 3.X version all with the same bad results.
• Browser Zoom level: The tab’s header will grow if zoom level is not 100%. If it is not 100% it can grow… and may be shrink at some smaller zoom level.( I think I saw this one time.

This does not solve the problem but this may save others some time in developing a work around.

I thought I was seeing a temporary solution when testing Fire Fox with latest Jquery. FYI I had just installed FireFox on the test Machine. My other browsers had been used significantly. I tried all versions of JQuery and FireFox and thought I had it working. But after some tedious testing and comparing using JSFiddle and the same code in an ASP MVC test page. I thought I had it resolved with Fire Fox. All other browsers: Edge, Chrome, and IE were just not working.

At some point I realized FireFox had unexpectedly started producing the same results … The header where the tab resides was growing every time I dynamically added a tab. Using the debug inspectors I could see the header growing just a pixel or two at a time. Not an issue for a adding a couple of tabs, but a lot when adding 6 or more.

I suspect that there is a rounding issue that occurs when the browser zoom is not 100%. It could be the JQWidgets code or its base code is calculating the image and trying to use partial pixels which results in a rounding issues.

In any case, If any one can find a work around it would be appreciated. I hope this info can help others working on this.

Regards,
Ben

[DimitarParticipant]

Hello Ben,

Thank you for your feedback. As a workaround, please try adding the following style to your page:

<style type="text/css">
    .jqx-tabs-title-container {
        height: 30px !important;
    }
</style>

Best Regards,
Dimitar

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

[Author]

Posts