Compact Box closes when clicked

[pradhyumnagupta_yNx2]

Hi,

On my website I have started designing, I am using the COmpact Box layout for Mobile/Tablet view. But when I click on it, it is closing instead of showing the search box.

Same settings on my local testing environment works.

What am I doing wrong?

[pradhyumnagupta_yNx2]

made some progress. Changed position to “Fixed” in the COmpact Box layout and adjusted the padding.

Problem now is when I click on the icon, the search box opens but begins all the way from the left of the screen ignoring the padding set in the theme and the results box is also beyond the screen.

I want it to have equal padding so that when user clicks on the Search icon, the search box opens and there is equal padding on both left and right. Can you pls suggest fix to this?

[Ernest Marcinko]

Hi,

Sure!

Because the layout is non-static (absolute), the paddings and margins does not apply to the element as HTML treats that as it’s out of the document flow – so the closest relative parent padding applies only.

The simplest way is to adjust the final width to a lower value and find the sweet spot.

If you make sure that the #ThrottleCraze-Header is positioned relative and apply the padding and margin to that, it should also do the trick.

If those have no effect, then using a bit more advanced CSS on the final box width in compact mode:

div[data-asp-compact=open] {
    max-width: calc(100% - 20px) !important;
}

This will apply to the final width, and subtract a fixed value, regardless of the resolution.

[pradhyumnagupta_yNx2]

Hi,

I was trying with fixed width using pixel values but those wouldn’t be dynamic. I added the entire Group block inside another Group block and for some reason the Search Box is now contained in it. I don’t know what’s happening technically but it’s working. Maybe you could understand why this works.

[Ernest Marcinko]

My guess is that the groups are relatively positioned and therefore the plugin is relative to the inner group. Then if the outer group has margin, that will apply, as the search is contained in the inner group. Clever solution.

[Author]

Posts