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

Setting HTML Table width in New Map Viewer Pop-up

JDonoghue

I am trying to create HTML tables within text attributes added to the pop-up configuration in the New Map Viewer and I cannot figure out how to set the table width

I have tried using html and css style widths, yet the tables appears to be the width of the data as shown here:

In this case, the upper table is as wide as the DeviceId value (not shown in the image) and the lower table is only as wide as the QC Check variable.

How can I force the table widths to be full width regardless of the data length?

Thanks in advance for your help.

Trouver plus de publications taguées avec

Accepted answers

Evan_Sepa

Incase someone comes across this...

For some reason you CANT set width as a style attribute in a popup, it gets stripped out. But you CAN set it on its own...

Instead of <table style="width:100%;"> do this <table width="100%">

Not always necessary but sometimes I will also set <figure class="table" style="width:-webkit-fill-available;"> as well. This is the tag that usually wraps your <table></table> tag

All comments

Katie_Clark

Thank you so much, @Evan_Sepa , I was trying to get this to work for a long time and this finally did the trick!

JoelPerkins

Thanks, I would have never figured that one out. This was driving me crazy.

Evan_Sepa

Incase someone comes across this...

For some reason you CANT set width as a style attribute in a popup, it gets stripped out. But you CAN set it on its own...

Instead of <table style="width:100%;"> do this <table width="100%">

Not always necessary but sometimes I will also set <figure class="table" style="width:-webkit-fill-available;"> as well. This is the tag that usually wraps your <table></table> tag

MarkEastwood

@JDonoghue were you ever able to find a solution for the issue you posted above?

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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