Telerik Forums
UI for PHP Forum
4 answers
476 views

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>

tjarvas
Top achievements
Rank 1
 answered on 21 Sep 2015
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?