unclead / yii2-multiple-input

Yii2 widget for handle multiple inputs for an attribute of model
https://unclead.github.io/yii2-multiple-input/
BSD 3-Clause "New" or "Revised" License
393 stars 127 forks source link

all icon missing #366

Closed kenjisoul closed 3 years ago

kenjisoul commented 3 years ago

This is my code after install

 <?=
            $form->field($model, 'i_name')->widget(MultipleInput::className(), [
                'max' => 6,
                'min' => 1, // should be at least 2 rows
                'allowEmptyList' => false,
                'enableGuessTitle' => true,
                'addButtonPosition' => MultipleInput::POS_HEADER, // show add button in the header
            ])
            ->label(false)
 ?>

image

unclead commented 3 years ago

@kenjisoul what version of the widget you're using?

kenjisoul commented 3 years ago

@kenjisoul what version of the widget you're using?

"unclead/yii2-multiple-input": "~2.0"

yii2 latest version

bootstrap4

unclead commented 3 years ago

the widget was written in the time of BS3 and nobody has added support of BS4 😄 Probably, you need to use this trick https://unclead.github.io/yii2-multiple-input/icons/

unclead commented 3 years ago

@kenjisoul did it solve the issue?

kenjisoul commented 3 years ago

@unclead I cannot find icon library to add that code, which file to add that code?

unclead commented 3 years ago

It depends on the icon library you're using. AFAIR, there is no built-in library like glyphicons in BS4, so you should: 1) either use font awesome and in in this case you just need to set the option iconSource in the widget settings


<?=
            $form->field($model, 'i_name')->widget(MultipleInput::className(), [
                'max' => 6,
                'min' => 1, // should be at least 2 rows
                'allowEmptyList' => false,
                'enableGuessTitle' => true,
                'addButtonPosition' => MultipleInput::POS_HEADER, // show add button in the header
               'iconSource' => 'fa'
            ])
            ->label(false)
 ?>

2) or you a custom library and configure required icons using the option 'iconMap'
kenjisoul commented 3 years ago

Thank you, I'm solved.

add this link <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"> and add 'iconSource' => 'fa'