Resizing issue with RadSearchBox width 100%

[Veronique]

I have a resizing issue with the RadSearchBox. The control has a width of 100%.
When increasing the width of the browser, the RadSearchBox width auto adjust and increase accordingly.
However, when I decrease the browser width, the RadSearchBox width is not decreased.
I would expect the control width to decrease like other Telerik controls.

Can you help me with that please ?

<style type="text/css">
    .DivStyle
    {
        width:90%;
        border:1px solid green;
        padding:10px;
    }

    .TableStyle
    {
        width:100%
    }

    .TableStyle td
    {
        width:50%;
        border:1px solid red;
        padding:10px
    }
</style>

<div class="DivStyle">
    <table class="TableStyle">
        <tr>
            <td><telerik:RadSearchBox ID="RadSearchBox1" runat="server" Width="100%" /></td>
            <td>Hello world</td>
        </tr>
    </table>
 </div>

[Veronique]

This is my temporary fix.  I hope there's a better solution

$(document).ready(function () {
            var allRadControls = $telerik.radControls;
            for (var i = 0; i < allRadControls.length; i++) {
                var element = allRadControls[i];
                if (Telerik.Web.UI.RadSearchBox &&
                    element instanceof Telerik.Web.UI.RadSearchBox) {
                    element.repaint = function () {
                                         this.get_inputElement().style.width = null; }
                }
            }
        });

[Ivan Danchev]

Hello Veronique,

The resizing behavior is caused by nesting the SearchBox in a table. Outside of a table it resizes automatically. A different workaround from the one you have found could be applying the following CSS rule, which will allow the SearchBox to resize when the window width is reduced:

html .RadSearchBox .rsbInner input {
    width: 85%;
}

Regards,
Ivan Danchev
Telerik by Progress