The Sidebar Problem Or Why Can't I Click On Part of My Map?

[JeffreyThompson2]

There is a trap that will catch every new Experience Builder developer at some point, usually the first time they add a sidebar. 

Here I have a Legend in a Sidebar that covers up about half my map area.

I open up the Preview mode and I start clicking my map. The popups work fine in the west, but as I move east. They suddenly stop working.

Why is this happening? Well, even though the sidebar is closed the Sidebar widget is still on top of the map and it is effectively blocking you from interacting with your map.

The fix is to rearrange your layout, so that the map is now in the always open side of the sidebar. Starting with my arrangement with the sidebar directly on top of the map:

1. I grab and shrink my map down so I have some room to work.
2. I drag my sidebar so it is outside my map.
3. I drag my map into the sidebar. If your sidebar, now shows First and Second on the Page panel, you are doing this right. Which side is labeled First and Second is dependent on how your Sidebar widget opens.
4. Resize your sidebar and map as necessary.

Pay attention to this Overlay option. Turn it on if you want to have the sidebar cover the map. Leave it off if you want the map to resize without covering any content as the sidebar opens.

Note: This problem of one widget blocking interaction with another widget can happen between any two widgets. Put a big empty text box over your map and your map will stop working as well. So, it is good practice to make your widgets as small as you can and trim any unnecessary whitespace.

But, what if I have two sidebars? Well, you can do this trick again. Take the whole Sidebar widget and stuff it just under the First or Second label (whichever is the always open side) of Sidebar 2 and you should have two sidebars that don't mess with your map. I've never gone beyond two, but I don't see any reason you can't have three or four sidebars, maybe even more...

[JeffFranzen1]

Great save - Thanks!

[simonstrbatrigema]

Thanks for sharing the workaround.

[MattReeves_SpokaneValley]

Thank you for showing how to do this! Definitely needed information. 

However, I am not envisioning how you describe making this work with a second sidebar widget. Your instructions say to 'Take the whole Sidebar widget and stuff it just under the First or Second label (whichever is the always open side)', however, you cannot interact with the order/placement of the items listed in the Outline/Body. I've been attempting to do this on the screen with the actual widgets, but I haven't been able to get the secondary sidebar widget to change positions to 'Second'. Would you mind providing a more detailed explanation of how you were able to make 2 sidebars work?

My Primary sidebar is Bottom Drawer - Small - Text. My Secondary sidebar is Side Drawer - Small - photo. 

[JeffreyThompson2]

@MattReeves_SpokaneValley Depending on your arrangement, you may find it difficult to select and drag the right Sidebar. You may need to first select the Sidebar in the Outline and then manually adjust the Width and Height properties in the Style Tab to shrink the internal Sidebar to make it easier to move.

If you move the Side Drawer into the Second part of the Bottom Drawer, you will wind up with a layout that looks something like this.

With your current layout, the Side Drawer is inside the Map Widget and will interfere with the operation of the Map Widget.

If you want a layout that looks more like this, where all the Sidebars are surrounding the Map, you will need to drag the Map Widget inside the Side Drawer Sidebar Widget.

[MattReeves_SpokaneValley]

@JeffreyThompson2 Okay thank you for explaining in more detail. I think that that is the problem, is I am having trouble isolating just the Map Widget and then putting it inside of the Side Drawer Sidebar Widget as well. When I grab just the Map, and try to drag it, the entire Bottom Drawer Widget tries to drag with it. Or, when I try to grab the Side Drawer Sidebar Widget and drag it outside of the Bottom Drawer Sidebar Widget, it seems to be 'stuck' inside of the widget. I have verified that 'Keep inside the Parent Container' is not checked, but even with the Side Drawer Sidebar Widget isolated in the Outline/Body list, when I try to drag it, it is bounded by the extent of the Bottom Drawer Sidebar Widget, even if I make the Bottom Drawer widget smaller so that there is 'free' space around it. Also, this is for the smallest screen size configuration (phone), so I don't have a lot of room to resize things to drag them around. I will keep trying to drag the Map Widget to inside of the Side Drawer Sidebar Widget. I think I understand what needs to happen, I think I just need to figure out how to separate the different components and then get them re-combined in the right order. 

Thanks again for your help.