How to use Implement Styles correctly?

0
  Hi All, I was trying to change alert style following “#8 Alerts” in this documentation: https://docs.mendix.com/howto7/front-end/styles#1-introduction . When I put “alert-success” in class of text widget which has a validation in data view, I was expecting  the validation message color changes to green(success). However, the background of the text widget was changed to green and the validation message is still red(default). How can I put the setting correctly? I only want to change the message area. If anybody knows this answer please let me know. Thank you.
asked
2 answers
1

Hello Haruna,

With a bit of SASS and your own custom classes you should be able to achieve any styling you want.

You can find a guide on how to use SASS with Mendix here: http://www.mxblog.nl/2016/03/using-sass-with-mendix/ 

You can also use W3Schools for guidance regarding CSS/SASS properties 

Hope this helps

answered
0

Hi Haruna,

This can be accomplished with some custom styling but it would require a bit more than just adding the alert-success class to the input field. Since the validation feedback activity adds the class “.has-error” and “.alert-danger”, to accomplish what you want you would have to change the styling for “.alert-danger” for your entire app.

Another option is to create a custom class that will overwrite the “.alert-danger” class styling with the “.alert-success” styling.

If you put your text box inside a container and give the container the class “.custom-alert”, you can use this styling in your style sheets.

.custom-alert {

    .form-group.has-error {


        .form-control {

            border-color: $alert-success-border-color;

          
        } 

        .alert-danger { 
            color: $alert-success-color;
            border-color: $alert-success-border-color;
            background-color: $alert-success-bg;


        }
    }

}

 

Then your page will look like this when you show a validation message.

 

 

Hope this helps!

answered