[daemonhunt]

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.

Regards
D*

[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: https://gist.github.com/juanfraa/ed1c64009b2cea2f90bb

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.

Best,
Juan.

[daemonhunt]

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

D*

[daemonhunt]

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.

Regards

[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: https://gist.github.com/juanfraa/1e946354c8a1f815a70d

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.

Best,
Juan.