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

Applying background color to entire list item

emoreno

Hello ESRI Community!

I was wondering if anyone could assist me with this issue I am facing. I am looking to adjust the background color of a single list item in my survey 123, using the below HTML in the "label" column of my item in question. I also included a screenshot of what this HTML returns, and as you can see the lightgrey color does not cover the entire item box, just a small portion of it. If anyone knows what the issue may be, or has any suggestions on how to fix this, that would be greatly appreciated. Thank you!

<div style="background-color: lightgrey;">

 Best Value!

RF -- $xy.xy/mo

 This is a great choice for:
<ul style="list-style-type: disc;">
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>

</div>

Encontre mais publicações marcadas com

Accepted answers

All comments

jcarlson

The actual item's background is controlled by the survey's theme. You're only controlling the appearance of the text area in your item, so it will always have a margin around it, and I don't really see a way to avoid this without changing the theme's settings directly.

You could at least add some padding to the HTML elements so the grey doesn't come right up to the edge of the ext.

dougbrowning

There have been several posts of users regretting having HTML in the label as it shows up in the attribute table, popups, exports, etc and becomes a total pain. Josh's plan it probably going to be better.

abureaux

I am looking to adjust the background color of a single list item in my survey 123

Like this? (just change "span" to "div" in the code below)

Or this?

<div style="background-color: lightgrey;">
<b>
<p> <i style="color:black; text-align:right;" >Best Value!</i></p>
<p style="color: red; font-weight: bold;">
RF -- $xy.xy/mo
</p>
<p> This is a great choice for:</p>
<ul style="list-style-type: disc;">
<li><span style="background-color: Blue;">bullet item 1</span></li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</b>
</div>

emoreno

Hi abureaux! Thanks for the response, I realize the way I asked this question may have been confusing. The bulleted list in the HTML I gave above is a part of the single answer choice I wish to change the background for. So I would want that entire code block to have a grey background, like in the screenshot I provided above, but fill the entire box instead of just the text area of the item. I appreciate your assistance however as this may come in handy in the future!

emoreno

Hi Josh,

Thanks for the reply. I think we've decided to move forward with highlighting this answer choice by using a star image instead of changing the theme. I was wondering if you knew how to adjust the image so that it appears above the text in the answer choice rather than below? Appreciate your assistance!

emoreno

Hi Doug,

Thanks for the insight, this will definitely be something we have to consider moving forward. I think we've decided to move forward with highlighting this answer choice by using a star image instead of changing the theme. I was wondering if you knew how to adjust the image so that it appears above the text in the answer choice rather than below? Appreciate your assistance!

dougbrowning

You can add HTML emojis to the label text. For example "⛔"

See here for a list of codes. https://www.quackit.com/character_sets/emoji/emoji_v3.0/unicode_emoji_v3.0_characters_all.cfm

abureaux

@emorenoI think that S123 is missing the HTML required to make that happen actually. So, S123 uses HTML for formatting, but it isn't a complete deployment, meaning there are items we don't have access to/don't do anything.

This was the closest I got:

Using this:

<div style="background-color: lightgrey;font-weight:bold">Best Value!<br><span style="color:Red">RF -- $xy.xy/mo</span><br><br>This is a great choice for:<ul><li style="background-color: lightgrey">bullet item 1</li><li style="background-color: lightgrey">bullet item 2</li><li style="background-color: lightgrey">bullet item 3</li></ul></div>

My suggestion would be to just toss everything into a Group, then color that group. That should give you what you are looking for:

<div style="font-weight:bold">Best Value!<br><span style="color:Red">RF -- $xy.xy/mo</span><br><br>This is a great choice for:<ul><li>bullet item 1</li><li>bullet item 2</li><li>bullet item 3</li></ul></div>

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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