Search code examples
csstwitter-bootstrapyiiyii2detailview

What sets column width / distribution in Yii2's DetailView?

The same view, the same DetailView, the same code, different model, different end result:

enter image description here

What sets column width in this case? Why it is shifting with each record? Is this a Bootstrap or Yii2 issue? I tried to analyse generated code with Chrome Dev Tools, but got no conclusions. As you can see, there is a lot of empty spaces in both columns, so column width shifting should not occur.

Most important -- how to prevent that? How to make sure, that every view will look exactly the same, no matter what data will be printed inside DetailView?

Solution

  • If you check the class yii\widgets\DetailView you will super quickly understand that you can set the size of the columns for example like this:

    <?= DetailView::widget([
    'model' => $model,
    'attributes' => [
        [
            'attribute' => 'id',
            'captionOptions' => ['style' => 'width:20rem'],
      // or 'contentOptions' => ['style' => 'width:20rem']
        ],
        'name',
    ],
]) ?>