[Editor] gjs-css-rules invalid sort
Question
Hi,
On the latest version 0.15.10, we have a problem with the css generator. Devices is configured like this :
mediaCondition: 'max-width',
deviceManager: {
devices: [
{
name: 'small',
width: '40em',
},
{
name: 'medium',
width: '64em',
},
{
name: 'large',
}
]
},
When I add a rule like background-color, on the real css I have
<style>
@media (max-width: 40em)
.id-usr-ix0a {
background-color: #ff0000;
}
@media (max-width: 64em)
.id-usr-ix0a {
background-color: #828282;
}
.id-usr-ix0a {
background-color: #000000;
}
</style>
This order is perfect. But on the javascript style (for editor) I have
<div id="gjs-css-rules"></div>
<div id="gjs-css-rules-40"></div>
<div id="gjs-css-rules-64"></div>
So my CSS result on editor is
<style>
@media (max-width: 64em)
.id-usr-ix0a {
background-color: #828282;
}
@media (max-width: 40em)
.id-usr-ix0a {
background-color: #ff0000;
}
.id-usr-ix0a {
background-color: #000000;
}
</style>
And the style under 40em is the 64em ....
Have you an idea of the correction ?
Thanks a lot !
Flo.
Answers (2)
Re sorry !
So when attribute mediaCondition is on min-width on the editor configuration, we need to sort gjs-css-rules on the render for get the good order on the editor
CssRulesView.js -> after line 126 -> prs.sort() if it's mobile first
Thanks Bye Flo.
You can use the priority property in your devices definition
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1913
[BUG] Specifying background-size in background's properties breaks grapesjs
Using latest versions of grapesjs (0.14.55) and grapesjs-preset-webpage (0.1.10), I have configured my editor as such: The library crashes...
Issue #1228
Can't reset CSS code which has parent or child.
Tested on both npm and cdn GJS Version - 0.14.20 (latest) OS - Mac Browser - Chrome Problem If CSS class name has a parent or child like #p...
Issue #5173
BUG: editor.Css.setRule API not working as expected, it is not updating the rule existing rule.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 112.0.5615.137 (Official Build) (a...
Issue #3339
Question: How to add different aspect ratios to mobile devices in the device manager.
We are working on a cms system that uses grapes js. We came up with a condition where we couldn't add aspect ratio in the "mediaCondition"...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.