NO BUG: Divs don't reflect their size in editor when applying smaller width/height dimensions

[digisavvy]

Browser: All
OS: macOS=

This is likely not a bug but functions as intended but it would be nice to know why.

This is a minor gripe of mine that has persisted across the many versions of Bricks Builder. When I set a div with a width of say 20px and height of 20px, the div doesn’t size correctly in the editor. It does however display as expected on the frontend.

For two divs: Div 1 is 10px x 10px. In the editor it will not display at this size. On the front end it does. Div 2 is 100px x 100px and in the editor it displays at the correct size and also does on the frontend. Fabulous.

This rule accounts for that:

:where(.brx-draggable.brx-empty), :where(.brx-draggable:empty) {
    min-height: 90px;
    min-width: 90px;
    outline: 1px solid var(--bricks-border-color);
    outline-offset: -1px;
}

I’m curious why this is the way it is. It makes it minorly inconvenient when styling for empty divs that are made into shapes and such.

[wplit]

@digisavvy

it would be nice to know why.

So you can see the div in the builder when first adding it in and have an area large enough to drag other elements inside of it, without it it’d be difficult to drag elements inside them, the divs would be invisible when they are first added to the page as they’d have zero height/width.

Oxygen builder does the same thing with empty divs. It’s not ideal when you’re trying to create smaller things as you mention, as you have to set the min-height/min-width as well as the width/height to see the actual size in the builder.

But that’ll be the reason. (also why there’s the outline, for making it easy to see)

[timmse]

Hi Alex,
Thanks for asking!

David already explained it well: if empty divs, blocks, etc. had no minimum height and width, you couldn’t select them on the canvas or drag other elements into them.

If you need empty divs, unset their min-width and min-height.

Best regards,
timmse

[digisavvy]

Thanks for the helpful reply, fellas.