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)
Hi @anlumo, did you try to extend float definition with something like this requires: { position: ['static'] }?

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.
Issue #2211
[QUESTIONS] How to set style for pseudo elements (:after and :before)
Hi, I add STATE in style manager :before and :after but all the styles are applied to the component.
Issue #2383
Custom component not pulling through style on first add.
Fiddle replicating the issue: https://jsfiddle.net/gd8mo3e4/1/ I have a custom component for creating a gallery of pdf documents. There's a...
Issue #3123
FEAT: Add 'inline-flex' to display selector in Style Manager
What are you trying to add to GrapesJS? Display style inline-flex. Description: Currently the display selector of the Style Manager has onl...
Issue #3067
FEAT: remove 'display: block' inline style from Style Manager sectors and properties
What are you trying to add to GrapesJS? Improve visibility for Style Manager sectors and properties. Describe your feature request detailed...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.