F
Filament•2mo ago
amohoric

search field width

What is the best way to make the search field above the table full width? It is very narrow by default and it just looks odd on desktop? I do understand the mobile aspect, but for desktop it just looks unporportional.
No description
10 Replies
Mohamed Ayaou
Mohamed Ayaou•2mo ago
Just customize it with css inspect the element with dev tools to find its fi-xxxx class and target it using css in your custom theme file
amohoric
amohoricOP•2mo ago
This is not so easy to do since:
amohoric
amohoricOP•2mo ago
No description
amohoric
amohoricOP•2mo ago
the parent element defines the "container" width but still even if defined it still looks wierd
amohoric
amohoricOP•2mo ago
No description
Mohamed Ayaou
Mohamed Ayaou•2mo ago
you have just to keep working with css until you get your goal
Dennis Koch
Dennis Koch•2mo ago
The place left is reserved for bulk actions.
Mohamed Ayaou
Mohamed Ayaou•2mo ago
Then he will just need to display: none; the element of that place
amohoric
amohoricOP•2mo ago
None of the answers realy helps in my case. the parent of fi-ta-search-field would have to be modified - I can do that, but I do not like it. And also, why does it occupy so much space since there are no bulk actions?
toeknee
toeknee•2mo ago
This should do it. 
.fi-ta-header-ctn .fi-ta-search-field {
    flex-grow: 1; /* Allow it to expand to fill available space */
    width: 100%; /* Ensure it takes full width */
}

.fi-ta-header-ctn .fi-input-wrp {
    width: 100%; /* Ensure the input wrapper also takes full width */
}

.fi-ta-header-ctn .fi-input {
    width: 100%; /* Ensure the input field itself takes full width */
}

.fi-ta-header-ctn .ms-auto {
    flex-grow: 1;
}
.fi-ta-header-ctn .fi-ta-search-field {
    flex-grow: 1; /* Allow it to expand to fill available space */
    width: 100%; /* Ensure it takes full width */
}

.fi-ta-header-ctn .fi-input-wrp {
    width: 100%; /* Ensure the input wrapper also takes full width */
}

.fi-ta-header-ctn .fi-input {
    width: 100%; /* Ensure the input field itself takes full width */
}

.fi-ta-header-ctn .ms-auto {
    flex-grow: 1;
}

Did you find this page helpful?