F
Filament3mo ago
nowak

How to increase SelectColumn width?

I have this SelectColumn in my Resource:
SelectColumn::make('courier_id')
->label('Courier')
->options(User::couriers()->pluck('name', 'id')),
SelectColumn::make('courier_id')
->label('Courier')
->options(User::couriers()->pluck('name', 'id')),
But the size of the select column is incredibly small. How can I make the SelectColumn wider so that it shows the text of the selected option?
Solution:
```php SelectColumn::make('courier_id') ->extraAttributes(['style' => 'min-width:200px']) ->label('Courier') ->options(User::couriers()->pluck('name', 'id')),...
Jump to solution
7 Replies
Solution
toeknee
toeknee3mo ago
SelectColumn::make('courier_id')
->extraAttributes(['style' => 'min-width:200px'])
->label('Courier')
->options(User::couriers()->pluck('name', 'id')),
SelectColumn::make('courier_id')
->extraAttributes(['style' => 'min-width:200px'])
->label('Courier')
->options(User::couriers()->pluck('name', 'id')),
nowak
nowak3mo ago
Thank you @toeknee! Do you know why the ->width() method has no effect here?
toeknee
toeknee3mo ago
It does, but one overtakes it.
nowak
nowak3mo ago
I don't follow, so this should work?
SelectColumn::make('courier_id')
->label('Courier')
->width('200px')
->options(User::couriers()->pluck('name', 'id')),
SelectColumn::make('courier_id')
->label('Courier')
->width('200px')
->options(User::couriers()->pluck('name', 'id')),
It does not work for me, what would overtake it? I see now, but then why have a ->width() method at all?
LeandroFerreira
LeandroFerreira3mo ago
->extraInputAttributes(['style' => 'min-width:200px'])
toeknee
toeknee3mo ago
it will work if theres no other columns yes, but yours are re-sizing to fit it all in. So by using min-width as I showed, means it has a minimum width and will not got below that width. For example, if you had two columns but want column 1 to be a 200px it would be, but if column2 had so much text, it would resize column 1. It's just standard css widthing.
nowak
nowak3mo ago
Thank you for explaining @toeknee , and thank you for marking the solution!