This is my block, and i will use this block in screen and input the value like the image, but there is a strange UI with the first three "*". Can any one help me please ?
Hi @Le Quang Trieu
Could you please share the .oml file you mentioned? It would be helpful for reviewing and understanding the implementation.
Thanks
Sorry but it is private source, i have a block that has NumberAccount, and i use this block in a screen and pass into NumberAccount such as "********4326", and it goes like this. This UI is so weird.
Hi @Le Quang Trieu ,
I tried to reproduce the issue on my end, but everything seems to work fine. Could you share a sample OML? Also, are you applying any custom CSS that might be affecting the behavior?
Hi @Le Quang Trieu,
Everything seems fine on my end. Could you please try reproducing the issue in your personal environment and share the OML file?
Option 1: Wrap the Expression in a Container
In your Block:
Put the Expression that shows ****4320 inside a Container.
Use the following CSS class for the Container (through the Styles tab):
.masked-value {
display: inline-block;
overflow: visible;
text-overflow: clip;
vertical-align: middle;
}
In addition, set the container with your class masked-value.
Option 2: Use a monospaced font
If your masking (*) and digits are not lining up properly, you can set a monospaced font:
font-family: monospace;
letter-spacing: 1px;
In this way, the width of * and digits is the same.
Option 3: Don't put it directly in an Input or Form Control
If your Expression is in an input-like structure (for instance, inside a ), then take it out of that container.
OutSystems automatically sets .form-control with padding and overflow rules which may be the reason why your characters are being cut off.
Option 4: Modify padding or width
If it is only cut from the visual side on one side:
padding-left: 4px;
Hi @Le Quang Trieu can you try this