Filament•3mo ago

Themes and CSS and Hook Classes

Am I right in thinking using the fi hook classes and custom theme, I still wouldn't be able to influence classes like this one: I'm trying to move a hintaction to be right next to the label. If I change that element line to justify-start, it has the desired result. But I cannot get a custom theme to perform that. Some failed attempts look like this:

.fi-in-entry-wrp-hint {

    @apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

.fi-in-entry-wrp-label {

    @apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

fi-in-entry-wrp {

    @apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

fi-in-entry-wrp-hint-action {

@apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

.fi-in-entry-wrp-hint {

    @apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

.fi-in-entry-wrp-label {

    @apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

fi-in-entry-wrp {

    @apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

fi-in-entry-wrp-hint-action {

@apply !flex inline-flex !items-start gap-x-3 !justify-start;

}

Is it possible ?

Solution:

Does this infolist-action? support ->extraAtrributes? if yes, you can override maybe. Or you can target nested css like .fi-in-entry-wrp>div.grid>div { @apply !justify-start }

Jump to solution

6 Replies

awcodes•3mo ago

It’s css so as long as you get the specificity right it’ll work.

MatthewOP•3mo ago

Apologies, the OP seemed to be missing the actual image I was trying to include:

MatthewOP•3mo ago

I'm trying to get the hintAction icon to sit next to the label, rather than the end of the element, which I can do by adjusting the class circled above to justify-start:

MatthewOP•3mo ago

But given there is not fi hook in that div...how to acheive that ? bump

Solution

Vp•3mo ago

Does this infolist-action? support ->extraAtrributes? if yes, you can override maybe. Or you can target nested css like .fi-in-entry-wrp>div.grid>div { @apply !justify-start }

MatthewOP•3mo ago

I've tried ->extraAtrributes but it will apply it to everything...label field etc. I don't know of a way of targetting the particular element...maybe someonelse does? I'll try the targetted css. Thanks @Vp - .fi-in-entry-wrp>div.grid>div this worked as I wanted. Thank you very much.

Gaming

Programming

Themes and CSS and Hook Classes