Compact Box Fixed Position Configuration

[kamaltyagiParticipant]

I have a couple of queries about the compact box layout mode.

1) I have set the compact box position to “Fixed” and position it in the top right corner of my site. When I scroll down the page, the compact box scrolls down with the browser. Is there a way to pin the compact box at the top of the page so that it does not move down upon scroll? In other words, to keep it pinned in the header of my site?

2) I find that the fixed position of the compact box mode works when I place it in a widget area within the body content of a page, but if I put it in a footer widget area, it displays the compact box only within the footer (seems like the absolute position mode) and does not fix it in the top right corner of the page. How can I position the widget so that it is displayed globally on all pages of my site? I thought that by putting it in the footer that is global on the site it would display on every page of the site that has the footer in the fixed position I set.

I appreciate your time, and I have sent in a five start rating for your kind support and highly functional plugin.

[Ernest MarcinkoKeymaster]

Hi!

1. Yes, by changing it to absolute position, instead of fixed. Fixed CSS property means that the position is relative to the viewport and it’s size. It’s kind of “pulled” out of the page and fixed to the browser window.

2. I’m guessing it’s because either one of it’s parent elements has a hidden overflow, or a CSS override is changing it to absolute.

The best possible way of placing the plugin pinned to the site top is by
1. setting the position to “absolute” instead of “fixed”
2. setting the top position value to a pixel value instead of %. This because in absolute position the whole page length is calculated in height, and it will be different for each page: https://i.imgur.com/efauf9P.png
3. placing the shortcode to the footer by:
– either placing the search PHP shortcode to the footer.php file in the theme directory
– ..or using this code in the functions.php file in your theme directory:

Copy this code from line 3, and make sure that the shortcode ID is correct 🙂

This will make sure that the shortcode is placed relative to the body element, and therefore it will be absolutely positioned to it – pinned to the top value you define.

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

[kamaltyagiParticipant]

Thanks Ernest.

I have followed the suggestions you provided and the function is working for the most part. I am having run into some issues though.

1. I find that in the “Absolute” positioning mode, there is no overlay available. Is it possible to enable that somehow for this search function as works in the ‘fixed’ mode?

2. There is some sort of border or shadow on the button that can’t figure out how to remove (you can see it in the top right corner here along the bottom edge of the button: http://premadharma.org/wisdom-stories/). I have disabled all the border and shadow options I can find in the settings and that removed other borders I saw initially, but this one I can’t get to disappear.

3. For some reason I can’t figure out, the settings button places itself on a lower level than the rest of the elements in the search bar. I don’t know how to get it to sit in level.

4. The loading icon displays itself a little more than halfway outside the search bar on the far right and is barely visible. I’d like this to be vertically centred in the bar and fully visible.

5. The x-button to close the results shows up in the top right corner of the search bar. I’d like this also to be vertically centred in the bar and fully visible. Is there anyway also to colour the black portion of this button?

6: The settings offer options to specific the search box height and width. I have set the width to 30px and the height to 48px but the search box still remains displayed as a square.

I appreciate your time and assistance with this greatly.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Sorry for the late response.

1. Unfortunately it is not possible without custom coding.

2. It’s a box shadow on the main container, from what I can see there. If you change all values to 0, it will disappear: https://i.imgur.com/dE3vTyC.png

3, 4, 5 – I see them all vertically centered, this might have been only a temporary issue (maybe browser cache)? Try clearing all your cache, and let me know if it doesn’t change.

Coloring the button
The icon is a vectorized SVG image, but it is possible, with some custom CSS:

.proclose svg {
    background: #c29338 !important;
}

6. I’m assuming you are referring to the compact search (id=3) in the top right corner? The compact starting width is automatically calculated and set to the magnifier area width, which usually equals to the overall box height. (so the magnifier icon is centered to it’s container background). I’m afraid this starting width cannot be changed without heavily editing the plugin sources.

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

[kamaltyagiParticipant]

Thanks for the thorough reply Ernest.

The fixes you offered worked, and I understand the complexities of adjusting the other elements.

I think I have the function setup now to work.

I just am having a couple more issues.

1) The settings dropdown menu and the results dropdown are showing up behind my site header. I had to adjust the z-index on the search button to 999999 to get it to show up on top. Perhaps I also need to change the z-index for the dropdowns, but I don’t see an option in the settings to do this.

2) The search starts automatically after text is typed, but if I press enter after typing the text the default wp search runs. Is there a way to disable this default search from running when enter is pressed?

Thanks again for your time.

[Ernest MarcinkoKeymaster]

Hi,

You are very welcome!

1. Indeed, the issue is the menu z-index is higher than the results. Use this custom CSS to resolve that:

.wpdreams_asp_sc {
z-index: 999999999 !important;
}

I think I’m going to add options for changing that for the upcoming release.

2. On the General Options -> Behavior and logics panel you can change that: https://i.imgur.com/9WreoWF.png

I hope this helps!

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

[kamaltyagiParticipant]

Yes! These fixes worked easily.

Much appreciated.

Sorry to go on and on here, but one more thing I am finding is that there is a gap that appears between the search bar and the dropdown with the results. How can I control the size of this gap?

[Ernest MarcinkoKeymaster]

Hi!

It’s calculated automatically, but adding a negative top margin will help, for example:

div[id*=ajaxsearchprores] {
    margin-top: -10px !important;
}

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

[kamaltyagiParticipant]

Yes, great, that closed the gap just fine.

I appreciate all your time on this.

Please go ahead and close this ticket.

All the best,

KT

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts