TabStrip initially rendering incorrectly in some browsers

5 posts, 0 answers
  1. Raymond
    Raymond avatar
    8 posts
    Member since:
    Jul 2012

    Posted 25 Nov 2013 Link to this post

    I'm using the PHP wrappers to generate a mildly complex tabstrip based form.  In Chrome and Firefox the tabstrip initially renders with all of the tabs as one long unformatted div before refreshing itself a second or two later and displaying correctly. In both Opera and IE (yeah IE) it renders correctly without the initial hiccup

    Test page: http://raymondandrews.com/crftest
    Source: http://raymondandrews.com/crftest/index.txt

    I'm not loading tabs with ajax or from a database, right now it's all manually configured
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Nov 2013 Link to this post

    Hello Raymond,

    I see the discussed web page is quite heavy in terms of widget count. The TabStrip is the last widget to be initialized, so the observed issue is not unusual.

    You have several options:

    1. Rework the page, so that some widgets are initialized client-side on demand instead of initially.
    2. Use tabs loaded with Ajax
    3. Apply a visibility:hidden style to the TabStrip or its parent element, and remove it after the widget has been initialized.

    Following general optimization guidelines is always welcome. For example, move all CSS from the <body> to the <head>.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Raymond
    Raymond avatar
    8 posts
    Member since:
    Jul 2012

    Posted 27 Nov 2013 Link to this post

    I understand how having a lot of widgets in the tabstrip could slow rendering, and I appreciate & will try your suggestions but ...

    Why does it continue when I lower it down to just the first 2-3 tabs ?,  and more importantly,
    Why does it happen in some browsers and not others ?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Nov 2013 Link to this post

    Hi Raymond,

    I am afraid I cannot provide details about the specifics and differences of the browsers' rendering behavior. Reducing the number of tabs and widget count in your case leads to visible difference in the TabStrip initialization speed, which is logical.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Raymond
    Raymond avatar
    8 posts
    Member since:
    Jul 2012

    Posted 27 Nov 2013 Link to this post

    > " I cannot provide details about the specifics and differences of the browsers'"
    That's rather disappointing as I use Kendo, in part, because of it's consistent behavior across browsers.

    Again, I realize that my design is exacerbating the rendering issue, but if some browsers display the problem and others do not, it might be a good idea for Kendo to investigate why, and possibly make improvements accordingly.  

    It might be a good addition too, to add a property to controls that might suffer from rendering delay issues, Something along the lines of hideUntilInitialized  that could automatically take care of changing the visibility once the control is initialized.
Back to Top
Kendo UI is VS 2017 Ready