Hello! I've found a way to edit my login screen UI, here's an update:
Before:
After:
But I'm having issue with the 'Interaction/Animation Label' movement placement:
Whenever a user clicks to fill in their username/password, the labels does move but they overlapped with the border, like this:
How do I make it so that it won't overlapped like that? I tried editing in their respective properties but didn't seem to work:
Hi @Aniq Idris Ahmad, can you add below mentioned CSS and see if it works.
.animated-label.active .animated-label-text { background-color: white; padding: 0px 2px;}
Based on your OutSystems version the class name may be different.
Basically what this CSS will do is, if the label is above the input, i.e., when user focus is on input or there is some value present in the input, it will add background color and some padding from left and right.
ThanksGitansh Anand
Hi,
.animated-label-input .form-control[data-input] {
padding: var(--space-s) var(--space-s) var(--space-none) var(--space-s);
padding-top: var(--space-base);
border: 2px solid #763F98;
}
.animated-label.active .animated-label-text {
top: 5px; //controls the top position of the label when filled or focused
.animated-label-text {
left: 10px; //controls the left position of the label when filled or focused
.animated-label-input .form-control[data-input]:focus {
Please I would suggest add this class on your Theme. And remove the inline styles.
I've updated the oml, please let me know if this helped you
hey it works well, thank you :D