1. Home
  2. Forum
  3. Vue
  4. Floating label of textbox don't work

Floating label of textbox don't work

Hi

Help me please. I can't make to work the floating label of textbox, see my code please:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test ej2 vue textbox</title>
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
</head>

<body>
<div id="app">
<ejs-textbox floatLabelType="Auto" placeholder="Name"></ejs-textbox>
</div>
<script>
Vue.use(ejs.inputs.TextBoxPlugin);
new Vue({
el: "#app"
});
</script>

</body>

</html>

7 Replies
PM Ponmani Murugaiyan Syncfusion Team February 21, 2022 06:14 AM UTC

Hi Kabanets, 

We have prepared sample for TextBox component in Vue platform and the floating label is working as expected. Please find the sample and output below for reference.  

<template> 
  <div id="app"> 
    <ejs-textbox floatLabelType="Auto" placeholder="Name"></ejs-textbox> 
  </div> 
</template> 

 

Kindly check with the above sample, if issue still exists in your end, please share the issue reproducing sample to investigate further in our end. 

Regards, 
Ponmani M 


KA Kabanets February 21, 2022 02:04 PM UTC

Thank you for the sample, but...

I use a server side rendering by Asp.Net MVC classic. I need use a full framework js-library without npm. Please make a sample with ej2-vue-es5 and ES5. I have the problem with this set.

https://codesandbox.io/s/peaceful-monad-y3flke?file=/index.html

Best regards

Andrey Kabanets


PM Ponmani Murugaiyan Syncfusion Team February 22, 2022 06:29 AM UTC

Hi Kabanets, 

We checked your reported query. We would like to know you that, while using Syncfusion Vue components in DOM templates, camelCased property (isPrimary) names need to specify in the kebab-cased (is-primary) equivalents. We modified the provided sample, please find the changes below. 

We have mentioned the above details in the documentation, please find the link below:  


<ejs-textbox float-label-type="Auto" placeholder="Name"></ejs-textbox> 

 


Regards, 
Ponmani M 


KA Kabanets February 22, 2022 01:27 PM UTC

Thank you. The problem resolved.


PM Ponmani Murugaiyan Syncfusion Team February 23, 2022 04:15 AM UTC

Hi Kabanets, 
 
Welcome, we are glad to hear that the issue has been resolved. 
 
Regards, 
Ponmani M 


KA Kabanets February 23, 2022 04:45 PM UTC

I have another problem right now. Labels don't float when a browser inserts a default login and password on load a page.

Screenshot 2022-02-23 at 13.31.26.png

After clicking a mouse on the page, the labels pop up as they should

Screenshot 2022-02-23 at 13.32.05.png



PM Ponmani Murugaiyan Syncfusion Team February 24, 2022 04:57 AM UTC

Hi Kabanets, 

We suggest you to set cssClass property value as ‘e-autofill’ to get rid of this issue. 


Regards, 
Ponmani M 


Loader.
Up arrow icon