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

TabStrip fall out parent <div> when using k-block

3 Answers 23 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 27 Sep 2013, 08:39 PM
Hi,
When I put the Tabstrip into a <Div> with a class set to k-block, the tabstrip fall out is container. (see attached picture)
        <section class="k-block">
<div data-acteur="TAB" data-acteurparam="defaut=Onglet1;effet=fadeIn">
                <ul>
                    <li class="k-state-active">Tab1</li>
                    <li>Tab2</li>
                    <li>Tab3</li>
                </ul>
                <div>
                    <div data-acteur="STATUT" data-acteurparam="prop=Statut;titre=Work Cell State">
                        <img data-val="0" alt="Running" src="stateG.png" />
                        <img data-val="1" alt="Assist" src="stateY.png" />
                        <img data-val="2" alt="Down" src="stateR.png" />
                        <img data-val="3" alt="Engineering" src="stateB.png" />
                    </div>
                    <div data-acteur="STATUT" data-acteurparam="prop=Statut2;titre=Work Cell State">
                        <img data-val="0" alt="Running" src="stateG.png" />
                        <img data-val="1" alt="Assist" src="stateY.png" />
                        <img data-val="2" alt="Down" src="stateR.png" />
                        <img data-val="3" alt="Engineering" src="stateB.png" />
                    </div>
                </div>
                <div>
                    Hello2
                </div>
                <div>
                    Hello3
                </div>
            </div>
        </section>



And the I just do a simple:
$elem.kendoTabStrip({
});

Any suggestion?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Sep 2013, 07:53 AM
Hi Pierre,

If you inspect the resulting HTML markup with a browser tool, you will see that the cause of the problem is the following style in kendo.common.css:

.k-block > .k-header
{
    height: 1.1em;
}


k-header is used for the TabStrip wrapper <div>, in addition to k-widget and k-tabstrip. You can override the style in an external stylesheet, using an appropriate selector, or apply an inline height:auto style directly to the TabStrip <div>.


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 1
answered on 10 Jan 2014, 07:40 PM
Hi, I reopen this post for another similar question.

When adding the height:auto  the tabstrip take the correct place.
But All containing text in the tab and tab header get the .k-block > .k-header with 1.1em text size. It is an bug?
0
Dimo
Telerik team
answered on 13 Jan 2014, 06:46 AM
Hi Pierre,

The observed behavior is not a bug. If you don't need the larger font-size, then override it and set another one, according to your preferences.


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Pierre
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Pierre
Top achievements
Rank 1
Share this question
or