Intentionally break/wrap filter after textbox?

[TonyG]

I have a very wide grid with many columns. For many of them the header and data are small but the filter is wide enough to include a textbox, plus the filter icon, plus an extra icon like for a date field.

I'd like to intentionally break these wide filter fields after the textbox so that the entire column width isn't burdened because of the filter.

So:

[textbox] <br/>
{date/time icon + &nbsp; + } [filter icon]

I know there is info available on creating custom filters. I'd like to avoid creating a completely new custom filter (template). I'd rather just get a better handle on styling the default filter for this "simple" purpose.

The TD for filters has an explicit "white-space: nowrap", specifically doing the opposite of what I want. Would a change to CSS class rgFilterRow help here? RadPicker controls are different, more complex.

Is there a better approach to this? Custom FilterTemplate really the way to go when fine tuning like this?

Thanks!

[Tsvetina]

Hello Tony,

Thank you for contacting us.

There are two approaches that you could try:
1) Overwrite the white-space: nowrap setting:

.RadGrid .rgFilterRow td
{
    white-space: normal !important;
}

2) Make the filter items auto-resize based on the available space:

<style type="text/css">
    div.RadGrid .rgFilterRow .rgFilterBox
    {
        width: 100%;
    }

    div.RadGrid .rgFilterRow td
    {
        padding-right: 30px;
    }
</style>

Let me know if any of the two suggestions helps.

Kind regards,
Tsvetina
the Telerik team