Yii2 - Dynamic Form with a single model - yii2

Question

I have always worked with Dynamic Form that saved in multiple models, especially wbraganca. However, I want to create a Dynamic Form whereby everything will be saved on the same Model Class, CentreProgramme. When the Add button is clicked, Dropdownlist with attribute Programme_id will be created.
How do I achieve this.
I used the code shown below, but the Dropdown is not wide enough to accommodate on the data. When I select all from the dropdown, it spreads accross the dropdown because the data is too large. Thanks
I have this Model Class
CentreProgramme
public function attributeLabels()
{
return [
'id' => Yii::t('centre', 'ID'),
'state_office_id' => Yii::t('centre', 'State Office'),
'study_centre_id' => Yii::t('centre', 'Study Centre'),
'programme_id' => Yii::t('centre', 'Programme'),
];
}
Controller
public function actionCreate()
{
$model = new StudyCentreProgramme();
if ($model->load(Yii::$app->request->post()) && isset($_POST['StudyCentreProgramme'])) {
$model->attributes = $_POST['StudyCentreProgramme'];
for($i=0;$i<count($_REQUEST['StudyCentreProgramme']['programme_id']);$i++) :
$model->id = NULL;
$model->isNewRecord = true;
$model->programme_id = $_POST['StudyCentreProgramme']['programme_id'][$i];
$model->state_office_id = $_POST['StudyCentreProgramme']['state_office_id'];
$model->study_centre_id = $_POST['StudyCentreProgramme']['study_centre_id'];
if($model->save()) {
Yii::$app->session->setFlash('green-'.$i, '<i class="fa fa-info-circle"></i> <b>Study Centre Programme: </b> is created successfully');
} else {
Yii::$app->session->setFlash('red-'.$i, '<i class="fa fa-warning"></i><b>Study Centre Programme: </b> has already been taken.');
}
endfor;
return $this->redirect(['index']);
} else {
return $this->render('create', [
'model' => $model,
]);
}
}
View
<?php $form = ActiveForm::begin([
'id' => 'study-centre-programme-form',
'fieldConfig' => [
'template' => "{label}{input}{error}",
],
]); ?>
<div class="col-xs-12 col-sm-6 col-lg-6">
<?= $form->field($model, 'state_office_id')->dropDownList(ArrayHelper::map(\common\models\StateOffice::find()->where(['is_status' => 0])->all(),'id','state_name'),
[
'prompt'=>Yii::t('app', '--- Select State Officee ---'),
'onchange'=>'
$.get( "'.Url::toRoute('dependent/getprogrammestudycentre').'", { id: $(this).val() } )
.done(function( data ) {
$( "#'.Html::getInputId($model, 'state_office_id').'" ).html( data );
}
);'
]
); ?>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<?= $form->field($model, 'state_office_id')->dropDownList([''=>Yii::t('app', '--- Select Study Centre ---')]); ?>
</div>
<div class="col-xs-12 col-sm-12 col-lg-12">
<?php
if(Yii::$app->controller->action->id === 'create' ) {
echo $form->field($model, 'programme_id[]')->dropDownList(ArrayHelper::map(common\models\Programme::find()->where(['is_status' => 0])->all(),'id','programme_name'),['multiple' => "multiple", 'class'=>'form-control', 'placeholder' => $model->getAttributeLabel('programme_id')]);
} else {
echo $form->field($model, 'programme_id')->dropDownList(ArrayHelper::map(common\models\Programme::find()->where(['is_status' => 0])->all(),'id','programme_name'),['class'=>'form-control', 'placeholder' => $model->getAttributeLabel('programme_id')]);
}
?>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-4 no-padding jkkesrmsArLangCss">
<div class="col-xs-6">
<?= Html::submitButton($model->isNewRecord ? Yii::t('centre', 'Create') : Yii::t('centre', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-block btn-success' : 'btn btn-block btn-info']) ?>
</div>
<div class="col-xs-6">
<?= Html::a(Yii::t('centre', 'Cancel'), ['index'], ['class' => 'btn btn-default btn-block']); ?>
</div>
</div>
<?php ActiveForm::end(); ?>
[