Display: none; and resizing browser

5 posts, 0 answers
  1. Kim
    Kim avatar
    10 posts
    Member since:
    Oct 2013

    Posted 07 Jan 2015 Link to this post

    Hey all.

    I have this problem, when i resize the browser and the searchboxs parent div has display:none; When i display the searchbox again, position of the buttons, and the textfield is pushed in.

    i've created a small snippet, to show you what i mean.

    The problem first occurred when i was implemented the searchbox into a bootstrap navigation.

    Any help would be appreciated!

    <
    div class="testClass">
        <telerik:RadSearchBox ID="RadSearchWebTimetable" runat="server" SearchContext-ShowDefaultItem="false" HighlightFirstMatch="True" OnSearch="SearchBox_OnSelected" MinFilterLength="2" Width="100%" EmptyMessage="Søgetekst">
            <DropDownSettings Height="300" Width="400">
                <ClientTemplate>
                    <div class="#= DataItem.cssClass #">
                        #= Text #
                        <p style="margin-bottom: 0px; margin-top: -15px;">
                            <small class="text-muted text-small">
                                #= DataItem.Description #
                            </small>
                        </p>
                    </div>
                </ClientTemplate>
            </DropDownSettings>
            <WebServiceSettings Method="UMS_Search" path="WebServices/Search.asmx" />                               
        </telerik:RadSearchBox>
    </div>
     
    <asp:Button runat="server" OnClientClick=" $('.testClass').hide();return false; " Text="Hide"/>
    <asp:Button runat="server" OnClientClick=" $('.testClass').show();return false; " Text="Show"/>
  2. Kim
    Kim avatar
    10 posts
    Member since:
    Oct 2013

    Posted 07 Jan 2015 in reply to Kim Link to this post

    Heres an image of the result: http://i.imgur.com/QnGnmdL.png
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 12 Jan 2015 Link to this post

    Hi,

    I am afraid that the issue described is not reproducible on my side with the sample provided - screen video. I have tested it in Firefox, Chrome, Opera and IE 7-11. Could you specify the browsers used for reproduction? I am sending you my test page based on your snippet.

    In order to assist you in the most efficient way I would suggest that you provide a very simplified runnable project that demonstrates the behavior that you describe. It may include aspx, code behind, bootstrap version used (you could provide a CDN link as in my sample), as well as any other files you find necessary. Thus, I could test it locally and determine what might be causing the issue that you are experiencing. You can find guidelines how to prepare such a sample in the Isolating a problem in a sample project help article.

    Regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Kim
    Kim avatar
    10 posts
    Member since:
    Oct 2013

    Posted 13 Jan 2015 Link to this post

    Maybe i wasn't clear enough in my explaination. So here goes.

    It's actually just a problem when you resize the window, and searchbox is hidden. So your example is just fine, but you have to resize the window. :)
  6. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 13 Jan 2015 Link to this post

    Hi,

    Indeed, I reproduced the reported behavior when resizing the window.
    The search icon position is calculated based on the size of the RadSearchBox input.
    In this scenario, you can calculate the input width and position the search icon properly as in the following example:

    <div class="testClass">
        <telerik:RadSearchBox ID="RadSearchWebTimetable" runat="server" Width="100%" EmptyMessage="Empty message">
        </telerik:RadSearchBox>
    </div>
    <asp:Button ID="Button1" runat="server" OnClientClick="hideDiv(); return false;" Text="Hide" />
    <asp:Button ID="Button2" runat="server" OnClientClick="showDiv(); return false;" Text="Show" />

    <script type="text/javascript">
        var $ = $telerik.$;
     
        function hideDiv() {
            $('.testClass').hide();
        }
     
        function showDiv() {
            $('.testClass').show();
            var input = $('.testClass').find(".rsbInput");
     
            var iwrapperWidth = $(".rsbInner").width();
            var iconsWidth = $(".rsbLoadingIcon").outerWidth(true) + $(".rsbButtonSearch").outerWidth(true);
            var inputWidth = iwrapperWidth - iconsWidth;
            $(input).outerWidth(inputWidth, true);
        }
    </script>


    Regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017