Problem with look of closing buttons and their functionality #191
Description
Hi!
I haved installed your beautiful widget for fileinput control and trying to use it for my form.
When I just copy example code from your documentation and paste it into my form I get your widget and it is working, but there are two problems.
At first I install file-input widget with the all of your widgets.
Then I tried to solve problems with the buttons and install file-input widget separately, but it doesn't help.
Also I have searched for same issues but couldn't find any hint about it.
The "х" button in the right upper coner seems broken. As I understand, it looks like this because the css class for it is wrong. It should be "btn-close fileinput-remove", but it is just "close fileinput-remove".
Also all notification from your widget which appears in it like bootstrap alerts have the same problem with their closing buttons.
This button for closing modal window is not working. (but you can close the window by clicking somewhere else outside this window) As I understand, it happens because for this button there is must be attribute data-bs-dismiss="modal", but your widget has the wrong name for that attribute, which is just data-dismiss="modal"
As I see the demo on your website - all this attributes and classes are correct, but I don't understand why in my project they are not correct. :(
Could you, please, say what did I miss or what am I doing wrong because I have no idea how to force your widget use the correct css-classes and attributes in my project.
Except for this two little and very annoing problems with "x" buttons your widget are working fine and suits my needs perfectly.
I am using Bootstrap5 for my Yii2 project.
So I have in my global app params:
'bsVersion' => '5.x',
and there is a configuration of your widget which has this problems in my form
use kartik\widgets\FileInput;
echo FileInput::widget([
'bsVersion' => '5.x',
'name' => 'attachments[]',
'options'=>[
'multiple'=>true
],
'pluginOptions' => [
'initialPreview'=>[
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg"
],
'initialPreviewAsData'=>true,
'initialCaption'=>"The Moon and the Earth",
'initialPreviewConfig' => [
['caption' => 'Moon.jpg', 'size' => '873727'],
['caption' => 'Earth.jpg', 'size' => '1287883'],
],
'overwriteInitial'=>false,
'maxFileSize'=>2800,
'showCancel' => false,
'showUpload' => false,
'browseIcon' => '<i class="fas fa-image"></i> ',
'removeIcon' => '<i class="fas fa-trash"></i> ',
'removeLabel' => '',
]
]);
my require section in the composer.json is:
"require": {
"php": ">=7.4.0",
"yiisoft/yii2": "~2.0.45",
"yiisoft/yii2-bootstrap5": "~2.0.2",
"yiisoft/yii2-symfonymailer": "~2.0.3",
"kartik-v/yii2-grid": "dev-master",
"kartik-v/yii2-bootstrap5-dropdown": "dev-master",
"kartik-v/yii2-widget-select2": "dev-master",
"kartik-v/yii2-mpdf": "dev-master",
"kartik-v/yii2-widget-datepicker": "*",
"kartik-v/yii2-field-range": "*",
"kartik-v/yii2-widgets": "dev-master",
"kartik-v/yii2-widget-fileinput": "dev-master",
"bower-asset/font-awesome": "^6.4",
"bower-asset/bootbox": "*",
"bower-asset/select2": "*",
"phpoffice/phpword": "^1.1"
},