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!!