Left and right of the dropdown menu do not close the dropdown

[fxground]

Hello,

If a user tries to click to the right or left of this dropdown menu, it doesn’t close it. I’m wondering if its possible for me to change a setting that would allow this? I’m on the latest released xtheme pro 6.5.2

URL in secure note.

[ruenel]

Hey @fxground,

Thanks for writing in! You should be able to click on the left and right of the Dropdown element beyond the set width of the content area.

What is your width setting for your site by the way?

Cheers.

[fxground]

@ruenel

What is your width setting for your site by the way?

I don’t know if it makes any difference but i have it as a component so that i can quickly change it for every page. Its a component within a header.

[ruenel]

Hey @fxground,

Since your width is 95%, you can still click on the left and right of the Dropdown but only within the 2.5% of the width on the left or right. If you set a maximum width of 1200 pixels then you may be able to click on the left and right of the white background colored dropdown content area.

Kindly let us know how it goes.

[fxground]

Hello,

Ok, this works to some extent. If i make it 1000px then i can click in the 100px to each side of the menu (left/right) to close it. But if i click outside of the max width of the container, it will not close.

So for instance i’m doing my initial design on a 5120x2160 monitor and if i click outside of the 1200px container (which is obviously a lot of room) it won’t close down the menu. Its not a huge issue on smaller resolutions like a laptop screen but especially any 4k or wide screen monitor it becomes annoying.

Is there a way to click outside of the container? The width of the container is set to 100%

[ruenel]

Hello @fxground,

I am on a 27-inch monitor.

The container is part of the Dropdown element. If you limit the width, you may be able to close the dropdown. Right now, you have set it to 95% width because you wanted to have the Content Area at the center of the page.

At the moment, there is no way of making it possible without adjusting the width and maximum width of the Dropdown element.

Thanks.

[fxground]

Ok fair enough, but even if the dropdown menu was smaller, i would only be able to make it close by clicking to the left/right within the container. But the far black area that is outside the container I still wouldn’t be able to click kand see it close. Do I understand that correctly?

Should there not be a way the user can click anywhere outside of the dropdown menu to make it close? or is that a feature request?

[ruenel]

Hello @fxground,

Take a look at your Dropdown structure:

You inserted a Row inside the Dropdown. You have set the width of the Dropdown to 95% and set the background color to transparent.

• See the secure note for a similar image and the screenshot of your site.

The only way you can close the dropdown is by clicking left or right outside of the Dropdown width (in red color). You need the width to center the Row element. If you set a smaller Dropdown width, you can click on the left or right of the dropdown content but the Row will no longer stay at the center of the page.

Hope this makes sense.

[fxground]

Hello, yes that makes sense. Is there a better way for me to be doing this that would still allow it to be clickable and centered? It sounds like the structure of how i have it laid out to accomplish the look i want is preventing it, but wasn’t sure if there is a better way so that everything will still look the same but function the way i’d like it too?

[ruenel]

Hey @fxground,

You can play around with the Dropdown element settings by setting the width to auto, enabling the “Inline” option

And by setting a width and/or maximum width for your Row element to 1200 pixels only.

Kindly let us know if those works out for you.