更改Boostrap Collapse控件的标题大小- Yii 2.0

ecbunoof  于 2022-11-09  发布在  其他
关注(0)|答案(3)|浏览(265)

有没有人能告诉我,在Yii 2.0中如何改变折叠窗口小部件标题的高度?它现在是40px,我想把它变成20px.呈现窗口小部件的容器div有.panel.panel-default.panel-collapse类,但是我不确定是否有可以直接在collapse小部件中设置的选项,或者我是否必须以某种方式覆盖CSS。(“options”设置仅适用于正文内容,不适用于标题)。

echo Collapse::widget([

        'items' => [

                [
                        'label' => $mycollapseheader,
                        'content' => $contentstring,
                        'encode' => false,
                        //'options' => ['style' => 'background:black'],
                        //'contentOptions' => [],
                ],

        ]
]);
dgsult0t

dgsult0t1#

正如您可以从Collapse小部件的source code中看到的那样-没有办法直接更改标题宽度。
你有两种方法来解决这个问题-首先修改小部件(看一看TbGridView小部件,它有一个headerHtmlOptions)。

'headerHtmlOptions' => array(
    'style' => 'width:30px;'
)

第二种方法是更改每个Javascript的宽度值。
希望对你有帮助。

plicqrtu

plicqrtu2#

谢谢你Bfcm!我没有想到javascript选项。事实证明,这是一个覆盖.panel-heading类的顶部和底部填充的问题。

$(document).ready(function(){
  $( '.panel-heading').each(function(){

   $( this ).css({'padding':'0px 20px 0px 20px'});

  });
});
35g0bw71

35g0bw713#

我在collapse小部件中更改了标题设计,如下所示:

<?php   echo Collapse::widget([

        'encodeLabels' => false,
        'items' => [
            // equivalent to the above
            [
                'label' => '<span class="myclass">MyHeader:</span>',
                'content' => $this->render('_mycollapse', ['model' => $model]) ,
                // open its content by default
                //'contentOptions' => ['class' => 'in']
            ],

        ]
    ]);
    ?>

请注意,如果Header不是由客户端设置的,则encodeLabels参数是有用的。因此,您现在可以在“style.css”中设置“myclass”的样式

相关问题