Reputation: 3536
I would like to place form fields in Yii2 side by side, in a 2x2 grid.
I'm using the bootstrap/ActiveForm as such
<?php $form = ActiveForm::begin([
'layout' => 'horizontal',
'action' => ['index'],
'method' => 'get',
'fieldConfig' => [
'horizontalCssClasses' => [
'label' => 'col-sm-2',
'offset' => 'col-sm-offset-2',
'wrapper' => 'col-sm-4',
],
],
]); ?>
The fields are basically a series of date widgets
<?= $form->field($model, 'saleFrom')->widget(DatePicker::className(), [
'options' => ['placeholder' => 'TO'],
'pluginOptions' => [
'autoclose' => true,
'format' => 'yyyy-mm-dd'
]
]); ?>
However all that has managed to do is align all four fields to the left of the div - i can't figure out from the documentation how to use the Yii2 options to do this without having to manually add custom css.
Upvotes: 8
Views: 11999
Reputation: 8607
All you need is to wrap your form columns in another bootstrap row
.
<?php $form = ActiveForm::begin([
'layout' => 'horizontal',
'action' => ['index'],
'method' => 'get',
'fieldConfig' => [
'horizontalCssClasses' => [
'label' => 'col-sm-2',
'offset' => 'col-sm-offset-2',
'wrapper' => 'col-sm-4',
],
],
]); ?>
<div class="row">
<div class="col-md-6">
<?= $form->field($model, 'firstname') ?>
<?= $form->field($model, 'lastname') ?>
</div>
<div class="col-md-6">
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'bla') ?>
</div>
</div>
<?php ActiveForm::end() ?>
Upvotes: 13
Reputation: 133410
You can use bootstrap grid for build the the layout you prefer
<div class="site-index">
<div class="body-content">
<div class='col-sm-6 col-md-6' id='id'>
<?php
$form1 = ActiveForm::begin([
'layout' => 'horizontal',
'action' => ['index1'],
'method' => 'get',
'fieldConfig' => [
'horizontalCssClasses' => [
'label' => 'col-sm-2',
'offset' => 'col-sm-offset-2',
'wrapper' => 'col-sm-4',
],
],
]);
...
?>
</div>
<div class='col-sm-6 col-md-6' id='id2'>
$form2 = ActiveForm::begin([
'layout' => 'horizontal',
'action' => ['index2'],
'method' => 'get',
'fieldConfig' => [
'horizontalCssClasses' => [
'label' => 'col-sm-2',
'offset' => 'col-sm-offset-2',
'wrapper' => 'col-sm-4',
],
],
]);
...
</div>
</div>
</div>
Upvotes: 0