You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
- Support
- Forum
- JCE Editor
- display:flex via Custom CSS File
Support is currently Online
Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)
From 09:00 To 17:00 Europe/London (BST)
Hi Ryan,
on a certain project I am using the option of a Custom CSS File. This works perfectly.
In this CSS I am using display:flex on a div-structure, which is not working within the editor as expected,
as it is overwritten by
/components/com_jce/editor/tiny_mce/plugins/visualblocks/css/visualblocks.css
A workaround in my CSS is doing the job: display: flex !important;
But maybe you find a smarter solution for this in future updates. (?)
Just to let you know.
Best,
Boris
on a certain project I am using the option of a Custom CSS File. This works perfectly.
In this CSS I am using display:flex on a div-structure, which is not working within the editor as expected,
as it is overwritten by
/components/com_jce/editor/tiny_mce/plugins/visualblocks/css/visualblocks.css
mceVisualBlocks address, .mceVisualBlocks article, .mceVisualBlocks aside, .mceVisualBlocks blockquote, .mceVisualBlocks dd, .mceVisualBlocks div, .mceVisualBlocks dl, .mceVisualBlocks dt, .mceVisualBlocks figure, .mceVisualBlocks footer, .mceVisualBlocks h1, .mceVisualBlocks h2, .mceVisualBlocks h3, .mceVisualBlocks h4, .mceVisualBlocks h5, .mceVisualBlocks h6, .mceVisualBlocks header, .mceVisualBlocks nav, .mceVisualBlocks ol, .mceVisualBlocks p, .mceVisualBlocks pre, .mceVisualBlocks section, .mceVisualBlocks ul {
display: block;
…
}
A workaround in my CSS is doing the job: display: flex !important;
But maybe you find a smarter solution for this in future updates. (?)
Just to let you know.
Best,
Boris
needs to have the display:block … (?)
No they don't, so this will be removed in the next update.
display:flex on the block element will affect the visual blocks display however.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Please try JCE Pro 2.6.27 RC2 - https://www.joomlacontenteditor.net/downloads/editor/item/jce-pro-dev
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Tested … sorry to say, but JCE Pr 2.6.27 RC2 doesn't fix this issue.
the display: block; still overwrite my display:flex;
/components/com_jce/editor/tiny_mce/plugins/visualblocks/css/content.css
the display: block; still overwrite my display:flex;
/components/com_jce/editor/tiny_mce/plugins/visualblocks/css/content.css
mceVisualBlocks address, .mceVisualBlocks article, .mceVisualBlocks aside, .mceVisualBlocks blockquote, .mceVisualBlocks dd, .mceVisualBlocks div, .mceVisualBlocks dl, .mceVisualBlocks dt, .mceVisualBlocks figure, .mceVisualBlocks footer, .mceVisualBlocks h1, .mceVisualBlocks h2, .mceVisualBlocks h3, .mceVisualBlocks h4, .mceVisualBlocks h5, .mceVisualBlocks h6, .mceVisualBlocks header, .mceVisualBlocks nav, .mceVisualBlocks ol, .mceVisualBlocks p, .mceVisualBlocks pre, .mceVisualBlocks section, .mceVisualBlocks ul {
display: block;
margin: 2px 0;
border: 1px dashed #BBB;
box-sizing: border-box;
padding: 2px;
}
In this CSS I am using display:flex on a div-structure, which is not working within the editor as expected,
Is the flex style assigned to the div via a class, or applied to all div tags?
Just because you're not paranoid doesn't mean everybody isn't out to get you.
via class at the surrounding div-container
If go for div.flexcontainer {display: flex !important; …}
or switch off via element-inspector .mceVisualBlocks div { display: block; }
it works as I expect.
From my point of view it's the question, if all that selections
/components/com_jce/editor/tiny_mce/plugins/visualblocks/css/content.css
needs to have the display:block … (?)
I am not sure ... there might be a reason why to do so (?)
<div class="flexcontainer">
<a ...><img ... /></a>
<a ...><img ... /></a>
...
</div>
div.flexcontainer {display: flex; …}
div.flexcontainer a {flex-grow: 0; flex-basis: auto; align-self: stretch; width: 25%; … }
If go for div.flexcontainer {display: flex !important; …}
or switch off via element-inspector .mceVisualBlocks div { display: block; }
it works as I expect.
From my point of view it's the question, if all that selections
/components/com_jce/editor/tiny_mce/plugins/visualblocks/css/content.css
.mceVisualBlocks address, .mceVisualBlocks article, .mceVisualBlocks aside, .mceVisualBlocks blockquote, .mceVisualBlocks dd, .mceVisualBlocks div, .mceVisualBlocks dl, .mceVisualBlocks dt, .mceVisualBlocks figure, .mceVisualBlocks footer, .mceVisualBlocks h1, .mceVisualBlocks h2, .mceVisualBlocks h3, .mceVisualBlocks h4, .mceVisualBlocks h5, .mceVisualBlocks h6, .mceVisualBlocks header, .mceVisualBlocks nav, .mceVisualBlocks ol, .mceVisualBlocks p, .mceVisualBlocks pre, .mceVisualBlocks section, .mceVisualBlocks ul
{ display: block; … … }
needs to have the display:block … (?)
I am not sure ... there might be a reason why to do so (?)
needs to have the display:block … (?)
No they don't, so this will be removed in the next update.
display:flex on the block element will affect the visual blocks display however.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!