[BUG] Incorrect border radius controls
Question
Changing border-bottom-left-radius prop changes bottom right radius, and vise versa.
Reproducing:
- Go to https://jsfiddle.net/szLp8h4n
- Add, for instance, any image
- Try to change
border-bottom-left-radiusprop in Decorations section
Playing around config didn't help much, the best one fixes naming problem but reorder controls themselves. So, the config like:
{
property: 'border-radius',
type: 'composite',
properties: [
{
name: 'Border Top Left Radius',
property: 'border-top-left-radius',
type: 'integer',
defaults: '0px',
min: 0,
units: ['px', '%'],
},
{
name: 'Border Top Right Radius',
property: 'border-top-right-radius',
type: 'integer',
defaults: '0px',
min: 0,
units: ['px', '%'],
},
{
name: 'Border Bottom Left Radius',
property: 'border-bottom-right-radius',
type: 'integer',
defaults: '0px',
min: 0,
units: ['px', '%'],
},
{
name: 'Border Bottom Right Radius',
property: 'border-bottom-left-radius',
type: 'integer',
defaults: '0px',
min: 0,
units: ['px', '%'],
},
],
},
...results in:
(notice bottom radius controls reorder)
Answers (1)
Correct, the current default order is wrong but as the composite type follows the CSS order of the border-radius property the result will be exactly like the one achieved by you. In case you need to change the ordering of composite properties I'd suggest adding this CSS style
.gjs-sm-property__border-bottom-right-radius {
order: 1;
}
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6679
BUG: Border Radius Bottom Left & Right is switched in Style Manager
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143 Reproducible demo link https:/...
Issue #4411
BUG: XSS when add class name to Selector Manager
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v102 Reproducible demo link https:/...
Issue #6324
BUG: sorter.setDragHelper is not a function on block drag
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? 131.0.6778.86Reproducible demo link https://...
Issue #6096
BUG: Resizable Box Disappears on Component Reselection
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...
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.