Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input-group - (Material) helper text has different gap from the input filed compared to web-components and the UI kit #15143

Open
desig9stein opened this issue Dec 5, 2024 · 1 comment
Assignees
Labels
🐛 bug Any issue that describes a bug input-group 🆕 status: new

Comments

@desig9stein
Copy link
Contributor

Description

helper text has different gap from the input filed compared to web-components

  • igniteui-angular version:
  • browser: all

Steps to reproduce

  1. Compare the webC and angular inputs when both have helper text

Result

Helper text in angular is padding-top: 5px
Helper text in Web components is margin-top: 4px

Expected result

Both should be using 4px gap according to the UI KIT

Attachments

@SisIvanova
Copy link
Collaborator

@yradoeva @sdimchevski Besides the difference in the top padding, there is also a discrepancy regarding the left offset of the helper text. Which are the correct values?

Web Components

  • Small - padding-left: 12px / padding-top: 4px
  • Medium - padding-left: 14px / padding-top: 4px
  • Large - padding-left: 16px / padding-top: 4px

Angular

  • All sizes - padding-left: 16px / padding-top: 5px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Any issue that describes a bug input-group 🆕 status: new
Projects
None yet
Development

No branches or pull requests

3 participants