We've moved discussions to Discord

solved: Anyone else unable to get simple <li> to look like bullets ?

I'm not sure if there are multiple packages interacting, but on a fresh out of the box JSP installation (today) I can find no way to style text to show up as correct bullets.

I've tried with/without a <div class="prose"> container, and with/without <ul class="list-disc"> and different variations looks different but none of them are correct.

Anyone know the trick to make this look like bullets (I added it to the views/dashboard/show.html.erb since that page was handy for experimentation:

    <h3>List 1</h1>
    <div>
       <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence.</li>
        <li>Shorter second sentence. </li>
      </ul>
    </div>

    <h3>List 2</h1>
    <div class="prose">
      <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence.</li>
        <li>Shorter second sentence. </li>
      </ul>
    </div>

The first one is completely unstyled. The second one is styled, but shows a double bullet symbol, the light gray one that is styled by the prose class, and the regular browser bullet.
Might be a Tailwind bug. It appears the way Tailwind handles list-disc does not replace the default browser bullet, it "pushed it off screen". But, if the html is inside a parent with ANY margin or padding, that extra bullet is no longer "off screen".

Can be seen here on List 4 of this Tailwind playground:
https://play.tailwindcss.com/Yd9myoPKdC
John Quarto-vonTivadar
isn't this more of a Tailwind question rather than JSP ?
Technically yes. Except if other JSP users cannot get bullets to work, due to interactions among particular OTB modules, and if they are wasting as much time as I did, they might find a workaround to be relevant/helpful until such time as TW fixes it.

Speaking of which, for anyone else having issues with li bullets, there are two underlying issues/workarounds.

a) Tailwind has a definite bug in the list-inside where it does not implement hanging indent. You can see this by simply visiting their doc page https://tailwindcss.com/docs/list-style-position and making the browser window narrow enough for their sample text to "wrap" and you will see that list-inside has no hanging indent formatting but list-outside has the correct hanging indent.

easiest workaround: use list-outside not list-inside until TW fixes it. (I've reported it.) [update: TW says list-inside is supposed to look like that]

b) if you use the (very handy) "prose" class (provided by one the JSP-included modules tailwindcss/typography) to auto-format a long bit of plain html (like a privacy page or T&C page), if it has ul/li bullets you will get "double bullet points" if you use the list-disc  class (which is precisely what the Tailwinds docs say is what you should use to show bullet points). So this one is probably not a bug per se, just a lack of TW documentation anywhere re the interaction between the "default" use of TW list styling classes vs. the "prose" class one of their modules provides.

easiest workaround: if you have ul/li inside a parent that uses "prose" to auto-format the section, omit the list-disc class from the ul tag, and also do not use list-inside on the ul tag. (The prose class does its very own nice styling of any plain ul tag.)
John Quarto-vonTivadar
Or perhaps they would be looking for a solution to a possible TW bug on the TW forums? I mean, I had a flat tire the other day, and although other JSP users might have had a flat tire at some point and been able to help me out, I went to AAA and got some help.  You know, "right tool for the right job" applies to forums too. :)

p.s. I just used a plain ul/li inside a div, and I got the bullet as expected. I just made sure the parent wasn't using the `prose` class.  YMMV
Either this forum is a place for info and questions related to the use of JSP for the benefit of JSP users, or it's not. 

I think it is. I think that includes items included in the OTB JSP stack. I think that's probably why the JSP site calls it "discussions". I also think saying discussing JSP-related software issues in this forum is in any way comparable to discussing car flat tires issues in this forum is inappropriate. 
Notifications
You’re not receiving notifications from this thread.