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

[Pierre]

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?

[Dimo]

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

[Pierre]

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?

[Dimo]

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