Using "input-group-text" with a SfTextBox

[Henning Krause]

Hey, 

I was playing around with the SfTextBox and I can't achieve an input group like a it is used in Bootstrap.

Here is what I got: the red circle is the example from the bootstrap documentation. The blue circle is what is shown with a  SfTextBox. ​​

I used the following code: 

    <div class="row align-items-center mt-2">
        <div class="col-2 fw-bold">
            A String: @this.equipment.aString
        </div>
        <div class="col-4">
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
                <SfTextBox CssClass="form-control" @bind-Value="@this.equipment.aString"></SfTextBox>
            </div>
        </div>
        <div class="col-2 fw-bold">
            One more string: @this.equipment.aSecondString
        </div>
        <div class="col-4">
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
                <input @bind-value="@this.equipment.aSecondString" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
            </div>
        </div>
    </div>

How do I format the the SfTextBox so that the prepended text is displayed like the one in the red circle? 

Best regards

Henning

[Ponmani Murugaiyan]

Hi Henning, 

We would like to inform you that, we have considered the reported requirement(“Provide input addon support with bootstrap 4 theme in Blazor”) as a feature at our end and this support will be included in our any one of our upcoming volume releases. You can track the feature details from the below feedback link.   

   

Feedback Link: https://www.syncfusion.com/feedback/20532    

  

Until then we suggest you to use the below suggested work-around solution to achieve your requirement by using JS interop. 

[Index.razor] 

 

<div id="wrapper"> 

    <SfTextBox CssClass="custom" Created="OnCreate"></SfTextBox> 

</div> 

 

@code { 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

    public void OnCreate(object args) 

    { 

        JsRuntime.InvokeVoidAsync("OnCreated"); 

    } 

} 

[wwwroot/calendar.js] 

 

window.OnCreated = () => { 

    var DateTimeObj = document.getElementsByClassName("custom"); 

    var button = document.createElement('button'); 

    button.type = 'button'; 

    button.innerHTML = 'Small'; 

    button.className = 'btn-styled'; 

    DateTimeObj[0].prepend(button); 

}; 

 

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

Regards, 

Ponmani M 

[Henning Krause]

Hi Ponmani,

thank you for your reply. I used it as a starting point as the button is not a look I was going for. I ended up using the following code:

Component:

@inject IJSRuntime JsRuntime
<div class="mb-3">
    <SfTextBox CssClass="prependtext" @bind-Value="@this.equipment.aString" Created="OnCreate"></SfTextBox>
</div>
<style>
    .inputprependtext {
        padding: 0.25rem 0.5rem;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #212529;
        text-align: center;
        white-space: nowrap;
        background-color: #e9ecef;
    }
</style>
@code {
    public async Task OnCreate(object args)
    {
        await JsRuntime.InvokeVoidAsync("PrependOnInput", "test", "prependtext");
    }
}

JS-File:

window.PrependOnInput = function(PrependText, className) {
    var DateTimeObj = document.getElementsByClassName(className);
    var span = document.createElement('span');
    span.innerHTML = PrependText;
    span.className = 'inputprependtext';
    DateTimeObj[0].prepend(span);
};

I hope this feature gets implemented in the future!

Best regards

Henning

[Ponmani Murugaiyan]

Hi Henning, 

Welcome, we are glad to hear that the issue has been resolved.  

Regards, 

Ponmani M