Issue #2105Opened June 28, 2019by wldyslw0 reactions

[BUG] Incorrect border radius controls

Question

Changing border-bottom-left-radius prop changes bottom right radius, and vise versa. Reproducing:

  1. Go to https://jsfiddle.net/szLp8h4n
  2. Add, for instance, any image
  3. Try to change border-bottom-left-radius prop 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: image (notice bottom radius controls reorder)

Answers (1)

artfJuly 11, 20190 reactions

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.

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.