Resizing issue with RadSearchBox width 100%

3 posts, 0 answers
  1. Veronique
    Veronique avatar
    19 posts
    Member since:
    Jul 2011

    Posted 05 Aug 2016 Link to this post

    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>

  2. Veronique
    Veronique avatar
    19 posts
    Member since:
    Jul 2011

    Posted 05 Aug 2016 Link to this post

    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; }
                    }
                }   
            });

  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1209 posts

    Posted 10 Aug 2016 Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top