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; } } }

How can you change popup design & appearance?

ShadSan

Hello, Is it possible to change the size and location of a popup window in web version of Experience Builder?

Find more posts tagged with

ArcGIS Online

Accepted answers

All comments

BethAnnWinebarger

Might depend on the pop-up template you choose, but for the 'Confirm' template you can align in to an edge or centered and change the size by pixel # or by dragging an edge (an the double line). Check out the right side of the screen under 'Position & Size' for alignment and pixel size.

ShadSan

Thanks. I need to adjust the layer info pop-up.

TonghuiMing

If you are referring to the feature popup window on the map, it cannot be customized at this time, unfortunately. The style and all are inherited from Map Viewer/API:

ShadSan

Thanks.

JonathanAttard

Hi, is this still the case, or can you now edit how the popup looks? If not, can you do some other workarounds for this?

LJackson29

I agree that this is needed. I have my pop-ups configured to pull into the Feature Info widget, but in the map, I would really like to adjust the formatting as it is rather awkward the way it is now, or alternative the option to have a second pop-up that is simpler.

JonathanAttard

I found out that you can modify the popups for each layer from within the ArcGIS Web Map by using Arcade code. This allows for a lot of customisation when using the flexibility of HTML.

https://developers.arcgis.com/arcade/

RandyMcGregor_BMcD

Is there any way to get it to populate in a sidebar the way the 'minimalist' instant app allows?

PaulHallett1305

Hi Jonathan

Can you load an example? Can't seem to find any sample code on the net to get going

Cheers

Paul

JonathanAttard

Sure, here's an example.

// Define an array of field names and their corresponding values
var fields = [
  { name: "Field1", value: $feature.FIELD1 },
  { name: "Field2", value: $feature.FIELD2 },
  { name: "Field3", value: $feature.FIELD3 },
  { name: "Field4", value: $feature.FIELD4 },
  { name: "Field5", value: $feature.FIELD5 }
];

function getLine(name, value) {
  return `<div><strong>${name}: </strong>${value}</div>`;
}

var content = ""
for(var i in fields){
  var field = fields[i]
  content += getLine(field.name, field.value);
}

// Generate the HTML layout dynamically
var layout = `
<div style="color: #333333;">
  <h2 style="color: #555555;">Generic Content</h2>
  ${content}
</div>`;

return { 
  type: 'text', 
  text: layout // This property supports HTML tags 
};

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.