How to format for a bulleted list in introductions?

[Alex_Larkin]

Hello, and happy New Year!

I would like to have unordered lists in my book introductions formatted with bullet points.

I have this unordered list in my introduction:

\iot Cay libruta liguir:
\io1 Tayta Diosninchi camashanta tantiyacunchi (1—2).
\io1 Tayta Diosninchita runa mana wiyacushanta tantiyacunchi (3).
\io1 Tayta Diosninchi runata jishpichinanpaj Abrahamta aunishanta tantiyacunchi (4—11).
\io1 Abrahampa, Isaacpa, Jacobpa willapanta tantiyacunchi (12—50).

I would like it to look like this:

Cay libruta liguir:

• Tayta Diosninchi camashanta tantiyacunchi (1—2).
• Tayta Diosninchita runa mana wiyacushanta tantiyacunchi (3).
• Tayta Diosninchi runata jishpichinanpaj Abrahamta aunishanta tantiyacunchi (4—11).
• Abrahampa, Isaacpa, Jacobpa willapanta tantiyacunchi (12—50).

In SAB I went to Styles > Introductions > div.io, and saw this:

I don’t see an option for adding bullet points. How can I do this? Do I need to add something in the CSS? If so, what would I add?

Some possibly relevant posts:

How do I get bulleted and numbered lists in introductions?

Allow for hanging indents for lists in introductions

Thank you to the developers of the App Builders for making so many amazing tools. I recognize that development resources are limited, but I’ll go ahead and make this feature request, just in case =D. Please allow for hanging indents in introductory bulleted and numbered lists. For more details and print screens, please take a look at this discussion: Thanks! Alex

Thanks so much!

[mcquayi]

So something like this:

Here is the CSS:

div.io {
    padding-left: 8%;
    text-indent: -4%;
    display: list-item;
    list-style-position: inside;
}

The first two lines of what is inside of the curly brackets, handle the hanging indent. It indents twice as far as the default indent then outdents the first line by half that indent.
The third line makes it behave like a list with a disc.
The fourth makes the disc position not hang out to the left. (remove the line and see what I mean)

In Google I searched for: css hanging indent
I used the info on this page: https://www.thesitewizard.com/css/hanging-indents.shtml
Then I searched for: css bullet div
Note: In Styles it is under div.io so including div with css bullet is important to get to what you need.
I then used some of the info on this page: https://stackoverflow.com/questions/32039846/can-i-use-css-to-add-a-bullet-point-to-any-element

I did know how to do the hanging indent, but looked it up to be sure. I did not know about how to make the list ‘look’.

[Alex_Larkin]

Thanks so much mcquayi! This is great.

For some reason the second and following lines of a list item aren’t lining up like yours. Depending on font size and screen width, they are either a bit too far to the right or left. I tried to adjust text-indent, but the alignment still varies. Do you have any ideas on how to improve the alignment?

In the following printscreens, the CSS is exactly as suggested. The bigger the font, the more each item looks like a normally indented paragraph.

In any case, I have gone ahead and published an app update as is.

Thanks so much!