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.

[JeffreyThompson2 · Accepted solution]

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.

[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...

[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.

[JeffreyThompson2]

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

1. Place your Feature Info Widget inside a Column Widget and give it a fixed Width in px. I used 400px.
2. 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.

[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.

[f92k]

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

1. To resolve the title being cut off, turn off the Feature Info title and replace it with a text widget connected to data.
2. 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 for the suggestions @f92k.  Certainly removing the title from the popup and adding a Text widget sorts the problem of the header getting chopped off when the Feature Info widget is wider than the containing column (see below).

But I'm having to set the width of the Feature Info widget so that it's wider than it's container to try and hide all the extra padding.  So, even with the height of the Feature Info widget set to 'auto', this means the vertical scrollbar is also not visible because it's overflowing the container (the grid column in this layout):

Unless I'm misunderstanding something, I'm not sure how the scrollbar would be visible in this scenario.

[f92k]

I am not familiar with the Grid widget so I can't speak to that.

The Column widget is scrollable when its content exceeds its size. Therefore, place a Feature Info widget inside it and set the Feature Info widget's height to auto. The container in this case is the Column widget, and its scrollbar will be visible if its contents (Feature Info widget) exceed the container's size.

Here is an example illustrated.

[MappyIan]

Thanks @f92k, that's really helpful.  I just checked my Experience and I'm using a Section inside a Column in a Grid layout.  Doing what you've done above doesn't display a vertical scroll bar for me, so I guess that's a difference between a Grid layout and a Column based layout.  I'm probably going to need to modify my Experience to use Columns anyway (because there are no controls on the widths of columns in Grid layouts >:() so will see if I can get something that works using the technique outlined above.  Thanks for taking the time to explain.