Yii2 - DetailView widget float left

问题:

I'm trying to override the disposal of the DetailView widget by applying new css class but with no luck. I want all the records shown in the several instances of a DetailView widget to appear side by side. I create a class in app\web\css called detail1-view and apply it to the detaiview.php in vendor folder. The class has float:left, or display:inline-block in it, but none of the attributes work.

My Detailview is:

<?= 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']],
        ],
    ],
]) ?>

and my detailview.php in folder vendor/yiisoft/yii2/widgets/... has in it the detail1-view class in the right place:

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

My CSS:

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

The DetailView continues to display one in top of another and not side by side.

Anybody has a solution for this issue ?

回答1:

I solved it by myself.

The trick was to create another class with position:relative; and put the detailview widget inside it.

Here's the code for the view:

<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']],
        ],
    ],
]) ?>

and the css style used in app/web/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;
}

Now the detailview widget appears side by side every time a model is called.