Filament•2mo ago

How to add width to TextInputColumn in a table?

I have the following type of column: TextInputColumn::make('siren_number') How can I provide it more width so the content is visible?

22 Replies

Matthew•2mo ago

->limit(100) or whatever limit you want

gemini.devOP•2mo ago

Get this error when adding a limit(100) to TextInputColumn: Method Filament\Tables\Columns\TextInputColumn::limit does not exist.

Matthew•2mo ago

Ohhh, thats right.. 1m

gemini.devOP•2mo ago

Any ideas anybody?

idk•2mo ago

Did you try to use ->grow() to the TextInputColumn? Or maybe use ->extraAttributes to specify width https://filamentphp.com/docs/3.x/tables/columns/getting-started#controlling-the-width-of-columns https://filamentphp.com/docs/3.x/tables/columns/getting-started#custom-attributes

Getting started - Table Builder - Filament

gemini.devOP•2mo ago

Thank you @idk - This has worked for me: TextInputColumn::make('siren_number')->extraAttributes(['style' => 'width: 500px']),

idk•2mo ago

Nice!

TheDagofugo•2mo ago

I have a similar problem. I want my TextInputColumn to be smaller, the options above did not solve my problem. With about 5 numbers that are visible when I put it in the input would be fine.

gemini.devOP•4w ago

Hi @TheDagofugo, I see you're experiencing similar problem as I did. Have you tried setting the style? To something like: ->extraAttributes(['style' => 'width: 50px'])

JJSanders•3w ago

I am having the same issue. This didn't work for me. Did you find a solution?

                Tables\Columns\TextInputColumn::make('stock')
                    ->extraAttributes(['style' => 'width: 50px'])

                Tables\Columns\TextInputColumn::make('stock')
                    ->extraAttributes(['style' => 'width: 50px'])

gemini.devOP•3w ago

Hi, what version of filament are you using? Also, have you tried doing a hard refresh?

JJSanders•3w ago

The latest version of Filament and have tried to hard refresh but no luck.

gemini.devOP•3w ago

Could you try to set the value to something like 500px - I wonder if there is a min width set.

JJSanders•3w ago

500px does change its width. But if I try for example 50 or 20 nothing happens. When I look at the computed styles there is no min-width set.

gemini.devOP•3w ago

Which element are you inspecting? Because it's not the input you should be inspecting, it's the container that is wrapping the input or the container before it. Set the width to something like 27px and find the div that has a width set to that. Once you find the element, you should then see if it has a min-width.

JJSanders•3w ago

It looks like i am inspecting the wrong div. However how can I change the width of the parent div using extraAttributes

gemini.devOP•3w ago

That looks like Tailwind class. I think what you can do is something like:

->extraAttributes(['style' => 'width: 20px', 'class' => 'min-w-20'])

->extraAttributes(['style' => 'width: 20px', 'class' => 'min-w-20'])

However, I doubt that might work - as you may to remove the original class that is there. How you do that, I'm not sure I'm afraid. I'd suggest raising a new post, someone with better knowledge within this area may assist you.

JJSanders•3w ago

Well, this seems to work

JJSanders•3w ago

Much better

gemini.devOP•3w ago

Is that adding 'class' => 'min-w-20'?

JJSanders•2w ago

Yes it is I have to come back on this. It doesn't work. I have seen it working last sunday but now not anymore. I still have:

                Tables\Columns\TextInputColumn::make('stock')
                    ->extraAttributes(['style' => 'width: 20px', 'class' => 'min-w-20'])
                    ->label('Voorraad')
                    ->sortable(),

                Tables\Columns\TextInputColumn::make('stock')
                    ->extraAttributes(['style' => 'width: 20px', 'class' => 'min-w-20'])
                    ->label('Voorraad')
                    ->sortable(),

Gaming

Programming

How to add width to TextInputColumn in a table?

Did you find this page helpful?