YII2 add horizontal scrollbar in gridview

Question

I have a database table with 32 columns and I successfully displayed them in the yii2 gridview. The problem is the 32 columns will not fit in the window. I want to add a horizontal scroll bar at the bottom. How can I do that?

Here is the screenshot.

Answer 1

You just need to put a div around it and then set the overflow using CSS. You will need to set the height.

overflow: auto;
overflow-y: hidden;
Height:?

Answer 2

If you are using Bootstrap 3 you can always use table-responsive class like so;

<div class="table-responsive">
    <?= GridView::widget(); ?>
</div>

Answer 3

i'm using kartik, just add :

'options' => ['style' => ['width' => '1800px']]

include resize font :

'options' => ['style' => ['font-size'=>'13px', 'width' => '1800px']],

Answer 4

You have to add div around GridView:

<div style="overflow-x: auto; width: 100%;">
     <?= GridView::widget...?>
</div>