Imposing Dropdown-Boxes using bootstrap

Yii 2.0 General Discussions
1

Hi guys,

I am currently falling into despair. I try to dispose two DropDown-Boxes in a row. The Boxes should have space between themselves - Look at my attachement(bootstap_output.jpg),please.

Following code will plot 2 [size="2"]DropDown-Boxes[/size][size="2"] in a row, but there is no space between themselves.[/size]

[size="2"]Any ideas, how to use CSS rule correctly?[/size]





<?= $form->errorSummary($model); ?>

<!-- START ACCORDION & CAROUSEL-->

<h2 class="page-header">Bootstrap Accordion & Carousel</h2>

<div class="row">

   <div class="col-md-8">

        <div class="box box-solid">

   		<div class="box-header with-border">

                <h3 class="box-title">Collapsible Accordion</h3>

            </div>

            <!-- /.box-header -->

            <div class="box-body">

                <div class="box-group" id="accordion">

           		<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->

                    <div class="panel box box-primary">

                        <div class="box-header with-border">

                   		<h4 class="box-title">

                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

                           		Inputfelder der Personentabelle

                                </a>

                            </h4>

                        </div>

                        <div id="collapseOne" class="panel-collapse collapse in">

                            <div class="box-body">

                                <div class="row">

                                    <div class="col-md-3">Four elements spaced in a row </div>

                                    <div class="col-md-3 ">Four elements spaced in a row  </div>

                           		<div class="col-md-3 ">Four elements spaced in a row  </div>

                                    <div class="col-md-3 ">Four elements spaced in a row  </div>

                                </div>

                                <div class="row">

                                    <div class="col-md-6 ">Two elements spaced in a row </div>

                                    <div class="col-md-6 ">Two elements spaced in a row </div>

                                </div>

                                <div class="row">

                                <div class="col-md-6">

                                        <?=

                               		$form->field($model_person, 'id_personentyp_dominant')->widget(\kartik\widgets\Select2::classname(), [

                                            'data' => \yii\helpers\ArrayHelper::map(\common\modules\lookup\models\LPersonentyp::find()->orderBy('id')->asArray()->all(), 'id', 'typ_name'),

                                            'options' => ['placeholder' => Yii::t('app', 'Bitte wählen Sie eine Chakterisierung aus')],[/size]

                                   		'pluginOptions' => [

                                                'allowClear' => true

                                   		],

                               		]);

                               		?>

                                    </div><div class="col-md-6">




                               		<?=

                               		$form->field($model_person, 'id_personentyp_peripher')->widget(\kartik\widgets\Select2::classname(), [

                                            'data' => \yii\helpers\ArrayHelper::map(\common\modules\lookup\models\LPersonentyp::find()->orderBy('id')->asArray()->all(), 'id', 'typ_allgemein_eigenschaft_1'),

                                            'options' => ['placeholder' => Yii::t('app', 'Bitte wählen Sie eine Chakterisierung aus')],

                                   		'pluginOptions' => [

                                       		'allowClear' => true

                                   		],

                               		]);

                                        ?>

                           		</div></div></div></div></div></div></div></div></div></div>
2

Add padding by hand

3

Try using two size 5 columns instead of 6. You may need a blank spacer.




<div class="col-sm-5">

//First Dropdown

</div>

<div class="col-sm-2">

 <hr>

</div>

<div class="col-sm-5">

//Second Dropdown

</div>
4

Didn’t help- formular will be more chaotically using ur rules. There a more elements after this two DropDownboxes!

I solved problem seperating formularinput using JavaScript(accordion) and ordering each element in a row




<div class="col-md-12"></div>

.

.

.