No flex option in the side panel
The gjs-preset-webpage plugin by default has no flex section so you have to write your own customStyleManger
Read full answer below ↓Question
I am using grapesjs plugins to build the side panel options and different elements. I am looking for this flex section in the side panel but there is none.
Is there any option that I need to enable for this any of the following plugins that I am using?
gjs-preset-webpage, grapesjs-lory-slider, grapesjs-tabs, grapesjs-tooltip, grapesjs-custom-code, grapesjs-typed, gjs-blocks-flexbox
I tried adding the customStyleManager in gjs-preset-plugin but that overrides all the default option that this plugin comes with I have to manually write all those options in customStyleManager I don't want to do that. Please help - thanks!
Answers (3)
The gjs-preset-webpage plugin by default has no flex section so you have to write your own customStyleManger
Change the _styles/index.js_ with the content given below. Also update the styles as required
`
export default (editor, config) => {
const sm = editor.StyleManager;
const csm = config.customStyleManager;
const oConfig = [
{
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: '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'],
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',
}
],
}
]
}
];
sm.getSectors().reset(csm && csm.length ? csm : oConfig);
}
`sm.getSectors().reset(csm)
Is what fixed it for me, I assume oConfig would work too. I don't understand why this is necessary... or more specifically, why the demo gets away with NOT doing it (unless I'm missing it).
I certainly seem to be rolling thru the common errors as I learn this platform, lol, I must have posted 30 times today on this package.
Explanation would be magical.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2364
[Question] How to add toolbar functionality to the layers panel.
I am trying to add the toolbar to the layers panel and I am not sure how to go about this. Is there any way to accomplish this? toolbar Whe...
Issue #3444
removeButton() causing error
Hi, I'm trying to remove a button from panel using this code editor.Panels.removeButton('options', 'fullscreen') . It removes the button bu...
Issue #2543
How to remove the right side bar?
<img width="1033" alt="Annotation 2020-02-02 032330" src="https://user-images.githubusercontent.com/6602723/73597835-77af0f00-456b-11ea-928...
Issue #3072
BUG:
is there any way to set the size of the "blocks"? because in IE11 the size of the blocks look different. IE11: Firefox/EDGE/Chrome:
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 →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.