Resizing issue with RadSearchBox width 100%

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

    Posted 05 Aug 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 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 10 Aug 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