jQuery UI Widgets Forums Navigation Tabs jqxtab header size increases on dynamic tab creation

This topic contains 11 replies, has 4 voices, and was last updated by  Dimitar 3 years, 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author

  • Balla
    Participant

    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.


    Dimitar
    Participant

    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/


    fdski
    Participant

    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


    fdski
    Participant

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


    fdski
    Participant

    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)


    Dimitar
    Participant

    Hello fdski,

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

    Best Regards,
    Dimitar

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


    fdski
    Participant

    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


    Dimitar
    Participant

    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/


    fdski
    Participant

    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


    Dimitar
    Participant

    Hello B,

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

    Best Regards,
    Dimitar

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


    Ben1
    Participant

    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

    • This reply was modified 3 years, 2 months ago by  Ben1.

    Dimitar
    Participant

    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/

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.