jQuery UI Widgets Forums Navigation Ribbon Vertical Ribbons in Tabs

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 4 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Vertical Ribbons in Tabs #76393

    Joe Weinpert
    Participant

    Having a problem using vertical ribbons placed in tabs. The attached code is the structure. There are three tabs. Within each tab there is a vertical ribbon with three headers. There is no problem having the ribbon content display fine in the first tab. However, within the second and third tabs the ribbon content was being overlaid by the ribbon header. To resolve this issue, you can see in the code I placed the style=”margin-left: 75px;” attribute in the ribbon content <div> wrapper tag within the second and third tabs. This works, but I do not know if it is required because of a bug.

    <div id="tab1">
       <ul>
          <li>Tab 1</li>
          <li>Tab 2</li>
          <li>Tab 3</li>
       </ul>
    
       <div>
          <div id="ribbon1">
             <ul>
                <li>Header 1</li>
                <li>Header 2</li>
                <li>Header 3</li>
             </ul>
             <div>
    
                <div>
                   <br>Aa<br>Bb<br>Cc<br>
                </div>
                <div>
                   <br>Dd<br>Ee<br>Ff<br>
                </div>
                <div>
                   <br>Gg<br>Hh<br>Ii<br>
                </div>
    
             </div>
          </div>
       </div>
    
       <div>
          <div id="ribbon2">
             <ul>
                <li>Header 1</li>
                <li>Header 2</li>
                <li>Header 3</li>
             </ul>
             <div style="margin-left: 75px;">
    
                <div>
                   <br>Aa<br>Bb<br>Cc<br>
                </div>
                <div>
                   <br>Dd<br>Ee<br>Ff<br>
                </div>
                <div>
                   <br>Gg<br>Hh<br>Ii<br>
                </div>
    
             </div>
          </div>
       </div>
    
       <div>
          <div id="ribbon3">
             <ul>
                <li>Header 1</li>
                <li>Header 2</li>
                <li>Header 3</li>
             </ul>
             <div style="margin-left: 75px;">
    
                <div>
                   <br>Aa<br>Bb<br>Cc<br>
                </div>
                <div>
                   <br>Dd<br>Ee<br>Ff<br>
                </div>
                <div>
                   <br>Gg<br>Hh<br>Ii<br>
                </div>
    
             </div>
          </div>
       </div>
    </div>
    
    Vertical Ribbons in Tabs #76418

    Dimitar
    Participant

    Hello jweinpert,

    Please make sure you initialize all jqxRibbons in jqxTabs in the tabs’ initTabContent callback function, as is shown in the demo Integration with other widgets for a jqxGrid and a jqxChart initialized in jqxTabs.

    If this suggestion does not help you, please share your JavaScript code, too, so that we can test your scenario.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.