Full width with floating labels

[DoomerDGR8]

I started to use the new floating labels but I notice that the controls , otherwise with full width, are now resized to default. Here is my code:

<div class="form-group">
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.ContactPersonName)
              .HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })
              .Label(l => l.Content("Name *").Floating(true)))
    </div>
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.Mobile)
              .HtmlAttributes(new { @class = "form-control numeric phone", style = "width: 100%;" })
              .Label(l => l.Content("Mobile # *").Floating(true)))
    </div>
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.Email)
              .HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })
              .Label(l => l.Content("Email *").Floating(true)))
    </div>
</div>

<div class="form-group">
    <div class="col-sm-8">
        @(Html.Kendo().TextBoxFor(m => m.TRN)
              .HtmlAttributes(new { @class = "form-control", maxlength = "15", style = "width: 100%;" })
              .Label(l => l.Content("Tax Registration # *").Floating(true)))
    </div>
</div>

<div class="form-group">
    <div class="col-sm-8">
        @(Html.Kendo().TextBoxFor(m => m.SponsorName)
              .HtmlAttributes(new { @class = "form-control", maxlength = "100", style = "width: 100%;" })
              .Label(l => l.Content("Sponsor Name *").Floating(true)))
    </div>
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.TradeLicenseNo)
              .HtmlAttributes(new { @class = "form-control numeric", maxlength = "20", style = "width: 100%;" })
              .Label(l => l.Content("Trade License # *").Floating(true)))
    </div>
</div>

 

I need these input controls to appear sized and blocked (100% width) within their bootstrap cell.

[Nikolay]

Hi Hassan,

Indeed, Floating labels create a span wrapper around the TextBox so to have the current TexBoxes' width applied correctly please apply the following CSS over the Floating container span:

<style>
    .k-floating-label-container {
        width: 100%;
    }
</style>

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik