responsive jquery-live-search using wrong outerWidth()

This support request was posted in Flatbase by daemonhunt

Request ID #6749 In Progress
  • Hi There

    On the iPhone and upon resizing the browser (and probably on other smaller, non iOS devices), I notice that the live search results div is incorrectly resized. This is very noticeable on the phone where the home page is ‘shoved’ aside to accommodate the results div.

    Upon inspecting the jquery.livesearch.js and the style.css files closely, I have realised that the dynamically generated jquery-live-search div is obtaining it’s width from the form input, not the entire surrounding div #live-search .input or #live-search #searchform. This appears to be a mistake.

    Not only the mistake above, but the reason the home page is being shoved aside is that the ul #search-result is set to a fixed width of 750px. I have the feeling this ul should be set to max-width: 750px and width: 100%, as then it would pick up the width of the jquery-live-search div (which is resizing incorrectly anyway as mentioned).

    I don’t understand what the point of the jquery-live-search div is, if the ul it contains isn’t using it.

    This appears to be a bug. I’m puzzling my way through it now. Would appreciate your assistance.


    Juanfra Aldasoro

    Hi D,

    Thank you for writing.

    The jquery-live-search div is an auto-generated div from the live search library, and it is meant to have the same width as the input associated to the call of the functionality. In this specific case (Flatbase) the markup of the live search input consists of the text input (the one associated to the live search script) and a submit input (which looks like part of the input). And that’s why possibly you get to the results cut off, and also why it doesn’t look good if you change the size of the #search-results div.

    The solution I find to this is creating a JS function that triggers every time the window is resized, you can find it here:

    That way, the search results size will be always adjusted to the size of the parent input.

    You can save that file, name it custom.js and put it in your theme folder, that way it’ll be automatically executed by the theme.


    Hi Juanfra

    Thank you for this. Yes it now works upon resize, but not on document load, so on a mobile phone browser the #search-results div isn’t resized… unless the phone is rotated.

    Could you please test the site on a mobile phone browser? I’m trying to figure out how I can make this code work on document load as well as on resize.

    PS: I created the custom.js file and tried putting it into two different folders, but it did not load into the theme by default. Where should I put it exactly so that it loads by default? I had to append the code you gave me to the top of jquery.livesearch.js instead to test it.

    Thank You


    Hi Juan

    I found a fix to my own problem by merging your solution with jquery.livesearch.js

    You might want to check this problem on mobile browsers as it is definately a bug.


    Juanfra Aldasoro

    Hi D,

    Thank you for the follow up.

    Yes, sorry, the custom.js inclusion ins included in the next framework version, my bad. You can use the following php in your functions.php file to call that file:

    With regards to the solution I’ve sent you, you are right, it only works when the viewport is resized. A solution to that would be including the fix also when the document is ready. We’ll include the patch for the new version.

    Thanks again and sorry for the inconvenience.


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Login to your Account

Welcome back! Please log in to your account by filling the fields below:


Not a member? Create a free account.

Create a Free Account

You're 27 seconds away from some awesome WordPress free stuff, benefits and more. Create a free account and have access to our free products, benefits and more!

Already have an account? Log in
Secure Server