Append Button Before/After Input/Select

Yii 2.0 General Discussions
1

I’m sure there is a simple solution, but my Google skills can’t seem to find an example to follow and could not find it in the Guide or Wiki, but how can I prepend or append an HTML element, such as an Input or Select with a button to open a modal?

Say I currently have

echo $form->field($model, "[{$i}]CityId", ['template' => '<div class="col-sm-12">{input}{error}</div>',])
->dropDownList(
	ArrayHelper::map(
		LstCities::find()
			->orderBy([
				'Name' => SORT_ASC,
			])
			->all(),
		'CityId',
		'Name'
	),
	[
		'prompt' => 'Select a City ...',
	]
)
->label(null);

and I want to append

Html::button(
	'<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>', // .Yii::t('app', ' New City'), 
	[
		'id'=>'NewCity' . $i,
		'value'=>Url::to(['lst-cities/create']), 
		'title'=>Yii::t('app', 'Add a New City To The List'), 
		'class'=>'btn btn-success',
	]
)

What is the proper way to do this using Yii2 with bootstrap 3?

2

I’ve gotten very close by doing the following

// Basic Button
$appendBtn = Html::button(
				'<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>',
				[
					'id'=>'NewCity' . $i,
					'value'=>Url::to(['lst-cities/create']), 
					'title'=>Yii::t('app', 'Add a New City To The List'), 
					'class'=>'btn btn-success',
				]
			);
// Add Span to surround button
$appendBtn = Html::tag('span', $appendBtn, ['class' => 'input-group-btn']);

echo $form->field(
	$model, 
	"[{$i}]CityId",
	[
		'template' => '<div class="input-group">{input}{error}' . $appendBtn . '</div>',
	])
	->dropDownList(
		ArrayHelper::map(
			LstCities::find()
				->orderBy([
					'Name' => SORT_ASC,
				])
				->all(),
			'CityId',
			'Name'
		),
		[
			'prompt' => 'Select a City ...',
		]
	)
	->label(null);

I’d love feedback on whether or not this is the proper way to do this.

The above is slightly off visually. The button is slightly lower than the select and I can’t figure out why. Is this normal?