[BUG?] bulletpoints not vertically centered on unordered and ordered lists

[OPdarmawan]

same goes with ordered list

currently using version 3.0.0-alpha6

the first html list, the bullet placement stay centered like a normal bullet list..
meanwhile DEFAULT HTML unordered list broke the bullet placement aka not centered

this is the reference for the HTML of the screenshot:

<strong>List RAPIH</strong>
<ul>
   <li>Protein dan Serat timbang mentah</li>
</ul>
<ul>
   <li>Silahkan digunakan secukupnya: Kecap Manis, Kecap Asin, Saos Tomat, Bumbu Teriyaki, Bumbu Yakiniku, Bumbu Bbq, Saos Tiram, Aneka Sambal (kec. Sambal Goreng), dsb.</li>
</ul>
<ul>
   <li>Aneka Salad Dressing (max 1 sdm)</li>
</ul>
<ul>
   <li>Bawang2an (Merah, Putih, Bombay, Daun bawang)</li>
</ul>
<ul>
   <li>Bumbu Dapur (Garam, Merica, Pala, Ketumbar, Penyedap, dsb)</li>
</ul>
<ul>
   <li>Rempah2 (Jahe, Kunyit, Lengkuas, Kemiri, Ketumbar, dsb)</li>
</ul>
<ul>
   <li>Herbs (Oregano, Parsley, Thyme, Rosemary, dsb)</li>
</ul>
<ul>
   <li>Aneka Minyak (max 1 sdt/meal)</li>
</ul>
<strong>List GAK RAPIH</strong>
<ul>
   <li>Tidak makan</li>
   <li>Makan diluar jam</li>
   <li>Makan diluar menu (termasuk mencicipi)</li>
   <li>Tidak jalan rutin</li>
   <li>Tidur kurang dari 8 jam</li>
   <li>Konsekwensi Cheating: Stuck Berat Badan 3 hr, Diare</li>
   <li>Tidak jalan rutin</li>
   <li>Tidur kurang dari 8 jam</li>
</ul>

[lalit3102]

facing this issue, any solution for this?

[maurodibert]

Same over here...

[cogivn]

Facing this issue too

[Sub6Resources]

Have you tried the most recent master branch? I think #1161 may have fixed this. (It will be included in the next release, hopefully by the end of this week)

[cogivn]

Hi @Sub6Resources,
Thank you for your best effort.

I noticed that the Style(listStyleType: ListStyleType.fromWidget(widget) property has been removed at #1161. Could you please let me know how to customize the bullet point of an li or make the bullet point bigger?

[Sub6Resources]

@cogivn In the most recent version, you'll need to create a custom HtmlExtension to provide a widget to provide custom bullet points. However, it is possible to make the bullet point bigger without creating a new extension:

At the top of your file, add the import

import 'package:flutter_html/src/style/marker.dart';

(In the stable version of 3.0.0 you won't need to add this import. See #1272)

And then in your Html widget, use the following style:

style: {
        "li": Style(
          marker: Marker(
            style: Style(
              fontSize: FontSize(50),
            ),
          ),
        ),
      }

Compare the result to the output generated in a browser when running the html:

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>Item four</li>
</ul>
<style>
    li::marker {
      font-size: 50px;
    }
</style>

[cogivn]

Hi @Sub6Resources,

Thank you for replying me

I'm using v3.0.0-beta.1 and tried with your suggestion but it seems the bullets are not vertically centered if we change the font size of the marker.


This is my configured:

style: {
          '#': defaultStyle,
          'li': defaultStyle.copyWith(
              listStylePosition: ListStylePosition.inside,
              margin: Margins.symmetric(horizontal: 4, vertical: 5),
              marker: Marker(style: Style(fontSize: FontSize(30)))),
          ...style
        },

and here is the result:

<article>
	<p>Shop Online</p>
	<ul>
		<li>Shop online at - <a href="https://laneeight.hk/">https://laneeight.hk/</a></li>
		<li>Use the promo code upon checking out</li>
	</ul>
</article>
<article>
	<p>Shop in Store</p>
	<ul>
		<li>Only applicable in Wan Chai or Sha Tin store</li>
		<li>Show Townplace resident card/mobile pass to redeem the offer</li>
	</ul>
</article>

[Sub6Resources]

This is expected behavior. If we add

<style>
    li {
      list-style-position: inside;
      margins: 5px 4px;
    }
    li::marker {
      font-size: 30px;
    }
</style>

to your HTML and render it in Chrome, this is what your html looks like:

Note that the bullets are also not vertically centered.

[cogivn]

Thank you,

[rituapplocum]

ListStyleImage isnt working in flutter_html: ^3.0.0-beta.2