Fix Icon Alignment on Extend Login Screen

Hi,

I used Cuba Studio 15 2020.2 on my Mac OS to generate an extended Login page using the screen wizard.

The result I get a new login page but the alignment of the icons are incorrect.

]

How do I fix the alignment for the login page?

Thank you in advance.

John

Hi!
Could you please provide more information about your problem? Which version of the platform do you use?

Hi,

The problem is the extended login screen gengerated by the Cuba Studio generates the alignment of the icons not in the same position of the text. Where do I change the styling so that I can make the icons align properly.

I’m currently using:

  • Cuba Studio 2020.2
  • Cuba Platform 7.2.14

Thank you.

Regards,
John

Hi!

Thank you for reporting the problem. We have created a Github issue.

There is a workaround: find in your project file web/VAADIN/brand-login-screen/login.css and replace the line

.v-slot-inline-icon .v-caption-c-login-field.v-caption-inline-icon span.v-icon

with

.v-slot-inline-icon .v-caption-on-top > .v-caption-c-login-field.v-caption-inline-icon> span.v-icon

After that restart you project and clean the browser cache.

Regards,
Nadezhda.