Hello There,
I did a lot of research before posting and couldn't find a solution or the problem cause.
Outsystems shows an accurate indicator tab in ServiceStudio. I say accurate because the indicator's blue color starts and ends within the size of the tab item's content.
but when I publish, the browser shows an inaccurate indicator.
Can anyone help me resolve this?
Just did the test, Chrome has the same problem as I explained before with the monitor zooming settings as it has with the browser zooming settings.
In order of effort / difficulty to you :
Dorine
Try to center the text.
Did you change something on the CSS?
Hello Bruno, thanks for your participation.
In fact, my content was already centralized (I believe this is the nature of the component)
And no matter how much space I put on the left side in an attempt to "force center", the blue line always goes out of item size.
Answering your question:
I discovered this problem in my original reactive web app and actually have some CSS changes.
However, I created a separate .oml file to test without CSS modifications (attached in the first post) and the problem persists.
first off : what exactly do you mean when you say "I created" ? it's not good form to call other peoples work your own, even if it's just a little demo oml.
anyway, this is a problem caused by the fact that they use css transform scale to display this indicator, and there is an inaccuracy in how some browsers, like chrome, calculate this.
firefox doesn't seem to have problems, chrome is calculating it wrong when you zoom in or out.
As for solving this,
try contacting OS about it (maybe @Bernardo Cardoso ) They could possibly improve on this by making the starting width 10px instead of 1px, and making --tabs-indicator-scale 10 times smaller.
Things are made by so many hands nowadays that from the point of view presented, no one is the creator of anything.
So I just modified the .oml file (if it makes you feel better)
And I didn't make that answer because Google translated it for me.
Thank you so much @Dorine Boudry,
You are really smart. I would never have understood this on my own.
I will test the solution first and return to the forum to mark if it solves for me.
Follows more information after a few days testing.
Yesterday I worked in the office and noticed that the problem didn't happen. I thought the problem had resolved itself.
But working from home today I found that the problem seems to be the monitor.
Opening the web app with the notebook's monitor:
Opening the web app with the another monitor:
Now that we have more information, can anyone tell me if there is a solution for this?
let me guess : different browser or different zooming ?
Same browser and zooming.
The prints sent in the previous post were taken as follows:
I opened the page through Google Chrome using the notebook monitor. The problem appeared (print 1).
I clicked on the browser's top bar and dragged it to the secondary monitor. The problem disappeared (print 2).
Maybe it has to do with the size of the monitors. I can't be precise.
Ok, there is also the display settings of the monitor, are they both at 100% ?
Ta-dãaaaaaaaaaaaaaaa!
Dorine, you are FAN-TAS-TIC!
I didn't know it was possible to configure the monitor's zoom.
I thought that this configuration was exclusive to the browser.
Your last comment was illuminating on this and steered me towards the solution.
The monitor configuration of all the company's notebooks is, by default, at 150% zoom for texts by definition of the occupational health and safety area.
The problem has only been solved for me for now, but now I know which buttons to push to solve it for the company.
Thank you so much.
Please, i need help.
I remember having the same issue but don`t recall how I solved it exactly. I recommend checking display settings for the parent containers. Especially for something that has display: flex. Also - I recommend looking at <script> tags that Outsystems adds to the DOM. Sometimes they cause some style issues. Try inspecting the page and if you see a strange <script> tag near your tab - try deleting it. If it fixes the issue then set "script {display: none}" in CSS for your Block.