Display: none; and resizing browser

[Kim]

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"/>

[Kim]

Heres an image of the result: http://i.imgur.com/QnGnmdL.png

[Dimitar]

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

 

 

[Kim]

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. :)

[Dimitar]

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