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.
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 tried to achieve this widget but nothing is working:
is it possible to create it?
You can try something like this, in case you are trying to put a widget over another.
Container(
width: 100,
margin: EdgeInsets.only(left: 16, right: 16, top: 16),
child: Stack(
children: [
Positioned(
top: 20,
child: Container(
height: 100,
width: 100,
color: Colors.red
)
),
Positioned(
top: 0,
left: 10,
right: 10,
child: Container(
height: 40,
color: Colors.green
)
),
]
),
)
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"),
),
),
),
),
]
)
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!