nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Reduce padding on the Feature Info widget

MappyIan

Hi there, I'm new to Experience Builder and just trying to get to grips with things. The current issue I'm struggling with is the amount of padding that's automatically applied around the contents of the Feature Info widget. In Map Viewer, the popup has a small area of padding to the left and right of popup's contents totalling 19px (according to Google's Dev Tools):

Using the same popup in Experience Builder in the Feature Info widget, the padding on the left and right of the popup's contents totals 38px. Bearing in mind this is applied to both the left and right hand sides of the popup, it results in an awful lot of white space around the popup contents, as shown below:

As far as I can see, there is no way to control this as we're using ArcGIS Online. I presume if we were using ArcGIS Enterprise we'd be able to customise the CSS to reduce the padding, but I can't see any way of doing this in Experience Builder in AGOL. Ideally what I'd like to do is reduce all the padding at the various levels so it looks something like this:

Which I think looks a lot better. For reference, this being viewed at 1024x768.

Does anyone know if there is anything I can do about this and can anyone confirm that if I was using Enterprise it would be possible to customise the CSS to achieve the desired outcome?

Any help would be greatly appreciated.

Find more posts tagged with

ArcGIS Online

Accepted answers

JeffreyThompson2

No, but also yes and possibly back to no again, but definitely maybe.

So using ArcGIS Enterprise does not give you direct access to the CSS, but you can hack CSS into Enterprise. The other issue is that the Feature Info Widget has probably already been converted to the Components API (or it will be in a future update, maybe not a big deal if you are on Enterprise and can choose not to update). This will wrap the content in the Shadow Root which makes it impossible to target with CSS. You may still be able to get around this issue by altering the Calcite Root.

Or you could write your own version of a Feature Info Widget, might be easier than dealing with all of that.

All comments

f92k

I am going to offer a couple more suggestions in case others find it helpful.

To resolve the title being cut off, turn off the Feature Info title and replace it with a text widget connected to data.
To show a vertical scroll bar, set the Feature Info widget's height to auto. The Column widget will now be automatically sized by its contents and thus a scroll bar for the column will appear.

MappyIan

Thanks @f92k and @JeffreyThompson2. I like your suggestion, and I've had a go, but I can't get something that I'm totally happy with:

It's annoying how the main body of the Feature Info panel has more padding applied than the header, so applying negative margins to get something looking good means the header ends up getting chopped off. Oversizing the Feature Info widget on the right, to hide the extra padding, means the vertical scroll bar isn't visible, which isn't good as it's easy to get a situation where you wouldn't know it was there:

Thanks for trying, I think I'm going to log a support request/bug though because the extra padding is unnecessary and could be significantly improved by removing it.

JeffreyThompson2

@f92k I think you may be on to something...Here's a hack to try:

Place your Feature Info Widget inside a Column Widget and give it a fixed Width in px. I used 400px.
In the Feature Info Widget, use Align Center and a fixed Width wider than the Column. I used 430px.

Try playing around with something like this and see if you get something presentable.

f92k

You can try to position the Feature Info widget so there is less white space (padding) being shown, e.g., -19 px on the left and right.

MappyIan

Thanks @JeffreyThompson2, that's helpful to know. Bummer there isn't a solution/workaround I can implement without having to get in to Enterprise/custom widgets. Inspecting the Feature Info panel using Dev Tools it just seems that it gets wrapped in so many other things and a bunch of them apply additional padding that it gets massively padded out. I'm surprised others haven't found this, but maybe they're more accepting than me...

JeffreyThompson2

No, but also yes and possibly back to no again, but definitely maybe.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.