Issue #3525Opened June 9, 2021by anlumo0 reactions

FEAT: In Style Manager, Allow Requiring the Default Setting

Question

What are you trying to add to GrapesJS?

The CSS property float only makes sense for position: static; elements, which happens to be the default. I only want to display the float radio selector if the position is not set to anything else.

However, if I add require: ['static']; to the property definition, the setting is only shown when I explicitly set the position to static, not when I leave it at the default (which is also static).

Is there an alternative at the latest version?

  • Yes (describe the alternative)
  • No

Is this related to an issue?

  • Yes (Give a link to the issue)
  • No

Answers (2)

artfJuly 5, 20210 reactions

Hi @anlumo, did you try to extend float definition with something like this requires: { position: ['static'] }?

anlumoJuly 8, 20210 reactions

image

Yes. It seems to work fine after reloading the page, but when you toggle the position it stops working and looks like in the screenshot.

The definition is as follows:

{
    name: "Layout",
    open: false,
    buildProps: ['position', 'top', 'bottom', 'left', 'right', 'float'],
    properties: [
        {
            name: "Position",
            property: 'position',
            type: 'radio',
            list: [
                { value: 'static' },
                { value: 'absolute' },
                { value: 'relative' },
            ],
            defaults: 'static',
        },
        {
            property: 'top',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            property: 'bottom',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            property: 'left',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            property: 'right',
            type: 'integer',
            units: ['mm', 'in', '%'],
            defaults: 'auto',
            fixedValues: ['auto'],
            requires: { position: ['absolute', 'relative'] },
        },
        {
            name: "Float",
            property: 'float',
            type: 'radio',
            list: [
                { value: 'none' },
                { value: 'left' },
                { value: 'right' },
            ],
            requires: { position: ['static'], },
        },
    ],
}

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.