Floating label in edit modal has to few space to show full text

[Chris]

Hey Guys,

I'm facing the problem, that I have a Textbox with a Floating Label in an Edit Modal, where the text is too long to show on one line.

Is there a possibility to do a line break or something else to make the whole text visible?

Best Regards

[Berly Christopher]

Hi Chris, 

  

Greetings from Syncfusion support. 

  

We can achieve the requested requirement by overriding the below CSS styles in the application. Also, we need to adjust the top property based on the text length provided in the placeholder property. 

  

<ejs-textbox id="firstname" cssClass="custom" placeholder="Can you please enter your first name" width="150px" floatLabelType="Always"></ejs-textbox> 

<style> 

    .custom.e-float-input.e-control-wrapper label.e-float-text { 

       

        text-overflow: initial; 

        white-space: inherit; 

    } 

    .custom.e-float-input input:valid ~ label.e-float-text, .custom.e-float-input input ~ label.e-label-top.e-float-text { 

        top: -20px; 

    } 

</style> 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Textbox_placeholder670510135  

  

Regards, 

Berly B.C 

[Chris]

Hey Berly,

Thank you very much. This fixed my Problem.

Regards

[Berly Christopher]

Hi Christoph Zürcher, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C