Embedding a TabStrip inside a PanelBar

[kenshin2302]

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.

[Kamen Bundev]

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

[kenshin2302]

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.