Gjs-css-rules invalid sort
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.
Read full answer below ↓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 #5173
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"...
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...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.