Page 1 of 1
Create 2 columns within tabs on DV
Posted: 2018-05-16 09:39
by bescott53
Hello board, I used the course that is provided to split my detailed view form into tabs and it looks great but is there a way to enhance this within the tab to show two columns rather than just one? I don’t see in the course how to do this.
Re: Create 2 columns within tabs on DV
Posted: 2018-05-16 12:00
by baudwalker
Hi, If you continue with section 5 the udemy course you will get the 2 columns course.
Section 3 lesson 12 Organizing long forms into tabs
Section 3 lesson 13 Organizing long forms into a horizontal layout.
BArry
Re: Create 2 columns within tabs on DV
Posted: 2018-05-21 10:21
by bescott53
tried merging the two together but couldn't do it, would anyone help me out?
<style>
#form-tabs .nav-tabs a{ display: block !important; }
@media (min-width: 768px){
.form-inline .form-group{
width: 48%;
margin-bottom: 0.75em;
vertical-align: top;
}
}
</style>
<script>
$j(function(){
$j('#form-tabs').appendTo('#customers_dv_form');
$j('fieldset.form-horizontal').removeClass('form-horizontal').addClass('form-inline');
/* Fix for a bug with lookup drop-downs to set their correct width */
$j('.select2-container').addClass('option_list').css({ 'max-width': 'unset', 'width': 'unset' }).parents('.row').css({ 'width': '100%' });
Re: Create 2 columns within tabs on DV
Posted: 2018-05-22 10:30
by pbottcher
Hi,
you need to add the class "form-inline" to your "tabs".
e.g.
<div class="tab-pane active form-inline" id="project-info"></div>
or you need to add a replacement for the form-horizontal for the div via.
Code: Select all
$j('div.form-horizontal').removeClass('form-horizontal').addClass('form-inline');
Re: Create 2 columns within tabs on DV
Posted: 2018-05-22 15:10
by bescott53
Barry/ pböttcher this worked perfectly! thanks for your pointers with this!!