Yii2 Krajee Select2 插件格式化

Posted 2023-05-07

【中文标题】Yii2 Krajee Select2 插件格式化

【英文标题】：Yii2 Krajee Select2 Plugin Formatting

【发布时间】：2015-02-21 02:35:59

【问题描述】：

我正在使用带有引导程序的 yii2。

当用 select2 小部件替换常规输入字段时，它会“破坏”我的页面布局：

区域的html代码为：

            <div class="col-md-4">
                <div class="panel panel-primary" style="padding: 10px;">
                    <div class="form-horizontal" role="form">
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor:</label>

                            <div class="col-xs-8">
                                <?php
                                echo $form->field($model, 'vendor_id', ['template' => "input"])->widget(Select2::classname(), [
                                    'options' => ['placeholder' => 'Search for a vendor ...'],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                        'minimumInputLength' => 3,
                                        'ajax' => [
                                            'url' => $url,
                                            'dataType' => 'json',
                                            'size' => Select2::SMALL,
                                            'data' => new JsExpression('function(term,page)  return search:term; '),
                                            'results' => new JsExpression('function(data,page)  return results:data.results; '),
                                        ],
                                        'initSelection' => new JsExpression($initScript)
                                    ],
                                ]);
                                ?>
                                <!--                                    <input class="form-control" type="text" id="formGroupInputSmall"-->
                                <!--                                           placeholder="please enter vendor">-->
                            </div>
                        </div>
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor PO
                                Number:</label>

                            <div class="col-xs-8">
                                <input class="form-control" type="text" id="formGroupInputSmall"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor Inv. No:</label>

                            <div class="col-xs-8">
                                <input class="form-control" type="text" id="formGroupInputSmall" placeholder="">
                            </div>
                        </div>
                        <div class="form-group form-group-sm">
                            <label class="col-sm-4 control-label" for="formGroupInputSmall">Vendor Inv.
                                Date:</label>

                            <div class="col-xs-8">
                                <input class="form-control" type="text" id="formGroupInputSmall"
                                       placeholder="12/18/2014">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

如何更改 select2 上的样式以使其再次适合我的布局？

【参考方案1】：

遇到了类似的问题（不是 Select2，而是另一个 Krajee-widget）。 为我解决的问题是将每一行放在

<div class="row">
    Label
    Input
</div>

【参考方案2】：

您应该尝试使用最新版本的Select2 plugin 并进行更新。

此外，您似乎正在使用水平引导表单布局，可能与 ActiveForm 一起使用。 bootstrap 样式针对kartik\widgets\ActiveForm 使用进行了优化，您想要check as seen here for complex layouts。