S
Santosh Patel
Guest
Rollbase generated code for the sections sits pretty inside a Table element. So bootstrap tabs won't work straight away. Also we don't advise on putting in javascript hacks that make assumptions on the underlying HTML structure. Regardless of which I tried it out and this hack achieves what you are trying... - tab-pane CSS class needs to be added out to the sections so that it gets hidden $('[id^=rbi_S_').addClass('tab-pane'); That should help you in a general way but if it is only certain sections you want to tackle include them in the selector explicitly - tab-content CSS class has to be specified at an element that is parent for all the Sections (tab-pane), hunt for the table the sections sit in. - you will need a couple of CSS classes to be overridden from bootstrap.css because by default they assume the tab-pane's are children of tab-content element .tab-content .tab-pane { display: none; visibility: hidden; } .tab-content .active { display: block; visibility: visible; } - finally bootstrap tabs depends on some JS code which again assumes the pane content hierarchy, so removal of active tab won't work when you switch tabs, so this code is required (the code is pill ready) $('[data-toggle="tab"],[data-toggle="pill"]').click(function() { $('.tab-content .active[id^=rbi_S_], .tab-content .active[id^=rbi_S_]').removeClass('active'); $(this).addClass('active'); }); Make note that you are depending on the underlying HTML structure here which is bound to change without notice and your implementation might break, so keep an eye on upgrades if you plan to choose this route.
Continue reading...
Continue reading...