Hello,
We are trying to use bootstrap tabs in one of our view pages.
This is how we did it before using jquery ui tabs, and it is working fine :
<ul class="customTabs">
<li><a href="#rbi_S_12250">Email Addresses</a></li>
<li><a href="#rbi_S_59612">Engagement Classification</a></li>
<li><a href="#rbi_S_58296">Referred Opportunities</a></li>
<li><a href="#rbi_S_58307">Opportunity Contacts</a></li>
</ul>
<script>
$(document).ready(function ($) {
$( "#rbe_viewTab0" ).tabs();
$(".customTabs").css({"background":"#EEEEEE"});
$(".ui-widget-header").css({"border":"none"});
});
</script>
And this is what we are doing with bootstrap :
<ul id="mytabs" class="nav nav-tabs" data-tabs="tabs">
<li class ="active"><a href="#rbi_S_12250" data-toggle="tab">Email Addresses</a></li>
<li><a href="#rbi_S_59612" data-toggle="tab">Engagement Classification</a></li>
<li><a href="#rbi_S_58296" data-toggle="tab">Referred Opportunities</a></li>
<li><a href="#rbi_S_58307" data-toggle="tab">Opportunity Contacts</a></li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#mytabs').tab();
});
</script>
So the problem we are facing is that the tabs are appearing and are clickable, but the sections (Email Adresses : rbi_S_12250, Engagement Classification: rbi_S_59612, etc ..) are not shown when the correspondent tab is selected. Instead the four sections are all displayed one after the other as they have been set in the design page. Of course, the script component is written in a section we added before the five others.
We also tried putting this script :
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#mytabs').tab();
});
</script>
in another script component at the bottom after all these sections. Still not working.
Any ideas please?
Regards,
Meryem
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.
Just to further explain on Meryem's post, the tabs section we are referring to is not the typical tabs that exist in Rollbase. We want the sections (list views) on the view pages to be in a tabbed format below the main detail section:
This allows for a much better "360 degree" view of the customer as opposed to using the standard tabs at the top.
And this is how it looks with the bootstrap code:
As you can see the tabbed sections are there but the sections themselves dont get wrapped.
What changes have you done to the sections? like adding tab-pane CSS class and usage of tab-content.
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.
Nice one Santosh, it works. I realise it is not a good solution for customers but for our internal systems it works perfectly and we can adapt accordingly if need be.
btw - the parent element to your comment:
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.
$('#rbe_viewTab0').addClass('tab-content');