When my form submits I use this to copy the contents of tinymce to the text area it has replaced for validation purposes.
var content = tinyMCE.activeEditor.getContent();
$('#article').val(content);
The problem is, the content of the editor is the following on startup (although I see nothing in the editor):
<span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,serif; font-style: italic; font-weight: 100;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,sans-serif; font-style: italic; font-weight: 100;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,serif; font-style: italic; font-weight: 400;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,sans-serif; font-style: italic; font-weight: 400;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,serif; font-style: italic; font-weight: 600;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,sans-se...ont-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,serif; font-style: normal; font-weight: 400;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,sans-serif; font-style: normal; font-weight: 400;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,serif; font-style: normal; font-weight: 600;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,sans-serif; font-style: normal; font-weight: 600;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,serif; font-style: normal; font-weight: bold;">BESbswy</span><span style="position: absolute; top: -999px; left: -999px; font-size: 300px; width: auto; height: auto; line-height: normal; margin: 0; padding: 0; font-variant: normal; font-family: proxima-nova,sans-serif; font-style: normal; font-weight: bold;">BESbswy</span>
Does anyone know why this is happening and how I can prevent it?
Your editor content is not visible due to its styling:
top: -999px; left: -999px; is outside the visible part of the editor iframe!
Related
I need a container that has these borders (those in the corners).
This is my code:
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 8),
left: BorderSide(color: Colors.black, width: 8),
),
),
padding: EdgeInsets.all(15),
height: 265,
width: 265,
margin: EdgeInsets.symmetric(
vertical: size.height * 0.1,
horizontal: size.width * 0.1,
),
child: Placeholder(),
),
But it looks like this:
How can I make the border shorter? Thanks
You can use Stack.
Stack(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 8),
left: BorderSide(color: Colors.black, width: 8),
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black, width: 8),
right: BorderSide(color: Colors.black, width: 8),
),
),
),
),
Container(
padding: EdgeInsets.all(15),
height: 265,
width: 265,
margin: EdgeInsets.symmetric(
vertical: 16,
horizontal: 16,
),
decoration: BoxDecoration(
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0, 1),
blurRadius: 4,
spreadRadius: 0,
)
],
),
child: Container(),
),
],
)
I have container, with some shadow, and I want SizedBox inside with shadow for effect, that it's inside of container. Although, the inside SizedBox's shadow overlaps the parent container shadow. How to fix this? Basically, it would be sufficient to have on child's SizedBox shadow only on top and bottom, but I didn't found a way how to do this.
Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 7,
)
]),
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(
children: [
Container(
margin: EdgeInsets.all(20), child: Text('Some text')),
SizedBox(
child: Container(
padding: EdgeInsets.all(10),
decoration:
BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
)
]),
child: Column(children: [Text('bruh')]),
),
width: double.infinity,
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Text('Aaaa'),
)
],
)
),
),
)
);
If you use a css file set the style as:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
i have column and inside column i have 3 widget, HtmlWidget ,Transform.Scale, and HtmlWidget, inside Transform.Scale i have image, this is the code, i want make the image overflow from their top widget and bottom widget
SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
// Container(
// child: HtmlWidget(
// """
// <div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
// """,
// ),
// ),
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: HtmlWidget(
"""
<div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
""",
),
),
Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 100,
child: Transform.scale(
transformHitTests: true,
scale: 3,
child: Center(
child: Image(
image: AssetImage("lib/assets/images/example.jpeg"),
),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: HtmlWidget(
"""
<div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
""",
),
),
],
),
)
after i change that code, the top still same
You can use a Stack like this
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 100,
),
),
),
Container(
child: Transform.scale(
transformHitTests: true,
scale: 3,
child: Center(
child: Image(
image: AssetImage("lib/assets/images/example.jpeg"),
),
),
),
),
]
)
I'm trying to create a container which has a yellow border on the left, but grey around the remainder and which keeps the borderRadius. I'm trying to use this as container for drop-down menu, as I can't create a border directly on that control.
This is what it should look like:
On the BoxDecoraction, I use the Border() method to specify the left border color.
Container(
width: 400,
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Color.fromRGBO(255, 167, 38, 1),
width: 5),
right: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
top: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
bottom: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
),
borderRadius: BorderRadius.all(Radius.circular(10))
),
But if I then try to use borderRadius, it throws an error and doesn't render. It seems if I use the Border() and specify sides directly it break, but if I use border.all() it works.
How can I set borderRadius and still have left border different width/color?
How to solve?
you can use ClipRRect
your code with this solution:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
width: 400,
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Color.fromRGBO(255, 167, 38, 1),
width: 5),
right: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
top: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
bottom: BorderSide(
width: .5,
color: Color.fromRGBO(116, 102, 102, .5)),
),
),
)
also these may be useful:
https://api.flutter.dev/flutter/widgets/ClipRRect-class.html
https://www.youtube.com/watch?v=eI43jkQkrvs
It might be a late, but dropping this answer it might help someone,
ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
border: Border.all(color: Colors.grey, width: 1)),
child: Row(
children: [
Container(
height: 75,
width: 8,
color: Colors.grey,
),
const Expanded(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Text('What do you plan to do?'),
),
)
],
),
),
),
This code shows the result:
in the thumbnaviagtor there is a div:
<div class="w" style="transform: perspective(2000px);"><img u="thumb"
this is causing a error in chrome and safari. it hides the thumbnail until i deactivate the css transform in the developer-tools. how can i fix this, i haven't found any api-functions to change this?
thumbnail-div:
<div u="thumbnavigator" class="jssort01" style="position: absolute; width: 600px; height: 100px; left: 0px; bottom: -303px;"><div style="position: absolute; top: 0px; left: 0px; width: 600px; height: 100px; transform-origin: 0px 0px 0px; transform: scale(1);"><div class="jssort01" style="position: relative; width: 600px; height: 100px; left: 0px; bottom: -303px; top: 0px; overflow: visible;"><div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 184px; top: 14px; width: 232px; height: 72px; z-index: 0;"><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; display: none;"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px;"><div class="w" style="transform: none;"><img u="thumb" src="upload/EnWsYCFTANzmdQ0Jx1onjoDWxNpxnz_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;" class=""></div><div class="c"></div></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; display: none;"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px;"><div class="w" style="transform: none;"><img u="thumb" src="upload/4XpweYLARCgtPrfeD4TaFgEuVMuGDL_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;" class=""></div><div class="c"></div></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; display: none;"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px;"><div class="w" style="transform: none;"><img u="thumb" src="upload/45fUDCINpncp14LD3w09C1DHCrMBOi_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;" class=""></div><div class="c"></div></div></div><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div><div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 184px; top: 14px; width: 232px; height: 72px; z-index: 0;"><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; opacity: 0; background-color: rgb(0, 0, 0);"></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; position: absolute; overflow: hidden; transform: perspective(2000px);"><div u="prototype" class="pav" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px; transform: perspective(2000px);"><div class="w" style="transform: perspective(2000px);"><img u="thumb" src="upload/EnWsYCFTANzmdQ0Jx1onjoDWxNpxnz_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; transform: perspective(2000px);" class=""></div><div class="c" style="transform: perspective(2000px);"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 80px; position: absolute; overflow: hidden; transform: perspective(2000px);"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px; transform: perspective(2000px);"><div class="w" style="transform: perspective(2000px);"><img u="thumb" src="upload/4XpweYLARCgtPrfeD4TaFgEuVMuGDL_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; transform: perspective(2000px);" class=""></div><div class="c" style="transform: perspective(2000px);"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 160px; position: absolute; overflow: hidden; transform: perspective(2000px);"><div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0px; left: 0px; transform: perspective(2000px);"><div class="w" style="transform: perspective(2000px);"><img u="thumb" src="upload/45fUDCINpncp14LD3w09C1DHCrMBOi_t.jpeg" style="width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; transform: perspective(2000px);" class=""></div><div class="c" style="transform: perspective(2000px);"></div></div><div style="width: 72px; height: 72px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div></div></div></div></div>
Please set $HWA to false to disable hardware acceleration.
var options = {
...,
$ThumbnailNavigatorOptions: {
...
$HWA: false,
...
}
};
I will disable hardware acceleration for thumbnails by default for later updates.