【问题标题】:Yii2 - DetailView widget float leftYii2 - DetailView 小部件向左浮动
【发布时间】:2015-01-04 23:21:28
【问题描述】:

我试图通过应用新的 css 类来覆盖 DetailView 小部件的处置,但没有运气。我希望DetailView 小部件的几个实例中显示的所有记录并排显示。我在app\web\css 中创建了一个名为detail1-view 的类,并将其应用于供应商文件夹中的detaiview.php。该类中有float:leftdisplay:inline-block,但这些属性都不起作用。

我的详细视图是:

<?= DetailView::widget([
    'model' => $model,
    'attributes' => [
      //'titulo',
      'noticia',
        // cria um array com a fotografia, em que
        // carrega a path no campo fieldName da bd
        [
            'attribute'=>'fotodir',
            'value'=>$model->fotodir,
            'format' => ['image', ['width'=>'230','height'=>'200']],
        ],
    ],
]) ?>

我在文件夹vendor/yiisoft/yii2/widgets/... 中的detailview.php 在正确的位置有detail1-view 类:

public $options = ['class' => 'detail1-view'];

我的 CSS:

.detail1-view {
    display: inline-block;
    width: 30%; 
    border:1px solid #000;
}

DetailView 继续显示一个在另一个之上而不是并排显示。

谁有这个问题的解决方案?

【问题讨论】:

    标签: css widget yii2


    【解决方案1】:

    我自己解决了。

    诀窍是用 position:relative; 创建另一个类。并将detailview小部件放入其中。

    这是视图的代码:

    <div class="detail-disposal">
    <?= DetailView::widget([
        'model' => $model,
        'options' => ['class' => 'detail1-view'],
        'attributes' => [
          //'titulo',
          'noticia',
            // cria um array com a fotografia, em que carrega a path no campo fieldName da bd
            [
            'attribute'=>'fotodir',
            'value'=>$model->fotodir,
            'format' => ['image',['width'=>'230','height'=>'200']],
            ],
        ],
    ]) ?>
    

    以及 app/web/css 中使用的 css 样式:

    .detail-disposal{
        position:relative;
        width:100%;
    }
    

    DetailView CSS:

    .detail1-view {
        margin-left:20px;
        margin-bottom:20px;
        float:left;
        width: 300px; 
        border:1px solid #000;
    }
    

    现在,每次调用模型时,detailview 小部件都会并排显示。

    【讨论】:

      猜你喜欢
      • 2017-02-07
      • 1970-01-01
      • 2015-12-27
      • 1970-01-01
      • 2022-11-27
      • 1970-01-01
      • 2017-07-10
      • 1970-01-01
      • 2016-04-13
      相关资源
      最近更新 更多