Embedding a TabStrip inside a PanelBar

3 posts, 0 answers
  1. kenshin2302
    kenshin2302 avatar
    2 posts
    Member since:
    Jan 2012

    Posted 16 Feb 2012 Link to this post

    Hi all, first post around here. I'm trying to essentially do what the thread title suggests. Is there anything I should watch out for? I'm currently trying to do it, but the second panel hides the content of the first one when displayed; only the tabs of the first panel are visible, not the content.

    Am I trying to go about this the wrong way? Here's a basic idea:
    <div id="packages">
        <ul id="panelBar">
            <li class="k-state-active">
                Package 1
                <div id="package_1">
                    <ul>
                        <li class="k-state-active">Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul>
                     
                    <div id="Item_1">Item 1</div>
                    <div id="Item_2">Item 2</div>
                    <div id="Item_3">Item 3</div>
                    <div id="Item_4">Item 4</div>
                </div>
            </li>
            <li>
                Package 2
                <div id="package_2">
                    <ul>
                        <li class="k-state-active">Item 5</li>
                        <li>Item 6</li>
                        <li>Item 7</li>
                        <li>Item 8</li>
                    </ul>
                     
                    <div id="Item_5">Item 5</div>
                    <div id="Item_6">Item 6</div>
                    <div id="Item_7">Item 7</div>
                    <div id="Item_8">Item 8</div>
                </div>
            </li>
        </ul>
    </div>

    I'd really appreciate any advice.

    Edit: Ok, I tested my own example without any formatting and it worked as expected. It seems the problem is with formatting using the 960 grid system. If I apply any grid classes to the inner divs, the div disappears.
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Feb 2012 Link to this post

    Hello,

    Can you post the CSS of these classes, that you apply to the inner divs, so we can check what is happening?

    All the best,
    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!
  3. Kendo UI is VS 2017 Ready
  4. kenshin2302
    kenshin2302 avatar
    2 posts
    Member since:
    Jan 2012

    Posted 17 Feb 2012 Link to this post

    Hello, thanks for your quick reply. Sure, the classes are as follows (I'm not applying any other styling for the moment, except for kendo.common.min.css and kendo.blueopal.min.css):
    (These are for the 960 Grid System)
    960.css
    reset,css
    text.css

    I've updated the example:
    <div class="container_16">
        <div class="grid_3 alpha">
            Blank space. Positioned correctly.
        </div>
     
        <!-- ------------------------------------------------------- -->
        <div class="grid_10">
            <!-- This seems to work, but messes up the grid somewhat
                 by a few pixels, taken up by the PanelBar borders   -->
            <div id="packages" class>
                <ul id="panelBar">
                    <li class="k-state-active">
                        Package 1
                        <div id="package_1">
                            <ul>
                                <li class="k-state-active">Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                                <li>Item 4</li>
                            </ul>
                             
                            <div id="Item_1">
                                <!-- This works, although there are issues with placement -->
                                <div class="grid_2">Item 1.1 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_1">Item 1.2 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_2">Item 1.3 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_3">Item 1.4 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_4">Item 1.5 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_5">Item 1.6 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_6">Item 1.7 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_7">Item 1.8 and...</div>
                                <div class="clear"> </div>
                                <div class="grid_2 prefix_8">Item 1.9.</div>
                                <div class="clear"> </div>
                            </div>
                            <div id="Item_2">
                                <!-- This completely screws up the grid; e.g. doesn't even show -->
                                <div class="grid_5 alpha">Item 2.1 and...</div>
                                <div class="grid_5 omega">Item 2.2.</div>
                            </div>
                            <div id="Item_3">Item 3</div>
                            <div id="Item_4">Item 4</div>
                        </div>
                    </li>
                    <li>
                        Package 2
                        <div id="package_2">
                            <ul>
                                <li class="k-state-active">Item 5</li>
                                <li>Item 6</li>
                                <li>Item 7</li>
                                <li>Item 8</li>
                            </ul>
                             
                            <div id="Item_5">Item 5</div>
                            <div id="Item_6">Item 6</div>
                            <div id="Item_7">Item 7</div>
                            <div id="Item_8">Item 8</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- ------------------------------------------------------- -->
        <div class="grid_3 omega">
            Another space. This one is off to the left by 10px~ or so.
        </div>
         
        </div>   <!--   grid_10     -->   
    </div<!--    container_16    -->

    (In case you -or anyone else who reads this, for that matter- aren't familiar with the 960 GS: Divs with class "clear" allow the following divs to be in a "new line". The classes grid_XX set up the column width that the div will span across. The class container_XX sets up the number of columns available, in this case, 16.)

    I've attached some screenshots of what the problem looks like on Chrome. The first one shows Item 1 being displayed. The second, Item 2.
Back to Top