css - Kartik fileInput CSS 覆盖其他样式表
问题描述
我有一个包含 kartik fileInput 的表单。这就是我的表单的样子:
<?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(); ?>
我的 Kartik CSS/JS 与我的其他样式表在同一个资产中。这是我的资产:
<?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 = [
];
}
问题是当我回显 fileInput 时,它会弄乱整个表单的 CSS。评论
<?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), ['options' => ['accept' => 'image/*','multiple' => true]]); ?>
部分后,样式恢复正常。如何解决此问题,以便 fileInput 不会覆盖自定义 CSS?
这就是我的表单在添加 fileInput 小部件之前/之后的样子。
之前:https ://imgur.com/wAdgeHz 之后:https ://imgur.com/yqe8yM8
解决方案
尝试设置
Yii::$app->params['bsDependencyEnabled'] = false
在您的 params.php 文件中。这将阻止加载引导 css 和 js 资产文件。
来源:http ://demos.krajee.com/widget-details/fileinput#override-bootstrap-cssjs
推荐阅读
- java - Java - 通过多行正则表达式匹配第一个字符串
- sql-server - 全文搜索命中突出显示与 SQL Server 2017 相结合
- postgresql - 如何在 celery 任务中启动的 asyncio 协程中利用 django 模型?
- xamarin - 我在哪里可以定义我的风格,以便我可以进入所有标签页?
- angular7 - 发布请求状态 200 但数据库中没有数据
- python - 侦听器被可能的恶意数据包ping通。如何防止 IP 访问我的端口?
- c - 验证用户输入的“字符串”长度(C 语言)
- html - 连接
- 带有 formControlName 的标签,使用 Reactive Forms 的 FormBuilder
- makefile - 可以使 GNU Make 遵循规则中的符号链接吗
- python - 再培训或继续培训