Size Progress Bar

I want to to make the progress bar mach higher. Therefore i tried to add some costum CSS with height: or line-height: But the progressbar still stays at the same size, only the space to the next div changes. Anyone an idea how to make the progress bar larger?
6 answers

Hi Dominik,

To increase the height of the progress bar in Mendix, you can modify the CSS (Cascading Style Sheets) associated with the progress bar widget. Here's how you can do it:

  1. Open your Mendix project in Mendix Studio or Mendix Studio Pro.

  2. Navigate to the page where the progress bar is located.

  3. Locate the progress bar widget on the page and select it.

  4. In the properties pane or sidebar, look for the "Class" or "Style" property of the progress bar widget. The exact name may vary depending on the version of Mendix you are using.

  5. Add a custom class name to the "Class" or "Style" property. For example, you can use "custom-progress-bar" as the class name.

  6. Save your changes.

  7. Open the theme or styling editor in Mendix Studio Pro. You can find it in the toolbar or menu, typically labeled as "Theme" or "Styling".

  8. In the theme or styling editor, locate the custom class you assigned to the progress bar widget (e.g., ".custom-progress-bar").

  9. Add CSS code to modify the height of the progress bar. For example, you can use the following CSS code:

.custom-progress-bar { height: 10px; }


  1. Adjust the height value (e.g., 10px) to your desired height. You can experiment with different values to achieve the desired appearance.

  2. Save your changes in the theme or styling editor.

  3. Run or preview your Mendix application to see the increased height of the progress bar.

By following these steps, you should be able to customize the height of the progress bar in Mendix according to your requirements.


To piggyback off of what Zia said above, yes you need to create a custom-class (or just the progress-bar if you want to change the value throughout your app)



This is the initial height-value of the progress-bar, so it doesn't matter how much you change the height of your surrounding container, it will not adjust that value, so what you need to do it as follows to specify the selector you want to adjust


.your-custom-class {
    .widget-progress-bar {
        .progress {
             height: 40px;
             line-height: 40px;
             font-size: 16px;



Hey Zia

Thanks for your answer.
I already tried this

I cant find the class “custom-progress-bar in any styling folder in mendix studio pro.

When i change height in costom CSS field from progress bar, Only the height of the div changes


so i tried this directly in the properties window from the progress bar


Now i also tried to do my own css calss in the Costum Variable.scss


But there is no change of the size of the progress bar


Hey Andrew,
I also tried this, but it does not affect the height.


Ok i finally make it work.

For othes with the same problem:
Make a scss file in

Import the scss file. In my case the stylesheet.scss in the main.scss

@import "stylesheet";

This is the code in my scss file

@import './custom-variables';


.custom-progress-bar .progress,

.custom-progress-bar .progress-bar{

height: 100px;

line-height: 100px;

font-size: $font-size-default;


Last step give the progroess bar the css class