Search result container not in the same div as search field. Why?

  • Resolved Daniel

    (@junglized)


    7 years, 10 months ago

    Hi,

    the plugin is great but I’ve found some flaws in the design. The results box is not in the same div as search field which causes a funny behaviour. You can observe it here. I inserted ajax search widget in the sidebar. When you click magnifying glass icon on the right the sidebar extends and the search field is clearly visible. When it performs search the search result box is being displayed below the search field, and that is fine. But at closer look I realized that Search result box is not in the same div as search field. It’s positioned absolute to the body. When I scroll down the page it stands still causing it move out of vieport. Whet you stop scrolling then it reposition itself. It looks bad in terms of UI and UX. Finaly when you close the sidebar the search result box doesn’t retract along with it but fades out on it’s own clearly staying out of sidebar. So now my question is how to move search result to the sidebar and make it being positioned absolute to .widget-wraper div instead.

    Thanks in advance and kind regards, Dan.

    PS, I hope I made my point clear, my english is not perfect ??

    • This topic was modified 7 years, 10 months ago by Daniel.
    • This topic was modified 7 years, 10 months ago by Daniel.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Daniel

    (@junglized)

    PS, the same as above applies to filter selection box. ??

    Thread Starter Daniel

    (@junglized)

    I’ve found workaround solution to above. I’ve added

    jQuery(".wpdreams_asl_results, .wpdreams_asl_settings").appendTo(".AjaxSearchLiteWidget");

    to my theme’s javastript file and also 

    .AjaxSearchLiteWidget {
	overflow:visible !important;
}
.wpdreams_asl_results, .wpdreams_asl_settings {
	top:2em !important;
	left:0 !important;
}

    to my CSS file (you can style the position of searchresults and search settings differently by changing values of top and left CSS rules.

    It doesn’t affect searching at all and works like a charm. Still I think it should be achieveable without any hacks ??

    Plugin Author wpdreams

    (@wpdreams)

    Hi!

    I will try to answer the best way I can both your concerns ??

    About the results and the settings box moved: The results and the settings box is indeed moved to the body, and there are several reasons which forced me to use this solution, based on my experiences with past support threads and test, here is only a few:

    – If any of the parent elements to the search box is positioned other than static, it may mess up the correct calculations on some devices when displaying the search box. Especially if the search shortcode is placed within interactive elements (like scrollbars, sliders etc..).
    – If any of the parent elements to the search box has a hidden overflow, the results box will may never be displayed, or cut. Changin z-index does not help in this case. This happens more often than I thought.
    – Using fixed position as an alternative is still problematic on most mobile devices.

    The plugin is very far from an optimal design in terms of UX, but high level of compatibility is much more important, and unfortunately I have not found better solutions yet.

    About the “hovering” behavior: The pro version offers an option to set the results list and the settings box layout to “block” instead of the current “hover” behavior. It basically works as you described. I will however consider adding this option to the lite version as well within the upcoming release. I just haven’t though of it until now ??

    Your solution looks perfect until then, thanks for sharing!

    Thread Starter Daniel

    (@junglized)

    Hi,

    I fully understand your points and they seem all to be valid for me. As for now I stick to my solution, it does exactly what I need without affecting plugins main objectives.

    Thanks for a quick reply, cheers, Dan.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Search result container not in the same div as search field. Why?’ is closed to new replies.