Flutter_html: Remove underline from image link?

Created on 2 Jun 2020 · 6Comments · Source: Sub6Resources/flutter_html

Is there any way how to remove the underline from image wrapped in anchor but keep text links underlined?

Example:

Thanks.

bug

Source

lucien144

Most helpful comment

@ryan-berger Amazing, thanks! I found a workaround for now by adding custom class on the link that I style using the style property:

  String _tagAllImageLinks(String source) {
    Document document = parse(source);
    document.querySelectorAll('a > img').forEach((Element el) {
      el.parent.classes.add('image-link');
    });
    return document.body.innerHtml;
  }

Html(
     data: source,
     style: {
         ".image-link": Style(textDecoration: TextDecoration.none)
     }
);

lucien144 on 16 Jun 2020

👍2

All 6 comments

@lucien144 Nice catch. That definitely is not intended. I'll see if I can get working on that sometime this week.

ryan-berger on 7 Jun 2020

@lucien144 I've had to stop work on this for the day due to time limitations but I'll see if I can continue to work on this tomorrow. I'm getting somewhat close, but it is still definitely a WIP.

ryan-berger on 13 Jun 2020

@ryan-berger Amazing, thanks! I found a workaround for now by adding custom class on the link that I style using the style property:

  String _tagAllImageLinks(String source) {
    Document document = parse(source);
    document.querySelectorAll('a > img').forEach((Element el) {
      el.parent.classes.add('image-link');
    });
    return document.body.innerHtml;
  }

Html(
     data: source,
     style: {
         ".image-link": Style(textDecoration: TextDecoration.none)
     }
);

lucien144 on 16 Jun 2020

👍2

Thanks for the workaround. A solution within flutter_html would be great.

@ryan-berger What's the status of the pull request? :)

DFelten on 10 Aug 2020

Html(
data: source,
style : {
'a': Style(
textDecoration: TextDecoration.none,
padding: EdgeInsets.all(0),
margin: EdgeInsets.all(0)),
'img': Style(padding: EdgeInsets.all(0), margin: EdgeInsets.all(0)),
};
);

This style works for me well. Thank you