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

4 posts, 0 answers
  1. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 27 Sep 2013 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Sep 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 10 Jan 2014 Link to this post

    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?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready