Style manager not working(styles has no effect)
Thanks for reporting this, @aliibrahim123. Thanks for sharing your report about style manager not working(styles has no effect). To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS version number Browser and OS information Any error mess...
Read full answer below ↓Question
hi, i am working on a plugin that will add all the properties of css3 into grapesjs. but all time i use the style manager the style do not apper, version: 1.17.19 css parser: grapesjs-parser-postcss
style manager sectors
`[{ name: 'General', buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], properties:[{ name: 'Alignment', property: 'float', type: 'radio', defaults: 'none', list: [ { value: 'none', className: 'fa fa-times'}, { value: 'left', className: 'fa fa-align-left'}, { value: 'right', className: 'fa fa-align-right'} ], }, { property: 'position', type: 'select'}, { name: 'display', property: 'display', type: 'select', defaults: 'none', list: [{value: 'inline', name: 'inline'}, {value: 'block', name: 'block'}, {value: 'contents', name: 'contents'}, {value: 'flex', name: 'flex'}, {value: 'grid', name: 'grid'}, {value: 'inline-block', name: 'inline-block'}, {value: 'inline-flex', name: 'inline-flex'}, {value: 'inline-grid', name: 'inline-grid'}, {value: 'inline-table', name: 'inline-table'}, {value: 'list-item', name: 'list-item'}, {value: 'run-in', name: 'run-in'}, {value: 'table', name: 'table'}, {value: 'table-caption', name: 'table-caption'}, {value: 'table-column-group', name: 'table-column-group'}, {value: 'table-header-group', name: 'table-header-group'}, {value: 'table-footer-group', name: 'table-footer-group'}, {value: 'table-row-group', name: 'table-row-group'}, {value: 'table-cell', name: 'table-cell'}, {value: 'table-column', name: 'table-column'}, {value: 'table-row', name: 'table-row'}, {value: 'none', name: 'none'}, {value: 'initial', name: 'initial'}, {value: 'inherit', name: 'inherit'},], } ], },{ name: 'Dimension', open: false, buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'], properties: [{ id: 'flex-width', type: 'integer', name: 'Width', units: ['px', '%'], property: 'flex-basis', toRequire: 1, },{ property: 'margin', properties:[ { name: 'Top', property: 'margin-top'}, { name: 'Right', property: 'margin-right'}, { name: 'Bottom', property: 'margin-bottom'},
{ name: 'Left', property: 'margin-left'}
],
},{
property : 'padding',
properties:[
{ name: 'Top', property: 'padding-top'},
{ name: 'Right', property: 'padding-right'},
{ name: 'Bottom', property: 'padding-bottom'},
{ name: 'Left', property: 'padding-left'}
],
}],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'],
properties:[
{ name: 'Font', property: 'font-family'},
{ name: 'Weight', property: 'font-weight'},
{ name: 'Font color', property: 'color'},
{
property: 'text-align',
type: 'radio',
defaults: 'left',
list: [
{ value : 'left', name : 'Left', className: 'fa fa-align-left'},
{ value : 'center', name : 'Center', className: 'fa fa-align-center' },
{ value : 'right', name : 'Right', className: 'fa fa-align-right'},
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'}
],
},{
property: 'text-decoration',
type: 'radio',
defaults: 'none',
list: [
{ value: 'none', name: 'None', className: 'fa fa-times'},
{ value: 'underline', name: 'underline', className: 'fa fa-underline' },
{ value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough'}
],
},{
property: 'text-shadow',
properties: [
{ name: 'X position', property: 'text-shadow-h'},
{ name: 'Y position', property: 'text-shadow-v'},
{ name: 'Blur', property: 'text-shadow-blur'},
{ name: 'Color', property: 'text-shadow-color'}
],
}],
},{
name: 'Decorations',
open: false,
buildProps: ['opacity', 'border-radius', 'border', 'box-shadow', 'background', 'background-color',],
properties: [{
type: 'slider',
property: 'opacity',
defaults: 1,
step: 0.01,
max: 1,
min:0,
},{
property: 'border-radius',
properties : [
{ name: 'Top', property: 'border-top-left-radius'},
{ name: 'Right', property: 'border-top-right-radius'},
{ name: 'Bottom', property: 'border-bottom-left-radius'},
{ name: 'Left', property: 'border-bottom-right-radius'}
],
},{
property: 'box-shadow',
properties: [
{ name: 'X position', property: 'box-shadow-h'},
{ name: 'Y position', property: 'box-shadow-v'},
{ name: 'Blur', property: 'box-shadow-blur'},
{ name: 'Spread', property: 'box-shadow-spread'},
{ name: 'Color', property: 'box-shadow-color'},
{ name: 'Shadow type', property: 'box-shadow-type'}
],
},],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
properties: [{
property: 'transition',
properties:[
{ name: 'Property', property: 'transition-property'},
{ name: 'Duration', property: 'transition-duration'},
{ name: 'Easing', property: 'transition-timing-function'}
],
},{
property: 'transform',
properties:[
{ name: 'Rotate X', property: 'transform-rotate-x'},
{ name: 'Rotate Y', property: 'transform-rotate-y'},
{ name: 'Rotate Z', property: 'transform-rotate-z'},
{ name: 'Scale X', property: 'transform-scale-x'},
{ name: 'Scale Y', property: 'transform-scale-y'},
{ name: 'Scale Z', property: 'transform-scale-z'}
],
}]
},{
name: 'Flex',
open: false,
properties: [{
name: 'Flex Container',
property: 'display',
type: 'select',
defaults: 'block',
list: [
{ value: 'block', name: 'Disable'},
{ value: 'flex', name: 'Enable'}
],
},{
name: 'Flex Parent',
property: 'label-parent-flex',
type: 'integer',
},{
name : 'Direction',
property : 'flex-direction',
type : 'radio',
defaults : 'row',
list : [{
value : 'row',
name : 'Row',
className : 'icons-flex icon-dir-row',
title : 'Row',
},{
value : 'row-reverse',
name : 'Row reverse',
className : 'icons-flex icon-dir-row-rev',
title : 'Row reverse',
},{
value : 'column',
name : 'Column',
title : 'Column',
className : 'icons-flex icon-dir-col',
},{
value : 'column-reverse',
name : 'Column reverse',
title : 'Column reverse',
className : 'icons-flex icon-dir-col-rev',
}],
},{
name : 'Justify',
property : 'justify-content',
type : 'radio',
defaults : 'flex-start',
list : [{
value : 'flex-start',
className : 'icons-flex icon-just-start',
title : 'Start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-just-end',
},{
value : 'space-between',
title : 'Space between',
className : 'icons-flex icon-just-sp-bet',
},{
value : 'space-around',
title : 'Space around',
className : 'icons-flex icon-just-sp-ar',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-just-sp-cent',
}],
},{
name : 'Align',
property : 'align-items',
type : 'radio',
defaults : 'center',
list : [{
value : 'flex-start',
title : 'Start',
className : 'icons-flex icon-al-start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-al-end',
},{
value : 'stretch',
title : 'Stretch',
className : 'icons-flex icon-al-str',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-al-center',
}],
},{
name: 'Flex Children',
property: 'label-parent-flex',
type: 'integer',
},{
name: 'Order',
property: 'order',
type: 'integer',
defaults : 0,
min: 0
},{
name : 'Flex',
property : 'flex',
type : 'composite',
properties : [{
name: 'Grow',
property: 'flex-grow',
type: 'integer',
defaults : 0,
min: 0
},{
name: 'Shrink',
property: 'flex-shrink',
type: 'integer',
defaults : 0,
min: 0
},{
name: 'Basis',
property: 'flex-basis',
type: 'integer',
units: ['px','%',''],
unit: '',
defaults : 'auto',
}],
},{
name : 'Align',
property : 'align-self',
type : 'radio',
defaults : 'auto',
list : [{
value : 'auto',
name : 'Auto',
},{
value : 'flex-start',
title : 'Start',
className : 'icons-flex icon-al-start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-al-end',
},{
value : 'stretch',
title : 'Stretch',
className : 'icons-flex icon-al-str',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-al-center',
}],
}],}
]`
### result
`* { box-sizing: border-box; } body {margin: 0;}@media (max-width: 100%){#i5f6{padding:100px 0 1000px 0;display:inline;margin:1000px 0 0 8px;}}`Answers (1)
Thanks for reporting this, @aliibrahim123.
Thanks for sharing your report about style manager not working(styles has no effect). To help the team investigate and prioritize this:
Please provide:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- Steps to reproduce the issue
What helps most:
- Minimal code example (not your full project)
- Screen recording or screenshot showing the issue
- Expected vs actual behavior clearly stated
- GrapesJS configuration you're using
With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3294
FEAT: Adding options to properties list array in style manager
Hi, How can I add buildProps to properties list such that when an option is selected, the properties of that option will be displayed An ex...
Issue #3642
multiple page manager resets device manager
Hi, I have a small issue with the page manager. I want all the pages to have a fixed resolution. Height and width figures come from an API...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Issue #3377
StyleManager options repeating 2 times
Version: 0.16.45 If i add grapejs-preset-js, then stylemanager repeats each option 2 times. Here is the jsfiddle link where you can check t...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.