1. Feedback
  2. Angular
  3. 46076

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

The e-outline breaks when prepending icon to the textbox component

Description :

If the icon is prepended to the TextBox component and the CSS class is set to e-outline, if the component focused the top border of the component breaks and then hover outside, top border is override on the label top text.

Angular Sample: https://stackblitz.com/edit/angular-wesnum-incohd?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Findex.html,src%2Fapp.component.css

Same issue reproduces in JS platform too.

JS Sample: https://stackblitz.com/edit/xbr4qb-zjqoky?file=index.ts,index.html,package.json

Focusing

Hovering out

Validation Details:

We have fixed the sample issue in the blazor platform, please find the below task

Blazor Task: https://dev.azure.com/EssentialStudio/Ej2-Web/_workitems/edit/830181

Customer asked for prepending icon should be add inside inputwrap and we have achieved this in sample end. So kindly ensure this case in below sample too.

Customer’s sample: https://stackblitz.com/edit/angular-wesnum-cv91tu?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Findex.html,src%2Fapp.component.css

Replication procedure:

  1. Run the sample.
  2. Case1: Focus the component.
  3. Case 2: Hover out the component

Current behavior:

Top border is not styled properly.


Expected Behavior:

Top border should appear properly.