it-swarm.com.ru

Как расположить поля формы yii2 рядом

Я хотел бы разместить поля формы в Yii2 рядом, в сетке 2x2.

Я использую загрузчик/ActiveForm как таковой

    <?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',
        ],
    ],
]); ?>

Поля в основном представляют собой серию виджетов даты

<?= $form->field($model, 'saleFrom')->widget(DatePicker::className(), [
    'options' => ['placeholder' => 'TO'],
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'yyyy-mm-dd'
    ]
]); ?>

Однако все, что удалось сделать, это выровнять все четыре поля слева от div - я не могу понять из документации, как использовать опции Yii2 для этого без необходимости вручную добавлять пользовательские CSS.

5
yoyoma

Все, что вам нужно - это обернуть столбцы формы в другое 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() ?>
9
Michael Härtl

Вы можете использовать сетку bootstrap для создания макета, который вы предпочитаете

<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>          
0
scaisEdge