Unit don't change on Composite Type
For fix this issue, you must change PropertyView.targetUpdated() and change this line let targetValue = this.getTargetValue({ ignoreDefault: 1 }); by this one let targetValue = this.getTargetValue({ ignoreDefault: 1, ignoreCustomValue: 1 }); Other fix, in PropertySelectView, you need to add setValue. When the value is...
Read full answer below ↓Question
Hi,
I have an error on your demo :(
1- In the style, on the "Build your templates without coding" text, set TOP to 5px 2- In the same element, set Dimension > Margin > Top to 10px 3- In the "Hover me" button, set TOP to 1% and Margin > Top to 2% 4- Select "Build your templates ..."
The TOP value change top 5px -> OK The Margin > Top value change to 10% -> :(
Globaly, the unit change with the interger is out of a composite.
Answers (2)
For fix this issue, you must change PropertyView.targetUpdated() and change this line
let targetValue = this.getTargetValue({ ignoreDefault: 1 });
by this one
let targetValue = this.getTargetValue({ ignoreDefault: 1, ignoreCustomValue: 1 });
Other fix, in PropertySelectView, you need to add setValue. When the value is !important, the input.val is set to 'value !important' and the select is empty
/**
* Update the element input.
* Usually the value is a result of `model.getFullValue()`
* @param {String} value The value from the model
* */
setValue: function setValue(value) {
var model = this.model;
var val = (0, _underscore.isUndefined)(value) ? model.getDefaultValue() : value;
var input = this.getInputEl();
if (typeof val === 'string')
val = val.replace(' !important', '').trim();
input && (input.value = val);
},
Thanks @WebEtSolutions I'm not totally sure about the solution but the bug is confirmed
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4576
Clicking 'wrap for style' button affects the inner components of other components inside the same text box
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link...
Issue #4310
Style Manager is inaccurate when using combined CSS selectors which contains "bout" and componentFirst = true
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 100 Reproducible demo link https://...
Issue #532
Error when trying to hide some elements from the Layers Manager
Steps:Go to http://grapesjs.com/demo.htmlOpen Layer Manager.Click on the "Build your templates without coding" text element.Click on the "e...
Issue #5593
Layer manager not refreshing on page change
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? MS Edge 120.0.2210.91 Reproducible demo li...
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 →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.