How can I add text inside ejs-textbox?

[Roberto]

Hi,

I would like to add a text (units ex.: kg, mm, psi, ºC) on the right side inside the ejs-textbox field, using cssClass = "e-outline". How do I do this?

   

       

           

                         value="@Model.Temperatura"

                         type="number"

                         step="1"

                         floatLabelType="Auto"

                         placeholder="Temperatura"

                         id="Temperatura">

           

       

       

           

       

   

Attachment: text_inside_textbox_6d6ba649.rar

[Sevvandhi Nagulan]

Hi Roberto, 

Greetings from Syncfusion support. 

We checked your query. The reported requirement can be achieved using the addIcon support in the textbox component.  Using the addIcon method, create the span element and provide the innerText of the element as ºC. These functionalities have been added in the created event. Also add the below CSS code in your application to align the span element’s innerText. Kindly refer the following code. 

<ejs-textbox cssClass="e-outline" 

                     value="10" 

                     type="number" 

                     step="1" 

                     floatLabelType="Auto" 

                     placeholder="Temperatura" 

                     id="Temperatura" created="onCreated"> 

        </ejs-textbox> 

 

   function onCreated() { 

        this.addIcon("append", "icon"); 

        document.querySelector(".icon").innerText = "ºC"; 

    } 

 

CSS code: 

   .e-outline.e-input-group .e-input-group-icon, .e-outline.e-input-group.e-control-wrapper .e-input-group-icon { 

        margin: 12px 12px 9px -8px; 

    } 

    .e-input-group .icon.e-input-group-icon, .e-input-group .icon.e-input-group-icon:hover { 

        color: rgba(0, 0, 0, 0.87); 

    } 

 

Screenshot: 

 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-84306789 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Roberto]

Sorry for the delay. I was doing some tests and research.

Your example worked, but I had tree other problems.

1. Add the unit in multiple fields in a partial view - Resolved 

2. I am using a partial view with the fields and the unit / text must be passed to the onCreate function. I created an attribute called unit and for that attribute I read the value of the unit and apply it to the icon span. - Resolved

3. The width of the unit field is fixed, it must be in the auto model, as I have a unit with varying size and does not fit in the example below. I believe this is an adjustment in style. This I was unable to resolve.

I don't know if it's the best way, but it is for those who have the same problem.

 <div class=" col-12 col-sm-12 col-md-3 col-xl-3 wrapper_field float-start">

        <ejs-textbox cssClass="e-outline"

                     locale="pt"

                     value="@Model.Dosagem"

                     type="number"

                     step="0.01"

                     unit ='@Model.Produto.Unidade'                       

                     floatLabelType="Auto"

                     placeholder="Dosagem"                  

                     id="Dosagem">

        </ejs-textbox>

    </div>

function onCreatedPartial() {

        var id = $(this)[0].element.attributes["id"].nodeValue;

        this.addIcon("append", "icon");

        var x = document.getElementById(id).parentElement;

        x.querySelector(".icon").innerText = $(this)[0].element.attributes["unit"].nodeValue;

    }

Thank you for your help.

Attachment: CAPTURE_OVER_8d8e72f4.rar

[Sevvandhi Nagulan]

Hi Roberto, 

We checked your query. The reported issue can be resolved by setting the max-width as 100% to the span element. Kindly refer the following CSS code. 

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { 

        max-width: 100%; 

        min-width: unset; 

    } 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox1055420625 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Roberto]

Perfect!!!

Thanks.

[Sevvandhi Nagulan]

Hi Roberto, 

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N