Unable to set the width of the color picker in form

This:

->type('color')
->extraInputAttributes(['width' => 100])

->type('color')
->extraInputAttributes(['width' => 100])

Doesn't seem to be working. Any idea how to make the color picker shorter without making the outer Section smaller? Right now it is filling the whole available space which looks ridiculous for a color picker which usually looks like a small circle or a squar and not a dachshund like selectbox.

Solution:

that's insane 😉 it worked

Jump to solution

11 Replies

WirkhofOP•10mo ago

Anybody?

awcodes•10mo ago

For starters, width: 100 isn’t valid css. Should be ‘100px’ etc. But it might need to be max-width also. Would need to inspect the html.

WirkhofOP•10mo ago

It's straight from the docs

WirkhofOP•10mo ago

WirkhofOP•10mo ago

Anyway, I have tried

Forms\Components\TextInput::make('color')
    ->type('color')
    ->extraInputAttributes(['max-width' => '100px'])

Forms\Components\TextInput::make('color')
    ->type('color')
    ->extraInputAttributes(['max-width' => '100px'])

and also this variant:

Forms\Components\TextInput::make('color')
    ->type('color')
    ->extraInputAttributes(['width' => '100px'])

Forms\Components\TextInput::make('color')
    ->type('color')
    ->extraInputAttributes(['width' => '100px'])

No change at all. It's still 1000px wide.

Dennis Koch•10mo ago

It's valid HTML though 😉 Have you tried debugging the html to see why it's not working?

WirkhofOP•10mo ago

To make it proper 100px one have to alter 'fi-input-wrp' element. Which is two levels up in th tree of the input element you can add thos input attribute or id.. So I am stuck. try it yourself and look at the dev tools view of the dom.

Dennis Koch•10mo ago

So maybe try extraAttributes() instead? Maybe that targets the wrap element?

WirkhofOP•10mo ago

will try, thanks yeah, it targets the wrapper and adds width="100px" or max-width="100px" respectively. However, it doesn't seem to have an effect. The CSS classes overrule it. So I need to add an id or class or style attribute itself with css to override that either normally or via !important I am trying ->id('hello') bbut that will add it to the input element and not the wrapper above. Does Filament has anything to add id, or class, or style attribute to the wrapper of an element?

Dennis Koch•10mo ago

extraAttributes(['id' => ''])? 😅

Solution

Wirkhof•10mo ago

that's insane 😉 it worked

Gaming

Programming

Unable to set the width of the color picker in form