Vertical Ribbons in Tabs

[Joe WeinpertParticipant]

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>

[DimitarParticipant]

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/

[Author]

Posts