Yii2 - DetailView widget float left - css

Question

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 ?

Answer 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.