Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] text-align CSS property or override doesn't work in table.td #1037

Closed
ekuleshov opened this issue Apr 11, 2022 · 5 comments
Closed

[BUG] text-align CSS property or override doesn't work in table.td #1037

ekuleshov opened this issue Apr 11, 2022 · 5 comments
Assignees
@Sub6Resources
Labels
bug Something isn't working css Enhancements/issues with css properties <table> Issues with table rendering
Milestone
3.0.0

Comments

@ekuleshov
Copy link

Describe the bug:

When rendering html <table> element, the text-align CSS property is not respected.

I've tried with CSS in html:

td { text-align: right; }

and also with style override:

  Html(
    data: ...
    style: {
      'td': Style(textAlign: TextAlign.right),
    },
  );

also tried 3.0.0-alpha.2 version with the following renderer registered, but html is blank in this case

  customRenders: {
    tableMatcher(): tableRender(),
  }

HTML to reproduce the issue:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
      table {
        border-collapse: collapse;
        border: 0.5px solid grey;
      }
      td, th {
        border: 0.5px solid grey;
        padding: 5px;
      }
      td {
        text-align: right;
      }
      </style>
</head>
<body>
<table>
  <tr><td>1</td><td>2</td>
  <tr><td>5</td><td>0.088</td>
  <tr><td>6</td><td>1.046</td>
  <tr><td>10</td><td>162</td>
  <tr><td>11</td><td>2406</td>
  <tr><td>14</td><td>94</td>
</table>
</body>
</html>

Html widget configuration:

No customization, just plain Html(data: html);

Expected behavior:

Expected to see all td elements aligned to the right, but they all are left-aligned.

Screenshots:

n/a

Device details and Flutter/Dart/flutter_html versions:

  • Flutter version 2.10.4
  • Dart version 2.16.2
  • flutter_html: ^2.2.1 and flutter_html: ^3.0.0-alpha.2
@ekuleshov ekuleshov added the bug Something isn't working label Apr 11, 2022
@erickok
Copy link
Collaborator

erickok commented Apr 14, 2022

You mean the text itself is right-aligned, right, not the cells themselves? Sounds like a bug we need to solve.

@ekuleshov
Copy link
Author

You mean the text itself is right-aligned, right, not the cells themselves? Sounds like a bug we need to solve.

Yes. This is how a real webview rendering the right-aligned text inside table cells:

image

And this is what I currently see in Html widget for the same html input (the text-align: right; seem to be ignored)

image

@PXLBusiness
Copy link

Any updates on this? As there is currently no float on regular html elements, and no align or text-align on table elements, there seems to be no way to achieve left and right-aligned items on a single line by any means currently. Could REALLY use a solution if there's one to be had!

@Sub6Resources Sub6Resources added <table> Issues with table rendering css Enhancements/issues with css properties labels Jun 10, 2022
@Sub6Resources
Copy link
Owner

I'll look into this

@Sub6Resources Sub6Resources self-assigned this Jun 10, 2022
@Sub6Resources Sub6Resources added this to the 3.0.0 milestone Aug 20, 2022
@AsturaPhoenix AsturaPhoenix mentioned this issue Dec 1, 2022
Closed
@Sub6Resources
Copy link
Owner

Fixed in #1176

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Sub6Resources Sub6Resources

Labels
bug Something isn't working css Enhancements/issues with css properties <table> Issues with table rendering
Projects
None yet
Milestone
3.0.0
Development

No branches or pull requests
4 participants
@erickok @ekuleshov @Sub6Resources @PXLBusiness