My form fields are currently set up using 3 col-xs-6 classes, but I'm not seeing the desired layout.
I am aiming for:
| col-xs-6 |
| col-xs-6 |
| col-xs-6 |
However, what I am getting is:
| col-xs-6 | col-xs-6 |
| col-xs-6 |
I understand that this is the default behavior, but I really want to achieve the initial layout. I tried adding a row class to each col-xs-6 but it didn't work.
This is my HTML structure:
<div class="col-xs-12">
<h1>Form</h1>
<form class="top20" ng-submit="vm.exportForm()" name="vm.exportForm" novalidate>
<formly-form model="vm.exportModel" fields="vm.exportFields" form="vm.exportForm"></formly-form>
</form>
</div>
And here is how I defined the form in the controller:
vm.exportFields = [
{
className: 'col-xs-6',
key: 'field1',
type: 'select2',
templateOptions: {
label: 'Field1',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
},
{
className: 'col-xs-6',
key: 'field2',
type: 'select2',
templateOptions: {
label: 'Field2',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
},
{
className: 'col-xs-6',
key: 'field3',
type: 'select2',
templateOptions: {
label: 'Field3',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
}
];
Update:
I have made a decision to switch my field classes to col-xs-12 and wrap them within a <div class="col-xs-6"></div>. This setup has given me the expected outcome. Thank you, everyone!