【问题标题】:Yii2: Increasing FileInput width using ActiveForm of kartikYii2:使用 kartik 的 ActiveForm 增加 FileInput 宽度
【发布时间】:2018-03-18 17:48:07
【问题描述】:

一个简单的问题,但遗憾的是没有答案:

我正在使用这样的 kartik 的 ActiveForm

<?php
    $form = ActiveForm::begin([
                'id' => 'dynamic-form',
                'type' => ActiveForm::TYPE_INLINE,
                'formConfig' => [
                    'showLabels' => false,
                    'formConfig' => ['deviceSize' => ActiveForm::SIZE_LARGE]
    ]]);
?>

以及像这样上传文件的小部件

<div class="col-md-12">
        <?=
        $form->field($model, 'attachement[]', ['horizontalCssClasses' => [''deviceSize' => ActiveForm::SIZE_LARGE]])->widget(FileInput::classname(), [
            'options' => ['multiple' => true],
            'pluginOptions' => ['allowedFileExtensions' => ['jpg', 'bmp', 'png', 'docx', 'doc', 'xls', 'xlsx', 'csv', 'ppt', 'pptx', 'pdf', 'txt', 'avi', 'mpeg', 'mp3', 'sql']
            ],
        ])
        ?>
</div>

无论我尝试什么,引导规则 col-md-12 都会因为使用 TYPE-INLINE 而导致无效。使用TYPE-HORIZONTAL 符合我的意图,但我需要TYPE-INLINE 用于其他输入字段。

任何想法如何实现我在整个屏幕宽度上显示小部件的意图?

【问题讨论】:

  • 您是否要向表单字段的包装容器div 添加一个类。喜欢THIS

标签: yii2 kartik-v


【解决方案1】:

如果您尝试将 col-sm-12 类添加到表单组元素/字段的容器标签中,那么您可以使用如下表单的 fieldConfig 选项

<?php
$form = ActiveForm::begin ( [
            'id' => 'dynamic-form' ,
            'type' => ActiveForm::TYPE_INLINE ,
            'fieldConfig' => [
                'options' => [
                    'class' => 'col-sm-12 form-group' ,
                    'tag' => 'div'
                ]
            ] ,
            'formConfig' => [
                'showLabels' => false ,
                'formConfig' => [ 'deviceSize' => ActiveForm::SIZE_LARGE ]
    ] ] );
?>

如果您只想将此类添加到文件字段的容器div 小部件然后通过field 的选项添加它

<?=
$form->field ( $modelUpload , 'file',[
    'options'=>['class'=>'form-group col-sm-12'],
] )->widget ( FileInput::classname () , [
    'options' => [ 'multiple' => true ] ,
    'pluginOptions' => [ 'allowedFileExtensions' => [ 'jpg' , 'bmp' , 'png' , 'docx' , 'doc' , 'xls' , 'xlsx' , 'csv' , 'ppt' , 'pptx' , 'pdf' , 'txt' , 'avi' , 'mpeg' , 'mp3' , 'sql' ]
    ] ,
] )
?>

【讨论】:

  • 完美解决方案。谢谢。 U 的另一个声誉点 :=)
  • 谢谢先生,很高兴我能帮到你:) @tklustig
猜你喜欢
  • 2018-12-21
  • 2017-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-13
  • 1970-01-01
  • 2016-07-14
相关资源
最近更新 更多