Create 2 columns within tabs on DV
Create 2 columns within tabs on DV
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.
- baudwalker
- Veteran Member
- Posts: 188
- Joined: 2015-02-03 08:08
- Location: Bellingen NSW Australia
Re: Create 2 columns within tabs on DV
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
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
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%' });
<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
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.
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');
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
Re: Create 2 columns within tabs on DV
Barry/ pböttcher this worked perfectly! thanks for your pointers with this!!