How to change color of selected row in data grid

0
Hello everyone, Iโ€™m a CSS n00b, but Iโ€™m not afraid to start using it. I want to change the color of selected rows in a data grid. (The dark gray is too weak for me, I need a stronger color) Is there any way to do this in Mendix Modeler 7.23.4?
asked
3 answers
6

There definitely is:

You can easily use CSS to achieve this, see https://www.w3schools.com/css/css_pseudo_classes.asp for info and how to format your css

There are several classes that you can specify specific styling for, like .active, .hover, active hover that the page covers.

In your app, just add a class to the element, add the same class to your css file with your desired specific styling and thats it!

If you want more structure in your custom styling set-up (and after youve mastered the basics, an easier way to create, find and maintain custom styling) you should use SASS to generate your custom CSS, see this page for more information. Ive linked the Koala page because I think thats one of the easiest compilers around, but feel free to explore other sass compilers: the mendix documentation also handle other options.

EDIT: Adding this should do the trick:

.yourclassname tr.selected td{
	background-color: blue;
}

 

answered
6

In addition maybe use sass with for example koala: https://docs.mendix.com/howto/front-end/setup-mendix-ui-framework-with-koala

Then you can take a look at the variables.scss file.  there you can find:

 $grid-bg-selected

This sets the the background color to the variable by default. You can change it here to the color you like and it will use it throughout the application.

answered
1

And to learn about what Mendix does out of the box, simply use the Dev Console of your browser. It shows you the styling of each elements and from which classes it derives it's specifications. This pinpoints you to the exact location of the thing you'd like to change. Just remember to only change variables in SCSS or add classes in custom.css, don't change lib.css to prevent future issues.

answered