Filament•9mo ago

How to remove these inline styles (copy location returns undefined)

Any help would be much appreciated I simply cannot understand where this inline (screenshot below) is coming from, but hey it is there and I have to deal with this overflow/mask

.choices__input {
    @apply placeholder:text-red-700;
    @apply placeholder:!overflow-visible;
    @apply placeholder:!w-full;
}

.choices__input {
    @apply placeholder:text-red-700;
    @apply placeholder:!overflow-visible;
    @apply placeholder:!w-full;
}

These apply in my custom theme, but even with !important inline overrides the whole thing. I don't want to publish the view to keep my Filament installation updatable. Applying these to .fi-input also did not work for me.

.fi-input {
    @apply placeholder:!w-full;
    @apply !w-full;
    @apply border-red-500;
    @apply hover:border-teal-700;
    @apply focus:border-teal-700;
}

.fi-input {
    @apply placeholder:!w-full;
    @apply !w-full;
    @apply border-red-500;
    @apply hover:border-teal-700;
    @apply focus:border-teal-700;
}

12 Replies

toeknee•9mo ago

Please provide the code you are using for the schema

Jo•9mo ago

I've run into this before but unfortunately I never found a solution. From my understanding, that style is generated by JS. Specifically, the https://github.com/Choices-js/Choices package which Filament uses. Honestly I think it's just a bug in the way that package calculates the width when Chinese, Japanese or other similar charactersets are displayed. As for how to override it.. I'm sorry, but last time I ran into this problem I couldn't find a way either. Hopefully someone else can help though.

AvriantOP•9mo ago

By schema you mean all styling-related files? Sorry I got a little confused here 🙂 I had the same hypothesis actually, but I'm not an experienced developer to be sure of these things so thanks for the input! If this hypothesis gets validated, I suppose I'll just submit an issue on Filament repo

Jo•9mo ago

The simplest way to reproduce is with the following schema:

Forms\Components\Select::make('test')
    ->multiple()
    ->placeholder('佔位符文字'),

Forms\Components\Select::make('test')
    ->multiple()
    ->placeholder('佔位符文字'),

In this example, the first 4 characters will display with a little bit of clipping on the 4th one. And the 5th is invisible.

AvriantOP•9mo ago

Oh, that schema Yes, it could be that ch scales to latin charset and since average glyphs are wider you get this weird clipping/overflow

Jo•9mo ago

Yes, I think that's probably it. I think really an issue needs to be created with the choices.js package maintainer.

AvriantOP•9mo ago

BTW this issue does not appear for basic textual input, as my placeholders look nice and easy regardless of length

Jo•9mo ago

But hopefully someone here can provide a filament-based workaround just to override it. But it's difficult to override things that are in the style attribute. I couldn't figure it out before when I tried.

AvriantOP•9mo ago

Can anyone on the Filament team confirm this? I'm trying to decide what my next step should be

awcodes•9mo ago

It’s coming from choice’s JavaScript. But you should be able to override it with the appropriate choice class names.

AvriantOP•9mo ago

Would it be too much to ask for an advice here? I mean both .choices__input and .fi-input allow me to access placeholder (as you can see, it is red-700 in this case), but any other style I try to assign gets overriden by that inline from Choices (which is weird, since important should override inline specificity afaik). @Jo Solved it!

.choices__input--cloned {
  @apply !min-w-[10ch];
}

.choices__input--cloned {
  @apply !min-w-[10ch];
}

Obv you can use any value you like

Jo•9mo ago

@Avriant Great! Thanks for sharing. I'll use that in my project now!

Gaming

Programming

How to remove these inline styles (copy location returns undefined)