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"):
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.
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.