Styling search fields of data grid

0
I have migrated an application to a newer version (9.10) of Mendix. There is a standard module Styling available. In custom-variables.css I wasn't able to change the styling of the search fields I added the subsequent part of script into the custom-variables.css of the my app: .mx-grid-search-item {color: blue;}; I did this to change the color to see if I could change someting in the search fields. That works fine. What I then did, was the followoing:  .mx-grid-search-item {font-weight: normal;}; The letters are still bold.  My users don't want the search fields in bold, also it takes more space and looks very messy. Who has a suggestion of how to get the column headers in an normal style? And last but not least, is there a way to get a grip on the number of search fields being shown per row? I my app there are 6 columns pe row, whereas in the former application the number was only 4. Which looked a lot better.
asked
7 answers
0

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;
                    }
                }
            }
        }
    }
}

 

answered
0

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

answered
0

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.

answered
0

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%;
        }
    }
}

 

answered
0

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?

answered
0

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. 

answered
0

I already found the solution. Adding font-weight: normal within the brackets of "label". Thanks for your support!

answered