search

Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.8k stars 873 forks source link

[BUG]Can't change the background color of an iframe #1230

Open CpHeat opened 1 year ago

CpHeat commented 1 year ago

Describe the bug: Not sure if it is a bug but I understood we should be able to set styles for iframes and it works to some extent but I can't get the background-color to change to anything else than white

HTML to reproduce the issue: data: '''

    ''',

style: { "body": Style(margin: EdgeInsets.zero, padding: EdgeInsets.zero), "iframe": Style(backgroundColor: Colors.pink), }

Expected behavior: The iframe contains a rounded widget, so the background behind it should be pink but is white instead

Device details and Flutter/Dart/flutter_html versions: API 33, flutter_html 2.2.1

A picture of a cute animal (not mandatory but encouraged) IMG_20221207_220647

erickok commented 1 year ago

Did you try setting the pink to the iframe content? The iframe will render as WebView and I don't think it can have NO background color (be transparent) and so setting a pink background in the iframe won't work as the WebView will show a white again.

I hope I make myself clear; let us know if you need more instructions.

CpHeat commented 1 year ago

Thanks for answering ! You mean like this :

style: { "iframe": Style(backgroundColor: Colors.blue, color: Colors.pink,), }

or inside html like this :

I tried both but it's still showing white background. Am I doing it wrong ?

Sub6Resources commented 1 year ago

The WebView widget itself controls the background color. If I remember right there's an option in the WebView constructor to change the background color. If so, we can definitely tie that into our style system.