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

content falls out of a tab

3 Answers 151 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
V N
Top achievements
Rank 1
V N asked on 04 Dec 2011, 10:47 PM
Hi,

I'm using the following code to dynamically add a new tab which displays the content of a div which is defined outside of tabstrip div, by referencing it by its id (id="testInputs"):

<div id="tabstrip">
     <ul>
         <li>First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div>First Tab Content</div>
     <div>Second Tab Content</div>
</div>
 
<div id="testInputs" style="clear:both; float:left">
    <div style="clear:both; float:left;">
      <br /><label>Name:</label><input id="inpUserName" value="n/a">
    </div>
</div>


var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append(
    [{
        text: "New Tab",
        content: document.getElementById("testInputs").innerHTML
    }],
    tabStrip.tabGroup
);

The problem is when I click on the new tab I can see that it loads the content of "testInputs" div just fine, but immediately after that the tab region collapses towards the top, leaving the "inpUserName" input and the label sitting just under the tab strip (see attached image).

What I'm trying to achieve is that the name input is dynamically added and displayed inside the new tab.

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 05 Dec 2011, 04:18 PM
Hi,

Since the elements you're injecting are floated, you should take care to resize the content element accordingly - either by setting its height explicitly or by using overflow: hidden; on it (to contain the floated elements).

Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jayesh
Top achievements
Rank 1
answered on 26 Jan 2012, 08:43 PM
Hi V. N,

Are you able to get rid of your problem?

I am facing the similar issue and I don't have that much js knowledge.

Can you please post the solution if it get solved...many thanks.
0
Damien
Top achievements
Rank 1
answered on 28 Jan 2012, 08:17 AM
Hi,
if you have element with float:left attribute, you could try to put <div style="clear: both"></div> at the end of your tab content.

Hopes that helps
Tags
TabStrip
Asked by
V N
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Jayesh
Top achievements
Rank 1
Damien
Top achievements
Rank 1
Share this question
or