CODEWITHSUNDEEP
gridviewyii2
Felipe Carrasco
Felipe Carrasco

Reputation: 47

Enable/Disable column width auto adjust in GridView

It is possible to avoid GridView width adjustment to the screen size?, so that when a column has too much data the horizontal scroll is enabled in the browser and the content is displayed in one line? I've tried this with different values, but no success:

'contentOptions' => ['style' => 'width:100px']

Upvotes: 0

Views: 1221

Answers (1)

Mihai P.
Mihai P.

Reputation: 9367

You can use the bootstrap responsive utilities to accomplish this http://getbootstrap.com/css/#responsive-utilities

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'layout' => "\n{items}\n",
    'filterPosition' => '',
    'columns' => [
.................. HIDING A COLUMN ON A SMALL DEVICE -----------------
        [
            'header'=>'Time',
            'headerOptions' => ['class' => 'hidden-sm'],
            'contentOptions' => ['data-columnname' => 'Address', 'class' => 'hidden-sm'],
            'format'=>'raw',
.................. Merging info in 1 column on a small device the address and locations are their own columns, on small device the columns are hidden and the info is available in the Venue column-----------------
        ],
        [
            'contentOptions' => ['data-columnname' => 'Venue'],
            'attribute'=>'VENUE',
            'header'=>'Venue'  . Html::tag('span', ' / Address', ['class' => 'visible-sm-inline']),
            'value'=>function ($model, $key, $index, $widget) {
                    return $model->VENUE .
                    Html::tag('span', '<br>' . $model->ADDRESS, ['class' => 'visible-sm-inline']) .
                    Html::tag('span', '<br>' . $model->LOCATION, ['class' => 'visible-sm-inline']);
            },
            'format'=>'raw',
        ],
    ],
]); ?>

Upvotes: 1

Related Questions