F
Filament•5mo ago
Matthew

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
awcodes•5mo ago
It’s css so as long as you get the specificity right it’ll work.
Matthew
MatthewOP•5mo ago
Apologies, the OP seemed to be missing the actual image I was trying to include:
No description
Matthew
MatthewOP•5mo 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:
No description
Matthew
MatthewOP•5mo ago
But given there is not fi hook in that div...how to acheive that ? bump
Solution
Vp
Vp•5mo 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 }
Matthew
MatthewOP•5mo 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.

Did you find this page helpful?