Border radius to all buttons

1
Hi, I want to give border-radius to all buttons. I have added border-radius in .btn class in _buttons.scss file as shown in below code but still the css is not getting apply to the  buttons. Can anyone please tell me, How to do this? .btn {     color: $white;     letter-spacing: 0.5px;     padding: 8px 14px; //0.6em 1.0em;     min-width: 100px;     border-radius: 20px 20px;     + .btn, + script + .btn {         margin-left: 8px;     }
asked
6 answers
2

Although the mentioned solutions probably all do get the result, they are not the correct Mendix way. Atlas has variables that you can use for this, and you should. This keeps the Mendix tool working like intended.

What Mendix wants you to do for this requirement is:

  • open “theme\web\_custom-variables.scss”,
  • find $btn-border-radius; in 9.6.8: line 223 (by default it is $border-radius-default)
  • change its value to 20px:
$btn-border-radius: 20px;

If that still does not work, inspect your app in the browser, see what selector is more specific and where it is defined in the styling.

answered
1

what version are you on?

if you are on 8 you can use callipso to compile your sass.

if your on 9 it should compile automatically.

it should be as simple as

button.btn{
  border-radius: 20px
}

 

answered
0

It works for me. You can try the following:

  1. use border-radius: 20px !important to overwrtite any existing border property
  2. stop the application and run locally again.
answered
0

Hi,

If it is not working that way, you can try in another way, like Double-click on the button in style apply your border-radius CSS.

That will work properly. 

 Screenshot:

 

answered
0

Hello Sayali,

All the mendix buttons have the class .mx-button, so you can use this class for it.

in your case it will be:

.btn, .mx-button {
    color: $white;
    letter-spacing: 0.5px;
    padding: 8px 14px; //0.6em 1.0em;
    min-width: 100px;
    border-radius: 20px 20px;
}

 

answered
0

I think it is the version issue then, a lot of people are facing similar issue where the CSS isn;t compiling. They have fixed this in version 9.10. Try upgrading it to a newer modeler version.

 

answered