Flutter_html: Align <div> entirely left?

Created on 17 Jun 2020  路  3Comments  路  Source: Sub6Resources/flutter_html

Hey this is my code:

Html(
                data: """<div>SSSSS</div>""",
                style: {
                  "html": Style(backgroundColor: Colors.blue, margin: EdgeInsets.all(0), padding: EdgeInsets.all(0)),
                  "div": Style(alignment: Alignment.centerLeft, backgroundColor: Colors.red, margin: EdgeInsets.all(0), padding: EdgeInsets.all(0), ),
                },
                onLinkTap: (url) {
                  _launchURL(url);
                },
              )

Looks like:

image

I want the red div to be aligned completly to the left.
How can I do this? Thanks for your awesome work!

Note: My element currently is inside a column.

Most helpful comment

This happen because your div is wrapped inside a body tag with a default margin of 8 pixels.

try this instead:

style: {
    "html": Style(backgroundColor: Colors.blue),
    "body": Style(margin: EdgeInsets.all(0)), // <-- remove the margin
    "div": Style(alignment: Alignment.centerLeft, backgroundColor: Colors.red),
},

All 3 comments

This happen because your div is wrapped inside a body tag with a default margin of 8 pixels.

try this instead:

style: {
    "html": Style(backgroundColor: Colors.blue),
    "body": Style(margin: EdgeInsets.all(0)), // <-- remove the margin
    "div": Style(alignment: Alignment.centerLeft, backgroundColor: Colors.red),
},

This fixed it :) !

Maybe for anyone who is more interested in that:

https://stackoverflow.com/questions/34550467/why-is-there-a-default-margin-on-the-body-element/34550634#:~:text=With%20the%20browser%20defaulting%20a,don't%20reset%20the%20layout.

Should have found that first. Thank you!

Can I only fix for ?
like to no margin other to use margin.
body is remove all margin.
I know of it that i can do with

tag to add margin.That's i need but some of my HTML are not in

tag, so how can i use for outer HTML or overall text.
If i use padding in HTML, padding also applied on tag.

style: {
"html": Style(backgroundColor: Colors.blue),
"body": Style(margin: EdgeInsets.all(0)), // <-- remove the margin
"div": Style(alignment: Alignment.centerLeft, backgroundColor: Colors.red),
},

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Zerocchi picture Zerocchi  路  5Comments

robert-virkus picture robert-virkus  路  3Comments

hunglv21 picture hunglv21  路  5Comments

The-Redhat picture The-Redhat  路  3Comments

Felix010203 picture Felix010203  路  4Comments