As you can see, the text of my buttons are not center.

for some reason, even if i change the padding, the text just stays the same. I have tried 

Hello Divan.

Not enough information.

I tested changing the height of the button with or without a layout and the text always appear correctly centered. So, I am assuming you have extra CSS being applied here...

Can you show us the button in the HTML code (Inspection in the browser), as well as the styles been applied to it?

Cheers.

Eduardo Jauch wrote:

Hello Divan.

Not enough information.

I tested changing the height of the button with or without a layout and the text always appear correctly centered. So, I am assuming you have extra CSS being applied here...

Can you show us the button in the HTML code (Inspection in the browser), as well as the styles been applied to it?

Cheers.


Hi Divan,

Can I ask which version of the platform are you using? And which version of the OutSystems UI?

Also, what type of application are you doing? REACTIVE? Mobile deployed as PWA? Are you using which layout? Besides the CSS you are applying to the button direct (to change its appearance), what other CSS are you applying to parent elements that may be affecting them? Or to the layout itself... 

Eduardo Jauch wrote:

Hi Divan,

Can I ask which version of the platform are you using? And which version of the OutSystems UI?

Also, what type of application are you doing? REACTIVE? Mobile deployed as PWA? Are you using which layout? Besides the CSS you are applying to the button direct (to change its appearance), what other CSS are you applying to parent elements that may be affecting them? Or to the layout itself... 


Version 11.7.12

UI : 2.4.2

Can you provide an OML that reproduces this behaviour?

Eduardo Jauch wrote:

Can you provide an OML that reproduces this behaviour?


Doesn't seem like I can, tried to recreate the problem on personal environment but cannot seem to

It can be a problem with the framework you are using, or simply a set of CSS that is being applied (most probably). 

But I can't reproduce the error, so I can't help. Sorry. :(

Good Morning Divan,

Have you tried copying and deleting the screen you are having this issue on, then publishing, then pasting and publishing again?
I've had a bug before (on a more complex scenario with web blocks), where the style wasn't applying and doing this fixed it

José Torrão wrote:

Good Morning Divan,

Have you tried copying and deleting the screen you are having this issue on, then publishing, then pasting and publishing again?
I've had a bug before (on a more complex scenario with web blocks), where the style wasn't applying and doing this fixed it


The problem is it is on all my button on all my blocks and screen.
I tried writing a new button class that changes the padding, but didn't seem to work. 

Eduardo Jauch wrote:

It can be a problem with the framework you are using, or simply a set of CSS that is being applied (most probably). 

But I can't reproduce the error, so I can't help. Sorry. :(

I am using the OSUIMobileBase theme for the button, so not even applying my own CSS or anything.

But thanks for trying to help


Hi,

Did you tried to create a new application in the same environment, and add a button in the same position.
To see if the button text keeps centered?
If so, you can than compare the CSS applied to find the "culprit".

If not, than it is a problem with your framework. Maybe upgrading to the latest version (if not yet there) can solve the problem.

Eduardo Jauch wrote:

Hi,

Did you tried to create a new application in the same environment, and add a button in the same position.
To see if the button text keeps centered?
If so, you can than compare the CSS applied to find the "culprit".

If not, than it is a problem with your framework. Maybe upgrading to the latest version (if not yet there) can solve the problem.


I have but when I tried to add the OSUIMobilePhone theme, the screen went funky and did not want to open on browser.

What I did now was I just copied the ccs from the "btn" theme, pasted it in my style sheet and changed the padding to 18px 10px. that seems to work

Ok. I would test this solution in other form factors, to see if it really works :)
I think it is possible to change the type of devices in the Preview Mode, in Browser.

Hi,

We noticed the same problem with the version 2.3.0 of OutSystems UI

This is how we fixed it:

button.OSFillParent {
  display: inline-flex;
  align-items: center;
}

Regards,

Daniel


Thanks for the workaround, Daniel :) 

This is probably already solved in newer versions, as I have my OutSystems UI up to date and do not have this problem.

Cheers!

Eduardo Jauch wrote:

Thanks for the workaround, Daniel :) 

This is probably already solved in newer versions, as I have my OutSystems UI up to date and do not have this problem.

Cheers!

Yes, I know, but sometimes, the customer environments can not yet be updated to the latest version of OutSystems UI (like at some of our customers), and then the workaround is useful.