1. Feedback
  2. Angular
  3. 67460

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

Floating Label Text Misaligned Due to Font-Size on .e-float-text-content Span inherits the global font-size

The issue arises because the customer uses a global stylesheet (base.scss) that sets font-size: 18px for all span elements. Syncfusion’s floating label structure includes an inner span with class .e-float-text-content inside a label with class .e-float-text. Currently, Syncfusion applies font-size: 12px only on .e-float-text. 

As a result, .e-float-text-content inherits the global font-size, causing truncation, overlap, or alignment issues in floating labels.


Simple Sample: https://stackblitz.com/edit/ehyghh3s-1195rmnu?file=index.js,index.html

Replication Procedure:
  1. Run the sample 
  2. See the issue , Floating label text inherits global font-size. 

Expected Output:
Floating label text should appear in consistent font-size (12px), without being overridden by global styles.

Current Output:
Floating label text inherits global font-size: 18px, causing layout issues like truncation or improper alignment.