Hi Erik,
Same as the previous answer, you’ll need to make your styling more specific in order to apply it to the element that you want. In this case, there’s an .mx-grid-search label wrapped inside of the .mx-grid-search-item, so you’ll need to apply styling to that. The browser inspector can help you identify which styling is being applied from where. So your complete styling rules, including the previous answer would be:
.mx-grid {
.mx-grid-search-item .mx-grid-search-label label {
font-weight: normal;
}
> .mx-grid-content {
> table {
> thead {
> tr {
th {
color:rgba(5, 17, 184, 0.774);
font-style: italic;
font-weight: normal;
}
}
}
}
}
}
Hi Marius,
Thank you for the answer. Regretfully, the search items remain in bold with your line of code. What is going wrong? Another question of mine was if it is possible to control the number of columns shown per row. Do you have a solution for this as well?
Thanks,
Erik
No, I want to be able to define the number of search fields of a datagrid. I Mendix 9 I have 6 search fields per row, whereas in Mendix 7 I had 4 and therefore the labels are presented in a better way (aligned with the search colum). The messy look also is caused by the font weight of the labels of the seach fields which is by default bold. I want them normal but don't know how to acieve this. Hope you van help me out.
I did something similar for better search field scaling recently, maybe this’ll be of use.
Feel free to experiment with for instance the $search-item-width variable or the grid-template-columns setting. I found the example below to work best for my use case.
$search-item-width: 200px;
.mx-grid {
.mx-grid-search-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax($search-item-width, 1fr));
}
.mx-grid-search-item {
display: flex;
flex-direction: column;
max-width: $search-item-width;
.mx-grid-search-label {
text-align: left;
width: $search-item-width;
label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
}
.mx-grid-search-input {
width: 100%;
}
}
}
Thanks Marius, thats look a lot better! Now the labels are above the search fields instead in front of it, so it shows up perfectly. The only issue that remains is the font weight of the labels for the search fieds, that are still shown in bold instead of normal after inserting your line of code in the custom-variables.css. Do you have another suggestion on this one?
Yes I did, but it didn't make any change.
I think we have a misunderstanding. It worked, of course for the header of the datagrid.
But I want the labels of the search fields in a normal style, not bold.
I already found the solution. Adding font-weight: normal within the brackets of "label". Thanks for your support!