CODEWITHSUNDEEP
gridviewyii2horizontal-scrollingyii-widgets
beginner
beginner

Reputation: 2032

YII2 add horizontal scrollbar in gridview

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.

enter image description here

Upvotes: 1

Views: 7513

Answers (4)

Phemelo Khetho
Phemelo Khetho

Reputation: 280

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

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

Upvotes: 2

YurgenTM
YurgenTM

Reputation: 83

You have to add div around GridView:

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

Upvotes: 0

Adityo
Adityo

Reputation: 111

i'm using kartik, just add :

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

include resize font :

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

Upvotes: 0

Ferdinand Balbin
Ferdinand Balbin

Reputation: 687

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:?

Upvotes: 4

Related Questions