Setting border radius with an 'em' value.

Answers (3)

artf• December 14, 20190 reactions

How do you init/update the Style Manager?

ghost• December 15, 20190 reactions

Code SnippetTEXT

Hi . like this (for the fonts)

editor.on('load', function () {
....
styleManager = editor.StyleManager;
fontSize = styleManager.getProperty('typography', 'font-size');
units = ["em"];
fontSize.set('units', units);
styleManager.render();
....
}

In the above case, I want em as the only size option. I need to do the same with the radius setting as everything needs relative scaling.

thanks

artf• December 17, 20190 reactions

Ok, if you're updating via API you can do this:

const sm = editor.StyleManager;
// By default configuration, grapesjs has 2 `border-radius` properties, 1 for all sides
// and one of `composite` type with 4 inputs, so `getProperty` will return 
// an array with 2 types. I'm selecting the second one as it's a bit more complex
// than the first one (a simple input)
const brProperty = sm.getProperty('decorations', 'border-radius')[1];
// Now you have to update inner properties (`border-top-left-radius`, ...)
brProperty.get('properties').forEach(property => property.set('units', ['em']))

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Setting border radius with an 'em' value.

Question

Answers (3)

Related Questions and Answers

[QUESTION] Custom panel button that dynamically Enable/Disable user scripts

[QUESTION] Custom component property that is not a trait

add a font-size type prop

Same Design for all blocks

Paid Plugins That Match This Issue

Browse Plugin Categories