Kendo: Full width with floating labels enabled

Question

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>

It seems, the floating labels added some wrapping element to the HTML and the width: 100% style is not taking shape accordingly.

Here is the generated markup:

How can I style this form to take up the width of the bootstrap cell.

Answer 1

I figured it out by creating a new style in Edge's console:

span.k-floating-label-container {
  width: 100%;
}