Not working when display:none

5 posts, 0 answers
  1. tjarvas
    tjarvas avatar
    5 posts
    Member since:
    Apr 2008

    Posted 10 Sep 2015 Link to this post

    I take a tabstrip on my website. But when loaded the page it need be hidden. If the user click a checkbox then tabstrip must be display. It is ok, but I use scrollable tabs. But it is display not scrollable tab..

     

    It is the code:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Telerik Line Chart</title>
        <link rel="stylesheet" href="TelerikPHPUI/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="TelerikPHPUI/styles/kendo.default.min.css" />
        <script src="TelerikPHPUI/js/jquery.min.js"></script>
        <script src="TelerikPHPUI/js/kendo.all.min.js"></script>
        </head>
        <body>
            <input type="checkbox" onclick="if (this.checked) { $('.demo-section').css('display', 'inline-block') } else { $('.demo-section').css('display', 'none') }" />
            <?php
            require_once 'TelerikPHPUI/Kendo/Autoload.php';
             
            echo '<div class="demo-section" style="max-width:400px; display:none;">';
             
            $tabstrip = new \Kendo\UI\TabStrip('tabstrip');
             
            $item = new \Kendo\UI\TabStripItem();
             
            $item->text("Tab 1 with long text")
                     ->selected(true)
                     ->startContent();
             
            echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit.</p>';
             
            $item->endContent();
            $tabstrip->addItem($item);
             
            $item = new \Kendo\UI\TabStripItem();
            $item->text("Tab 2 with long text")
                     ->startContent();
             
            echo '<p>Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus.</p>';
             
            $item->endContent();
            $tabstrip->addItem($item);
             
            $item = new \Kendo\UI\TabStripItem();
            $item->text("Tab 3 with long text")
                     ->startContent();
             
            echo '<p>Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>';
             
            $item->endContent();
            $tabstrip->addItem($item);
             
            $item = new \Kendo\UI\TabStripItem();
            $item->text("Tab 4 with long text")
                     ->startContent();
             
            echo '<p>Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>';
             
            $item->endContent();
            $tabstrip->addItem($item);
            echo $tabstrip->render();
             
            echo '</div>';
            ?>
        </body>
    </html>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 12 Sep 2015 Link to this post

    Hi Tamas,

    This behavior is expected - JavaScript calculations won't work when TabStrip display property is set to none. What I would suggest is to initialize the widget when the checkbox is checked. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. tjarvas
    tjarvas avatar
    5 posts
    Member since:
    Apr 2008

    Posted 14 Sep 2015 in reply to Iliana Nikolova Link to this post

    Can you help me how?

    I try this, but I got an error: tabstrip is undefined.

    function showHideTabStrip(obj) {
        if(obj.checked) {
            $('.demo-section').css('display', 'inline-block');
             
            var tabstrip = $('.demo-section').data('kendoTabStrip');
            tabstrip.select(0);
            tabstrip.reload(tabstrip.items()[0]);
        }
        else {
            $('.demo-section').css('display', 'none');
        }
    }

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 16 Sep 2015 Link to this post

    Hi Tamas,

    I tested some approaches for this scenario and calling the resize method when the checkbox is checked should help to achieve the expected result. Please try the following configuration: 
    <input type="checkbox" onclick="showTabStrip()" />
     
    <div class="demo-section" style="max-width:400px; display:none;">
    <?php
       $tabstrip = new \Kendo\UI\TabStrip('tabstrip');  
       // your tabstrip configuration
         // ....
     
     
    <script type="text/javascript">
    function showTabStrip(){
       $(".demo-section").show();
       var tabStrip =  $("#tabstrip").data("kendoTabStrip");
       tabStrip.resize();
    }
    </script>


    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. tjarvas
    tjarvas avatar
    5 posts
    Member since:
    Apr 2008

    Posted 21 Sep 2015 in reply to Iliana Nikolova Link to this post

    It is working. Thank you very much!
Back to Top
UI for ASP.NET AJAX banner