37
Views
16
Comments
Button text not center.
Question

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 

mvp_badge
MVP
Rank: #5

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.

mvp_badge
MVP
Rank: #5

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... 

mvp_badge
MVP
Rank: #5

Can you provide an OML that reproduces this behaviour?

mvp_badge
MVP
Rank: #5

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. :(

Rank: #547

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

mvp_badge
MVP
Rank: #5

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.

mvp_badge
MVP
Rank: #5

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.

mvp_badge
MVP
Rank: #19

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


mvp_badge
MVP
Rank: #5

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!