I've tried every which way, simply pasting an embed iframe from youtube into the embed window of my TinyMCE editor results in the below code which does not render or work correctly in my browser.
To be quite honest I'm not even sure what this outputted garbage is?
TinyMCE output:
<p><img class="mce-object mce-object-iframe" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="560" height="315" data-mce-p-src="https://www.youtube.com/embed/GQ2BXqST758" data-mce-object="iframe" data-mce-selected="1"></p><div id="mceResizeHandlen" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: n-resize; margin: 0px; padding: 0px; left: 272px; top: 4.5px;"></div><div id="mceResizeHandlee" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: e-resize; margin: 0px; padding: 0px; left: 539.5px; top: 272px;"></div><div id="mceResizeHandles" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: s-resize; margin: 0px; padding: 0px; left: 272px; top: 539.5px;"></div><div id="mceResizeHandlew" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: w-resize; margin: 0px; padding: 0px; left: 4.5px; top: 272px;"></div><div id="mceResizeHandlenw" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: nw-resize; margin: 0px; padding: 0px; left: 4.5px; top: 4.5px;"></div><div id="mceResizeHandlene" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: ne-resize; margin: 0px; padding: 0px; left: 539.5px; top: 4.5px;"></div><div id="mceResizeHandlese" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: se-resize; margin: 0px; padding: 0px; left: 539.5px; top: 539.5px;"></div><div id="mceResizeHandlesw" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: sw-resize; margin: 0px; padding: 0px; left: 4.5px; top: 539.5px;"></div>
TinyMCE Settings
tinymce.init({
plugins: 'link image code',
relative_urls: false,
selector: "textarea",
content_css : "/static/css/style.css",
plugins : "media",
media_poster: false,
media_strict: false,
// theme_advanced_buttons1_add : "media",
theme_advanced_buttons1: "code",
extended_valid_elements : "iframe[src|width|height|name|align]"
});
Does anybody have any idea what I'm doing wrong here?
Related
how do i fix this
[Text](https://stackoverflow.com/fluttererror.png[Expected to find ')'][1])
),Positioned(
top: 504,
left: 320,
child: SvgPicture.asset('assets/images/ellipse2.svg', semanticsLabel: 'ellipse2'
);//line 59 error
),Positioned(
top: 782,
left: -77,
child: SvgPicture.asset('assets/images/ellipse3.svg',semanticsLabel: 'ellipse3'
);//line 64 error
what i've tried is adding ')' to line 59 and 64, putting const on the widget still the same error
The issue here seems simply that you put the semicolon at the end of your SvgPicture, you should replace those with a comma!
),Positioned(
top: 504,
left: 320,
child: SvgPicture.asset('assets/images/ellipse2.svg', semanticsLabel: 'ellipse2'
), //Comma goes here
),Positioned(
top: 782,
left: -77,
child: SvgPicture.asset('assets/images/ellipse3.svg',semanticsLabel: 'ellipse3'
), //Comma goes here
Change
),Positioned(
top: 504,
left: 320,
child: SvgPicture.asset('assets/images/ellipse2.svg', semanticsLabel: 'ellipse2'
);
),Positioned(
top: 782,
left: -77,
child: SvgPicture.asset('assets/images/ellipse3.svg',semanticsLabel: 'ellipse3'
);
to
),Positioned(
top: 504,
left: 320,
child: SvgPicture.asset('assets/images/ellipse2.svg', semanticsLabel: 'ellipse2'
),
),Positioned(
top: 782,
left: -77,
child: SvgPicture.asset('assets/images/ellipse3.svg',semanticsLabel: 'ellipse3'
),
I am trying to use media query in bottom padding so that the soft keyboard won’t cover the form on the modal bottomsheet but I am getting an invalid constant value error and a red line from the media Query. This is what I typed:
padding: const EdgeInsets.only( top: 10, left: 10, right: 10, bottom: MediaQuery.of(context).viewInsets.bottom + 10),
Remove the const keyword will fix the error...as getting a value from MediaQuery.of(context) you can't use a constant keyword.
e.g.
padding: EdgeInsets.only( top: 10, left: 10, right: 10, bottom: MediaQuery.of(context).viewInsets.bottom + 10),
You need to remove the const keyword. Because, MediaQuery.of(context).viewInsets.bottom + 10) is not static. It is a dynamic value. A dynamic value cannot be const.
you need to write:
padding: EdgeInsets.only( top: 10, left: 10, right: 10, bottom: MediaQuery.of(context).viewInsets.bottom + 10)
I have a simple Figma design which contains two layers
First layer with solid color: background: #003274;
Second layer with gradient:
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: radial-gradient(100% 245.99% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 0px;
Now I'm trying to implement this in Flutter code like this:
return new Container(
decoration: new BoxDecoration(
color: Color(0xff003274),
gradient: new RadialGradient(
colors: [Color.fromARGB(102, 255, 255, 255), Color.fromARGB(0, 255, 255, 255)],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
)
);
As result I got grey gradient in stead of blue gradient
Could you suggest me how to translate this Figma design whiht gradient to Flutter code?
Don't know whether this is the best way, but it works. Just wrap your Container within another Container, and set its color to the bottom layer solid color.
#override
Widget build(BuildContext context) {
return Container(
color: Color(0xff003274),
child: new Container(
decoration: new BoxDecoration(
gradient: new RadialGradient(
colors: [
Color.fromARGB(102, 255, 255, 255),
Color.fromARGB(0, 255, 255, 255)
],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
);
}
I'm having a hard time to put items under each other when a ListView is involved.
I've this code :
body:
Column(
children: [
Text('foo'),
Expanded(
child: ListView.builder(
controller: ...,
itemCount: ...,
itemBuilder: ...
)
),
Text('bar')
]
)
,
It gives me the result on the left, but I'd like the one on the right :
I tried to put the ListView in a Container (with an height: double.maxFinite) but its give me an : Bottom overflowed by X pixels.
Edit : Here is the result I'm trying to achieve (run the snippet in "full page") :
body {
font-size: 18px;
margin: 0;
padding: 0;
}
.mobile {
position: relative;
width: 320px;
margin: 0 auto;
border: 1px solid cyan;
max-height: 400px;
overflow-y: scroll;
padding-top: 41px;
}
.appbar {
position: fixed;
top: 0;
width: 300px;
background: rgba(0, 0, 0, 1);
color: white;
padding: 10px;
}
.text {
background: rgba(255, 0, 0, .3);
padding: 10px;
}
.list-view {
background: rgba(0, 255, 0, .3);
padding: 10px;
min-height: 500px;
}
<div class="mobile">
<div class="appbar">AppBar</div>
<div class="text">Text</div>
<div class="list-view">ListView</div>
<div class="text">Text</div>
</div>
You have to use a CustomScrollView
CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Text("Text"),
),
SliverList(
delegate: SliverChildListDelegate( [
Container(
height: 200.0,
decoration: BoxDecoration(color: Colors.orange),
),
Container(
height: 400.0,
decoration: BoxDecoration(color: Colors.pink),
),
Container(
height: 500.0,
decoration: BoxDecoration(color: Colors.blue),
)
]),
),
SliverToBoxAdapter(
child: Text("Text"),
),
],
)
Notice you can use a SliverChildListDelegate or a SliverChildBuilderDelegate
Try this one
body:
Column(
children: [
Text('foo'),
Expanded(
child: Container(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: .......,
itemCount: .....,
),
),
),
Text('bar')
]
)
,
This code worked for me.
You can add the top and bottom foo and bar as the first and last items of the list. The ListView will have list.length + 2 items.
body: Column(children: [
Text('foo'),
Expanded(
child: ListView.builder(
itemCount: list.length + 2,
itemBuilder: (context, index) {
if (index == 0)
return Text("foo");
else if (index < list.length + 1)
return Text("$index");
else
return Text('bar');
},
),
),
]),
I will create a table for my newsletter but I read that each client read in not same way the code...
So I would like to have a table that it will be responsive for all email service...
I make a small example..
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top; color: #000000; font-size: 15px; margin-top:25px; font-family: Arial">
<tbody>
<tr style="vertical-align: top; height: 40px">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 1px 2px 2px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 125px;">
<!--<![endif]-->
Vulcano
<!--[if !mso]><!- - -->
</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 2px 2px 1px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 100px;">
Ultima attivita'
<!--[if !mso]><!- - -->
</td>
</tr>
<tr style="vertical-align: top">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 1px 1px 2px; border-style: solid; border-color: #a8c1c1 #a8c1c1 #a8c1c1 #769e9e; padding: 3px 3px 3px 5px; width: 125px;">
<!--<![endif]-->Etna
<!--[if !mso]><!- - -->
</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 2px 1px 1px; border-style: solid; border-color: #a8c1c1 #769e9e #a8c1c1 #a8c1c1; width: 100px; padding: 3px 0px 3px 8px;">
<!--<![endif]-->2015
<!--[if !mso]><!- - -->
</td>
</tr>
<tr style="vertical-align: top">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; border-style: solid; border-color: #769e9e; border-width: 1px 1px 2px 2px; width: 125px; padding: 3px 3px 3px 5px;">
<!--<![endif]-->
<!--[if !mso]><!- - -->
</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; border-style: solid; border-color: #769e9e; border-width: 1px 2px 2px 1px; width: 100px; padding: 3px 3px 3px 5px;">
<!--<![endif]-->
<!--[if !mso]><!- - -->
</td>
</tr>
</tbody>
</table>
Here is the http://jsfiddle.net/s7n7exst/
What do yuo think about ?
Updated:
Overall, yes -- what you have would work. Your table would collapse in some outlook clients and if you continue adding on to this, you'll want to test your email using Litmus and/or EmailOnAcid to assure consistency.
I've fixed a couple things and now this should work
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0; border-collapse: collapse;vertical-align: top; color: #000000; font-size: 15px; Margin:25px 0 0 0; font-family: Arial">
<tr height="40" style="vertical-align: top; height: 40px">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 1px 2px 2px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 125px;">Vulcano</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 2px 2px 1px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 100px;">Ultima attivita'</td>
</tr>
<tr style="vertical-align: top">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 1px 1px 2px; border-style: solid; border-color: #a8c1c1 #a8c1c1 #a8c1c1 #769e9e; padding: 3px 3px 3px 5px; width: 125px;">Etna</td>
<td valign="middle" style="word-break: break-word; border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 2px 1px 1px; border-style: solid; border-color: #a8c1c1 #769e9e #a8c1c1 #a8c1c1; width: 100px; padding: 3px 0px 3px 8px;">2015</td>
</tr>
</table>