CODEWITHSUNDEEP
htmldojo
user4199704
user4199704

Reputation: 11

tabs to be displayed vertically and horizontally

can we create dojo tabs horizontally and vertically at a time. I tried the below code but it is displaying only second div showing tabs horizontally. With respect to that i want to show tabs at the top so that user can select any required tab shown either vertically or horizontally.

Below is the sample code:

  <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;" tabStrip="true">
            <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                   11
            </div>
            <div dojoType="dijit.layout.ContentPane" title="My second tab">
                 2222
            </div>
            <div dojoType="dijit.layout.ContentPane" title="My last tab">
               333333
            </div>
    </div>

    <div data-dojo-type="dijit/layout/TabContainer" style="width: 400px; height: 100px;" tabPosition="left-h" tabStrip="true">
          <div data-dojo-type="dijit/layout/ContentPane" title="My first left tab" selected="true">
           left1111
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" title="My second left tab">
            left2222
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" title="My last left tab">
            left3333
          </div>
    </div>

Upvotes: 0

Views: 1326

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

Do you want to display these tabs below each other? The problem is that layout widgets in Dojo need to know what space they can take. They will look at their parent element to decide what size they can take.

Your first TabContainer has a height of 100%, this seems to work fine, but it actually doesn't. The height: 100% makes it 0 high, the result is that any content below that container, will start to overlap.

So, in your case, your second TabContainer will overlap the first one.

The solution is to give it a fixed height, for example:

<div dojoType="dijit.layout.TabContainer" tabStrip="true"
  style="width: 100%;height: 100px">
</div>

Demo: http://jsfiddle.net/5yn2hLv9/

Upvotes: 1

Related Questions