Can i edit margins for vertical results depending if header is sticky or normal?

[PAULCNETParticipant]

Hello, I love your plugin but I am having problems trying to customize the vertical search results layout as I have a sticky header enabled from my theme, and the height comes in two different heights, with the main header at 100px and the sticky header at 75px in desktop view, however if the screen size is below 979px then the main header becomes 75px and the sticky header becomes 60px for tablet and mobile view.

The issue is I am trying to have a correct alignment and spacing between the vertical result layout and the header, but if I add margin-top: 20px on #ajaxsearchprores1_2.vertical, div.asp_r.asp_r_1.vertical then it will look fine on the main header but once the header becomes sticky then the margin spacing between the vertical results and header become too large. Is it possible via CSS where I can the margins for the vertical results layout when it is on the main header, and the margins when it is on the sticky header individually?

I manage to target the icon sizes successfully to increase or decrease in size when it is on the main or sticky header by adding .header-sticky-real.act-scroll .prosettings .innericon svg, which I am able to decrease the size of the icon if the header turns sticky as the height is smaller then the main header. However if I add the .header-sticky-real.act-scroll #ajaxsearchprores1_2.vertical, div.asp_r.asp_r_1.vertical for some reason it overrides the margins instead of changing the margins if the header turns sticky.

Also the same goes for the search options as I can only make it look aligned on either the main header or sticky but not both. Thank you for your time and understanding.

Regards

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

The problem is, that the settings and the results box is actually not printed inside the header, but into the body itself, so is can float over the content at any times. Otherwise overflowing elements would make it impossible. This means, that targeting .header-sticky-real.act-scroll #ajaxsearchprores1_2.vertical, div.asp_r.asp_r_1.vertical won’t do anything, as that node does not exist.

The only way to resolve this, is to have a script that watches the window scroll, and adds a CSS class to all main search elements whenever the menu becomes sticky. I noticed that it happens at 45 pixels from window scroll. Here, I constructed a script, that will watch this scroll, and add ‘asp_sticky’ to the main, result and settings elements, so you can target them easily.
Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!

Now, target each element with these rules:

.asp_m_1.asp_sticky {
   // Main search box
}

.asp_r_1.asp_sticky {
   // Results box
}

.asp_s_1.asp_sticky {
   // Settings box
}

You will most likely have to use rules with the !important modifier, as there are higher specificity CSS on the page, like so:

.asp_m_1.asp_sticky {
   margin: 10px 5px !important;
}

This should hopefully do the trick, and get you closer to what you need.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[PAULCNETParticipant]

Hi, I just tried out your script, and it seems to be getting the job done and I appreciate the help. However I don’t know what is causing the strange behavior when the vertical results layouts is open and you tried to scroll the page instead of scrolling inside the results section, the results area will either scroll along with the page and starts moving downwards but once you stop scrolling the results snap back in place within a couple of seconds.

Is there anyway either via a script or css where the results does not move when the user attempts to scroll the page especially when I have a scroll to top button on the bottom right corner, if the scroll to top button is clicked for example and if the results are open the entire results section will disappear and then snap back in place.

[Ernest MarcinkoKeymaster]

Hi,

It is sort of a “intended” behaviour. Let me explain why. The results and the options container is snapped to the main body element, to avoid fixed positioning, and so absolute position can be used instead. The reason for that, is that this way, z-indexes can be adjusted relative to other elements, while in fixed positions it would always appear above everything, which is not desired in most cases. However in cases when the search is placed to a fixed element, the results of course remain in an absolute position, but the script will always try to fix any gaps that appear during scrolling due to the difference of fixed and absolute positioned elements. There is a minor delay added to that, so this is not happenning during every scroll ‘tick’, but whenever the scrolling is finished – causing the snapping. The delay is added for performance reasons.
However, a much smoother transition will be added to the next release to fix that.

For now, the best bypass fix would be using a custom CSS to force a fixed position on the results, like so:

.asp_r_1 {
    position: fixed !important;
    top: 130px !important;
}

.asp_r_1.asp_sticky {
    position: fixed !important;
    top: 80px !important;
}

In this case there will be one snappy adjustment, whenever the sticky scrolling starts, but after that, the results should be fixed to that position, without further movements.

I hope this helps.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[PAULCNETParticipant]

Thanks for the explanation and fix! I also having margin issues with the mobile view, which I attached the screen shot below. I cannot see the end of the scrollbar, and the remaining of the search results as it just seems to cut off at the very bottom of the screen. How do show the entire search results to show as it is cut off including the scroll bar in certain mobiles devices like the Iphone, and Samsung Galaxy phones. Thank you.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

You are welcome.

There are two possible ways to address that:
1. Lowering the viewport size of the vertical results list on the back-end,
2. ..or using a custom CSS, like this:

@media (max-height:740px) {
    div.asp_r_1, div.asp_r_1 .results {
        max-height: 480px;
    }
}

@media (max-height:420px) {
    div.asp_r_1, div.asp_r_1 .results {
        max-height: 230px;
    }
}

Personally, I recommend solution 2., as the custom CSS will adopt better to screen sizes, and you can add more rules in descending order if needed.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts