Styling and CSS

Finding The Styling Files

Your Mendix project has native CSS files that you can access. There are two easy ways to use this:

The first way is through the Mendix modeler. In the navigation of your app, go to the app module. Inside this module is there is a styling folder. That contains the folders for your 'native' and 'web' profiles. For most cases, you will use the 'web' folder.

When you open this folder, you will see all of the CSS files for your project. You cannot add or remove files from the modeler but can open and edit any from here.

The second way is through a normal IDE (such as VScode). To find the project, open your file explorer. All Mendix projects are stored in your 'Documents' folder on Windows by default, so open that. Inside that, you should have a 'Mendix' folder; navigate into that folder, which will contain a list of all of your Mendix projects (It is important to note that if you are on a branch, a new project will be made in this folder, and you will need to do styles in that folder and not the folder for the main line). The inside of a project folder should look like this:

From here, open theme > styles, and you will end up in the same folder as we saw in the modeler. Open the web folder in an IDE of your choice.

Applying your classes

To apply a class to an element, add the class name in the appearance tab of your element in the Mendix Modeler. When using the name, do not add the '.' at the start of your class, and you can add multiple classes by separating them with a space.

As a note, you can always write CSS directly on the html element using the styles section. None of the more advanced CSS below will work in that section, but it is great for one-off padding and background color manipulation. If you use the same styling multiple times across the app, consider exporting it to a class for maintainability.

Manipulating a Native Mendix Element

Because Mendix extrapolates part of the HTML structure from you, you cannot apply classes to any element you chose. Because of this, we need to use CSS selection to find the elements we want. For example, I want to find the text box in the input widget. If I were to add a class to the widget and give it the property "background-color: red" it would look like this:

However, we would like to have it look like this:

To do this, we need to specify the html element we want in the Mendix component. The easiest way is to run your site and inspect the element you are styling. To find your element, the html element will have a name property with "mx-name-YOURELEMENTNAME" (for example, mx-name-textBox1"). Once you find that, you can see what the Mendix html structure is and find the element you need. For a text box, the HTML structure is as follows:

<div>
    ::before
    <label></label>
    <div>
        <input>
    </div>
    ::after
</div>

In this case, we need to style the <input>, the text box where we input data. To do this, write the following CSS:

.test > div > input {
    background-color: red;
}

This class is telling your CSS that the class will be in an element that has a div inside of it that has an input inside of it. Each of those should have a red background.

Once you have run it, put another text input inside your div, and put both inputs inside a container. Remove the test class from the input element and add it to your container. Change the class to be as follows:

.test > div > div > input {
    background-color: red;
}

If you have done this correctly, each input element should have a red background. From here, play around with selector tags. You can do div:nth-child, div:first, div:last, and other tags to control which elements will have styles applied to them. These will be most impactful on list views with many elements.

Lastly, if you want to apply classes on the way down but still continue down, you can do so. Try the following CSS for your test class:

.test {
    background-color: green;
    & >  div > label {
         background-color: grey;
    }
    & > div > div > input {
        background-color: red;
    }
}

For CSS, the "&" operator acts as the "this" object in JavaScript, meaning you can make a class that applies different styles depending on what part of the widget you want to access. As a note, an & operator can take a tag (for example &:first), so you can create a custom class for certain items as follows.

.test {
    background-color: green;
    &:first > div {
        & > label {
        background-color: pink;
        }
        & > div > input {
        background-color: blue;
        }
    }
    &:first > div {
        & > label {
        background-color: grey;
        }
        & > div > input {
        background-color: red;
        }
    }
}

This class should have the first input in your container have different styles than any other input in the container.