Kartik fileInput CSS overrides other stylesheets

Question

I have a form which contains kartik fileInput. This is how my form looks like:

<?php $form = ActiveForm::begin([
                    'id' => 'login-form',
                    'layout' => 'horizontal',
                    'fieldConfig' => [
                    'horizontalCssClasses' => [
                        'label' => 'col-sm-4',
                        'offset' => 'col-sm-offset-2',
                        'wrapper' => 'col-sm-15'
                      ],
                  ],
                ]); ?>
                <div class="form-label-group">
                  <?= $form->field($model, 'model')->textInput(['autofocus' => true, 'class' => 'form-control', 'id' => 'inputEmail'])->label('PHONE MODEL:') ?> 
                </div>
                <div class="form-label-group">
                  <?= $form->field($model, 'name')->textInput(['class' => 'form-control', 'id' => 'inputEmail'])->label('PHONE MODEL NAME:') ?> 
                </div>
                <div class="form-label-group">
                  <?= $form->field($model, 'price')->textInput(['class' => 'form-control', 'id' => 'inputEmail'])->label('PRICE:') ?> 
                </div>
                <div class="form-label-group">
                  <?= $form->field($model, 'description')->textarea(['class' => 'form-control', 'id' => 'inputEmail'])->label('DESCRIPTION:') ?> 
                </div>
                        <?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), [
                            'options' => ['accept' => 'image/*','multiple' => true]
                        ]); ?>
                <?= Html::submitButton('ADD', ['class' => 'btn btn-lg btn-block add-btn mt-4']) ?>
                <?php ActiveForm::end(); ?>

I have my Kartik CSS/JS in the same asset as my other stylesheets. This is my asset:

<?php

namespace app\assets;
use yii\web\AssetBundle;

class DashboardAsset extends AssetBundle 
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [ 
    'css/dashboard/c3.min.css',
    'css/dashboard/dashboard1.css',
    'css/dashboard/morris.css',
    'css/dashboard/style.css',
    '//fonts.googleapis.com/css?family=Lobster&display=swap',
    // Kartik fileInput
    'css/kartik-fileInput/fileinput.css',
    'css/kartik-fileInput/theme.css'
]; 
public $js=[
    'js/dashboard/bootstrap.min.js',
    'js/dashboard/c3.min.js',
    'js/dashboard/custom.min.js',
    'js/dashboard/d3.min.js',
    'js/dashboard/dashboard1.js',
    'js/dashboard/jquery-3.2.1.min.js',
    'js/dashboard/jquery.sparkline.min.js',
    'js/dashboard/morris.min.js',
    'js/dashboard/perfect-scrollbar.jquery.min.js',
    'js/dashboard/popper.min.js',
    'js/dashboard/raphael-min.js',
    'js/dashboard/sidebarmenu.js',
    'js/dashboard/waves.js',
    // Kartik fileInput
    'js/kartik-fileInput/file.js',
    'js/kartik-fileInput/es.js',
    'js/kartik-fileInput/fileinput.js',
    'js/kartik-fileInput/fr.js',
    'js/kartik-fileInput/piexif.js',
    'js/kartik-fileInput/sortable.js',
    'js/kartik-fileInput/theme.js',
    'js/kartik-fileInput/theme2.js'
];

//if this asset depends on other assets you may populate below array
public $depends = [
];
}

The problem is that when I echo out the fileInput, it messes entire form's CSS up. After commenting the <?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), ['options' => ['accept' => 'image/*','multiple' => true]]); ?> part, the styles are back to normal. How can I fix this problem so the fileInput doesn't overwrite custom CSS?

This is how my form looks like before/after adding the fileInput widget.

Before: https://i.sstatic.net/iIOj9.jpg After: https://i.sstatic.net/ddnfM.jpg

Answer 1

Try setting

Yii::$app->params['bsDependencyEnabled'] = false

in your params.php file. This will prevent the loading of bootstrap css and js asset files.

source: http://demos.krajee.com/widget-details/fileinput#override-bootstrap-cssjs