GridView display issue when it has many columns and/or columns have long name

[michaelnguyen2021]

The culprit is

.grid-view th {
    white-space: nowrap;
}

under web\css\site.css for default template
or frontend\web\css\site.css and backend\web\css\site.css for advance template

With white-space: no-wrap

With white-space: no-wrap and

[
    'attribute' => 'st_hourly_billable',
    'format' => 'currency',
    'headerOptions' => ['style' => 'max-width: 50px']
],

Remove white-space: no-wrap

Remove white-space: no-wrap and use

[
    'attribute' => 'st_hourly_billable',
    'format' => 'currency',
    'headerOptions' => ['style' => 'max-width: 50px']
],

[cebe]

as far as I remember no-wrap has been added to avoid that the sort icon would be on the next line. maybe there is a better way to force it to be after the last word in the same line.

[YaroslavShapoval]

I think there can be a few solutions (example on advanced template):

Add css-class on every parent cell of ActionColumn and add no-wrap only for these columns.

common/confog/bootstap.php

\Yii::$container->set('yii\grid\ActionColumn', [
    'contentOptions' => [
        'class' => 'action-column'
    ]
]);

Change web/css/site.css

/* from */
.grid-view th {
    white-space: nowrap;
}

/* to */
.action-column {
    white-space: nowrap;
}

It is also possible to rename action-column to nowrap and add this css-class everywhere if necessary.

It is also possible to use deprecated attribute for td tag (nowrap): link to specification

[SilverFire]

yiisoft/yii2-app-advanced@6251963

@cebe I think icon jump is better than icon that overlaps next column

[kidzen]

.grid-view td { white-space: nowrap; }
still happen in column.