Issue #2979💬 AnsweredOpened August 27, 2020by ghost1 reactions

Defaulting Style Manager values to em or %

快速解答by ghost1

Here you go, I hope it illustrates what I am trying to do https://codepen.io/ksn-systems/pen/LYNzdje thanks

Read full answer below ↓

Question

Version 16.17

Are you able to reproduce the bug from the demo?

[ ] Yes [ ] No

What is the expected behavior?

I can set up the style manager so that I can present all units, the deafult unit and the value of and parameter that uses a size value (font-size, line height padding etc.)

Describe the bug detailed

代码片段TEXT
When setting up the style manager to use only em and % for size related settings, whilst the units selector is changed, the value shown appears to me value x 16, so I set a value of 1 and it will result in a value of 16.

code:

const lineHeight = styleManager.getProperty('typography', 'line-height');
        lineHeight.set('units', [
            "",
            "em"
        ]);
        lineHeight.set('step', "0.1");
        lineHeight.set('min', 0.1);
        lineHeight.set('max', 100);

        lineHeight.set('unit', "");
        lineHeight.set('value', 1);

Here I would expect the line height to be set to 1 with a blank units value. but I get

![image](https://user-images.githubusercontent.com/60980627/91368477-4f676480-e85d-11ea-8f80-9df69afa9d55.png)




**What is the current behavior?**

Whist the presets work, the resulting value as shown in the style manager is showing the 'px' value






**Are you able to attach screenshots, screencasts or a live demo?**

[ X] Yes (attach)
[ ] No



This has been driving me nuts for ages.

thanks and this is a great tool.

Answers (3)

artfAugust 28, 2020

Hi @ksn-systems are you able to create a reproducible demo, please?

yucomdsJanuary 8, 2021

Same problem for me. I'm trying set to 20px the default font-size on editor load. Do you have a solution for this issue?

Related Questions and Answers

Continue research with similar issue discussions.

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.