[BUG] html table not displaying in flutter mobile apps

[Tigran-Kosemyan]

Add Table extension but not clear show table

[erickok]

Did you add flutter_html_table as dependency?

[Tigran-Kosemyan]

Did you add flutter_html_table as dependency?

Yep, but table border not drawing, I add Styles

Html(
      data: html,
      shrinkWrap: true,
      style: {
        "table": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
        "tr": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
        "th": Style(
          padding: HtmlPaddings.all(6),
          height: Height.auto(),
          border: const Border(
            left: BorderSide(color: Colors.black, width: 0.5),
            bottom: BorderSide(color: Colors.black, width: 0.5),
            top: BorderSide(color: Colors.black, width: 0.5),
          ),
        ),
        "td": Style(
          padding: HtmlPaddings.all(6),
          height: Height.auto(),
          border: const Border(
            left: BorderSide(color: Colors.black, width: 0.5),
            bottom: BorderSide(color: Colors.black, width: 0.5),
            top: BorderSide(color: Colors.black, width: 0.5),
            right: BorderSide(color: Colors.black, width: 0.5),
          ),
        ),
        "col": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
      },
      extensions: const [TableHtmlExtension()],
    );
 

when will the big table be horizontal scrollable or not?

[erickok]

By default, tables are not scrollable. You can use the extension API for this. See #1291 for an example.

[Tigran-Kosemyan]

By default, tables are not scrollable. You can use the extension API for this. See #1291 for an example.

thanks a lot

[Tigran-Kosemyan]

WrapperExtension(
    tagsToWrap: {'table'},
    builder: (child) {
      return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: child,
      );
    }
  ),

not found, flutter_html: ^3.0.0-beta.2 flutter_html_table: ^3.0.0-beta.2

used

TagWrapExtension(
            tagsToWrap: {'table'},
            builder: (child) {
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: child,
              );
            }
        )

[Tigran-Kosemyan]

also not scrolling

[Sub6Resources]

Make sure you put the TagWrapExtension before the TableHtmlExtension otherwise the TableHtmlExtension will prevent the TagWrapExtension from doing its job.

[Tigran-Kosemyan]

extensions: [
        TagWrapExtension(
            tagsToWrap: {'table'},
            builder: (child) {
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: child,
              );
            }),
        const TableHtmlExtension(),

      ],

yeah, but in this case all contents broken, not show

[Sub6Resources]

That probably means it is working, but you have an unbounded width on your Html widget so it can't paint. Do you see error messages in the console?

[Tigran-Kosemyan]

thanks, with SingleChildScrollView child width its worked, but in older version with custom render its clear because when data is dynamic I can't detect width of table

[ElDuderini]

I have the same issue that @Tigran-Kosemyan had with the table view needing to have a set width, though setting the width of the child wouldn't work in my case since the tables can vary widely in width. With the child widget that you get back from the builder in TagWrapExtension, it uses a normal key instead of global key, which prevents me from fetching the renderBox of the widget to determine how much space the table would take up to provide the correct width needed in the child of the SingleChildScrollView.

Haven't been able to find a good solution for this problem yet, as the old imlemention didn't require these constraints.

[ElDuderini]

Ended up making a fix for this, but it required me to copy the code of the TableHtmlExtension class to create our own extension class so that we could add shrink wrap to the returned CssBoxWidget class. Would be nice to set up an optional parameter for the TableHtmlExtension class to allow for shrink wrapping, since the HTML widget can be shrink wrapped as well.

[Somtobro]

Any fix for showing the borders? @Sub6Resources @Tigran-Kosemyan

[Somtobro]

@ElDuderini any fix for showing the borders? I need it urgently

[ElDuderini]

@ElDuderini any fix for showing the borders? I need it urgently

You can get the borders of the table to show by setting the styles for the tables. Specifically for setting the style for td in my case. I set up all of the default HTML styling in a custom html class where I set up the default HTML styling across the whole app.

Here is an example where I only set the borders for the table elements to be at the bottom, but you can also set them for top, left, and right as well if desired. This value is within a Map<String, Style> getter, which is then fed into the HTML widget in the style parameter.

[Somtobro]

Thanks, worked

On Mon, Aug 28, 2023, 8:23 AM ElDuderini @.***> wrote:

@ElDuderini https://github.com/ElDuderini any fix for showing the borders? I need it urgently

You can get the borders of the table to show by setting the styles for the tables. Specifically for setting the style for td in my case. I set up all of the default HTML styling in a custom html class where I set up the default HTML styling across the whole app.

Here is an example where I only set the borders for the table elements to be at the bottom, but you can also set them for top, left, and right as well if desired. [image: Screenshot 2023-08-28 at 09 22 01] https://user-images.githubusercontent.com/44909968/263624272-fef1c1a8-8149-4e87-89d2-8cc6362bf379.png

— Reply to this email directly, view it on GitHub https://github.com/Sub6Resources/flutter_html/issues/1326#issuecomment-1695168817, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWI5F365TSBFYIYFZUPFTSDXXRBQ3ANCNFSM6AAAAAAZOJUTG4 . You are receiving this because you commented.Message ID: @.***>

[Tigran-Kosemyan]

@ElDuderini any fix for showing the borders? I need it urgently

all style

style: {
        "table": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
        "tr": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
        "th": Style(
          padding: HtmlPaddings.all(6),
          height: Height.auto(),
          border: const Border(
            left: BorderSide(color: Colors.black, width: 0.5),
            bottom: BorderSide(color: Colors.black, width: 0.5),
            top: BorderSide(color: Colors.black, width: 0.5),
          ),
        ),
        "td": Style(
          padding: HtmlPaddings.all(6),
          height: Height.auto(),
          border: const Border(
            left: BorderSide(color: Colors.black, width: 0.5),
            bottom: BorderSide(color: Colors.black, width: 0.5),
            top: BorderSide(color: Colors.black, width: 0.5),
            right: BorderSide(color: Colors.black, width: 0.5),
          ),
        ),
        "col": Style(
          height: Height.auto(),
          width: Width.auto(),
        ),
      },

[trungnh20]

https://github.com/Sub6Resources/flutter_html/issues/1326#issuecomment-1602819457

@Tigran-Kosemyan Can I see code for this? Thank you so much. I need it urgently.

[lukeirvin]

I'm facing this same issue. Any new updates related to this?

[Tigran-Kosemyan]

I'm facing this same issue. Any new updates related to this?

not yet, I set width 1000px but it's not solution

[dungle48]

@Tigran-Kosemyan hey i use Html widget but it not show

tag, did you fix that?

[Tigran-Kosemyan]

@Tigran-Kosemyan hey i use Html widget but it not show

tag, did you fix that?

not yet, I set fixet size but it's not goog solution

[yuyanteng]

谢谢，使用 SingleChildScrollView 子宽度可以正常工作，但在旧版本中，自定义渲染很清晰，因为当数据是动态时，我无法检测表格的宽度

How to solve this blank problem?