Wide filter controls

[Paul Ridden]

Hi Telerikains,

I have a grid with 6 columns and filtering active. The last column width is stretched to fill grid. However the filter control is not drawn correctly. Is there anything I can do to fix this?

@(Html.Kendo().Grid<WebUserViewModel>()
       .Name("WebUsersGrid")
       .HtmlAttributes(new { @class = "js-full-height-grid" })
       .Columns(columns =>
       {
           columns.Bound(c => c.Id).Title("").ClientTemplate(Html.BuildWebUserIcons<WebUserViewModel>(this.User, "WebUsersGrid")).Width(StyleValues.Grid.ThreeIconColWidth).Filterable(x => x.Enabled(false)).Sortable(false).HtmlAttributes(new { style = " text-align:center;" });

           columns.Bound(c => c.Id).Visible(false);
           columns.Bound(c => c.AccountId).Visible(false);

           columns.Bound(c => c.Active)
               .ClientTemplate(Html.ClientTemplate_ActiveImg())
               .Width(100)
               .HtmlAttributes(new { style = " text-align:center;" });

           columns.Bound(c => c.UserNameWithinAccount).Title("User Name").Filterable(filterable => filterable.UI("NameFilter")).Width(200);
           columns.Bound(c => c.FirstName).Width(200);
           columns.Bound(c => c.LastName).Width(200);
           columns.Bound(c => c.Email);
       })
       .ToolBar(toolbar =>
       {
           toolbar.Create().Text("Add Web User");
       })
       .Filterable(filterable => filterable
           .Extra(false)
           .Mode(GridFilterMode.Row)
           .Messages(x => x.IsFalse("N"))
           .Messages(x => x.IsTrue("Y"))
           .Operators(operators => operators
               .ForString(str => str.Clear()
                   .Contains("Contains")
                   .DoesNotContain("Does Not Contain")
                   .StartsWith("Starts with")
                   .IsEqualTo("Is equal to")
                   .IsNotEqualTo("Is not equal to")
               )
           )
       )
       .Scrollable()
       .Sortable()
       .Pageable(pageable => pageable
           .Refresh(true)
           .PageSizes(true)
           .ButtonCount(5)
       )
   )

Thanks,

[Paul Ridden]

My bad. There is

input,
select {
    max-width: 280px;
}

in our CSS that was causing the bad effect on the filter controls. I've added:

.k-filtercell .k-input {
    max-width: 100% !important;
}

And all is well again.