WIP: Having position relative on all Bricks elements and containers adds limitation

Screen Shot 2022-05-20 at 9.17.23 am

Having so many levels of relative positioning prevents all types of things with absolute positioning, as elements are only going to be positioned relative to their direct parent. Unless we manually change all the higher up parent levels back to static.

Often we need to position nested elements to be positioned relative to a higher up container, like a section or a header. If there’s a way to bring ‘static’ positioning as the default, this would be ideal.

(i can see why it’s being used in the builder, for the margin/padding/action controls etc. So not an easy one to change). but I think for long term, having the UI separate to the page flow, appended to the body - and then using JS to calculate their position relative the whole page -, instead of relying on absolute positioning inside of the elements may be a better approach and would make all the relative positioning not necessary) Also would solve the problem with opacity not being able to be visible in the builder, as the UI wouldn’t inherit the opacity anyway.

edit - there’s also the additional problem of currently not being able to see absolute positioned elements in their correct position in the builder, due to the need for the relative positioning to hold the UI in place. So we have to keep checking on the front end and this means the builder isn’t going to represent the correct design. This wouldn’t be the case if the UI was separated from the elements.

14 Likes

@thomas is there anyway to address this whilst also not breaking sites that have relied on this already? :pray:

2 Likes

Hey David,

Moving away from having the element actions, resizing, etc. controls inside the individual element is something I will start working on in the coming days. I will update this post as soon as I have some news.

@Deanphillips Changing the default element position to static is just one line of code in Bricks, but it might break layouts of sites that rely on the relative position, but haven’t selected it explicitly from the dropdown. We could run, of course, run this sort of logic through the new Converter :thinking:

14 Likes

That’s great news. There was also an additional issue some were having trying to use :nth-child on containers, which was obviously picking up the UI elements as child elements, so this would solve all of this in one go.

6 Likes

I agree with @wplit. This is pretty important to me.

5 Likes

any possibility of elements being changed to static for 1.5 stable @thomas @timmse.

Yes, static as the default value would be great and necessary!

The fix itself is just one line of code. But we need to perform more internal tests first. We’ll remove the element position: relative in 1.5.1.

In the mean-time you can add the following global custom CSS to your site to apply position “static” to every element:

[class*="brxe-"] {
	position: static;
}
11 Likes

Very cool … I think quite a few people including addon devs will be very happy!

A thought on this is add the option to the settings that can change it. Then it can be left as ‘relative’ as not to break existing, but allow the user to pick/change it to suit their needs. :slight_smile:

My thought really is ‘anything’ that a end user could possibly want to be different from the default in terms of a variable item like this should have a setting that can be managed. Then you don’t break anything existing on updates, but allow for a change and allow it to be exported into a JSON or whatever that can be imported for future sites as defaults.

Thanks for the workaround @thomas!

The default value as per the html spec should be static - shown here - “static - The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.”

If there were to be a switch then it should be set to static as default and then be able to set to something else if the user wants. Existing sites settings could be run through a converter so as not to break sites.

3 Likes

If I have “clickable parent CSS” for any block or div! The whole page becomes clickable!
This after adding the code!

Looking forward to the fixes in 1.5.1. :raised_hands: :tada:

You probably need to use position relative in certain situations. Like if you have an absolute positioned link as a child element that need to take up the entire space of the parent container - in this case, setting everything to static will break it and the child element will now become positioned relative to the entire page (or whichever container is set to relative) rather than the direct parent.

This is why it can’t be just changed globally without many of the existing elements first being tested. Some of them will need relative, some of them won’t.

Anywhere where you’ve been using position absolute, you’d need to make sure the correct container has position relative.

3 Likes