This is a migrated thread and some comments may be shown as answers.

Not working when display:none

4 Answers 478 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
tjarvas
Top achievements
Rank 1
tjarvas asked on 10 Sep 2015, 09:45 AM

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>

4 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 12 Sep 2015, 09:17 AM
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!
 
0
tjarvas
Top achievements
Rank 1
answered on 14 Sep 2015, 12:28 PM

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');
    }
}

0
Iliana Dyankova
Telerik team
answered on 16 Sep 2015, 01:13 PM
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!
 
0
tjarvas
Top achievements
Rank 1
answered on 21 Sep 2015, 09:37 AM
It is working. Thank you very much!
Tags
TabStrip
Asked by
tjarvas
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
tjarvas
Top achievements
Rank 1
Share this question
or