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

Not working when display:none

4 Answers 573 Views

TabStrip

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

This question is locked. New answers and comments are not allowed.

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

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!