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

fix(ui5-input): make icons responsive when height is changed #5908

Merged
merged 8 commits into from
Nov 23, 2022

Conversation

MapTo0
Copy link
Member

@MapTo0 MapTo0 commented Oct 7, 2022

FIXES: #5314

@MapTo0 MapTo0 requested a review from niyap October 7, 2022 13:57
Copy link
Contributor

@niyap niyap left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Horizon theme, both in compact and cosy, the icon now is higher than expected and overlap the background image applied to the bottom

Copy link
Contributor

@niyap niyap left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the value states (Warning, Error and Information)? There, the bottom background image has 2px width and the problem still occurs.


:host([value-state]:not([value-state="None"])) .ui5-input-clear-icon-wrapper {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue still exist. Now, it is even worse as the icon overlaps 2px of the input field, where with the previous patch set it overlapped 1px.
Following, the way of your implementation, I think the height of the icon has to be calc(100% - 2px) when the value state is Error, Warning or Information.

@MapTo0
Copy link
Member Author

MapTo0 commented Nov 1, 2022

@MapTo0 MapTo0 closed this Nov 1, 2022
@MapTo0 MapTo0 reopened this Nov 1, 2022
niyap
niyap previously approved these changes Nov 3, 2022
@MapTo0 MapTo0 merged commit 3d3f047 into main Nov 23, 2022
@MapTo0 MapTo0 deleted the input-custom-icon-size branch November 23, 2022 08:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[ui5-input] 'clear text' icon is misaligned vertically when the height of the ui5-input is changed to 24px
2 participants