BUG: Nested TabStrips with Position Left/Right

8 posts, 0 answers
  1. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 21 Apr 2015 Link to this post

    If you have a Tabstrip with "tabPosition: Left" or "tabPosition: Right", and then you next a TabStrip inside it with "tabPosition: Top" or "tabPosition: Bottom", it appears to apply some of the styling/position from the parent left/right positioning, breaking the TabStrip, places the tabs one above the other in an incorrect position.

     Hopefull this link will work, if not you'll have to paste the code below into a new Dojo: http://dojo.telerik.com/eWiHa

    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/tabstrip/tab-position">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.blueopal.min.css" />
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.blueopal.min.css" />

        <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
    </head>
    <body>

      <div class="demo-section k-header">

        <div id="tabstrip-A">
          <ul>
            <li class="k-state-active">One</li>
            <li>Two</li>
            <li>Three</li>
          </ul>
          <div><p>A</p></div>
          <div><p>B</p></div>
          <div>
            <div id="tabstrip-B">
              <ul>
                <li class="k-state-active">One</li>
                <li>Two</li>
                <li>Three</li>
              </ul>
              <div><p>A</p></div>
              <div><p>B</p></div>
              <div><p>C</p></div>
            </div>
          </div>
        </div>
      </div>
      <style>
        .demo-section { width: 600px; }
        .demo-section * + h4 { margin-top: 2em; }
        .demo-section .k-tabstrip .k-content { height: 140px; }
      </style>
      <script>
        $(document).ready(function () {
          $("#tabstrip-A").kendoTabStrip({ tabPosition: "right" });
          $("#tabstrip-B").kendoTabStrip({ tabPosition: "bottom" });
        });
      </script>

    </body>
    </html>

  2. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 21 Apr 2015 in reply to Nathan Link to this post

    It's because Display: Block is Cascading down from .k-tapstrip-left / .k-tapstrip-right to the LI's, along with the FLoat coming down to the UL.

     

    You can over-ride it in this case with:

    • #tabstrip-B>UL {float:left;}
    • #tabstrip-B>UL>LI { display: inline-block;} 

    Kind Regards,

    Nathan
    Nathan Hobbs
    Computer Programmer
    Microsoft Certified Professional
    Cascade3d 
    www.cascade3d.com 

  3. Kendo UI is VS 2017 Ready
  4. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 21 Apr 2015 in reply to Nathan Link to this post

    Actually should be:

    • #tabstrip-B>UL {float:none;}
    • #tabstrip-B>UL>LI { display: inline-block;} 

    If only fixes for bottom... for "top" the tab border formatting is still screwed up.

    Kind Regards,

    Nathan
    Nathan Hobbs
    Computer Programmer
    Microsoft Certified Professional
    Cascade3d
    www.cascade3d.com

  5. Atanas Georgiev
    Admin
    Atanas Georgiev avatar
    126 posts

    Posted 23 Apr 2015 Link to this post

    Hello Nathan,

    Thank you for the details. We were able to reproduce the issue and logged it in our open-source repository. You can keep track on the progress here:
    https://github.com/telerik/kendo-ui-core/issues/755
    We also came up with a workaround that you can use until the fix is ready.

    Regards,
    Atanas Georgiev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 23 Apr 2015 in reply to Atanas Georgiev Link to this post

    Would that be the workaround I posted?  :o)
  7. Atanas Georgiev
    Admin
    Atanas Georgiev avatar
    126 posts

    Posted 27 Apr 2015 Link to this post

    Hello Nathan,

    Yes - you are right. It is the same fix and it is not applicable for "top" position. However, the issue is already fixed and it will be available for download with out next Service Pack due by the end of the week.

    Regards,
    Atanas Georgiev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Matthew
    Matthew avatar
    1 posts
    Member since:
    Oct 2014

    Posted 17 Aug in reply to Atanas Georgiev Link to this post

    This is still messed up

     

    http://dojo.telerik.com/eqUFE

     

    When you do a left and then top it messes up

     

    Please see the sample

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 Aug Link to this post

    Hi Matthew,

    The provided example uses an outdated version of Kendo UI - updating it to the latest official release (v2016.2.714) seems to fix the problem. For your convenience below is the updated example:
    http://dojo.telerik.com/@Iliana/UxuFO

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready