Renaming an ID to something like 'footer' seems to change its design

Bricks Version:
Browser: Safari 15.6
OS: macOS 12.5
URL: Staging site

I noticed recently when I tried to rename the footer element ID to ‘footer’, it changes the design, but changing it to anything else it then behaves like normal. I presume certain element names may be reserved/protected? But in that case, it should throw a message if it’s not meant to be used. If it’s allowed (as I assume it should be), then the bug would be that it’s changing the design once used.

Video can be seen here:

From the frontend, here’s what it looks like when normal (element ID is not ‘footer’):

From the frontend, here’s what it looks like when element ID is set to ‘footer’ name:

Hi Dustin,
I’m not able to reproduce the issue.

You seem to have applied styles to #footer before - at least you can find them in the stylesheet and probably they are causing the difference.

Best regards,

Ahhh, interesting. So I had a CSS ID name of “footer” (on the element itself under the CSS tab > CSS ID), but there was no custom CSS code or anything like that. Was almost like there’s a conflict between the name of the element ID and the name of the CSS ID on the element, they can’t be the same name I guess. If true, then it might be a better user experience if users were able to see a note (or won’t save) changes if there’s ID name conflicts, may be good to consider that for future releases. :slight_smile:

I assume you styled that element with the default ID before you gave that element a new ID. Then you give that element a different ID. So, that was why the styling was lost?

I think I had assigned a CSS ID simply because I thought that was how to name them, and that didn’t actually rename the element itself. So once I tried to rename the element I had forgotten about the CSS ID named earlier and even though it’s the exact same name it seemed to be an issue. Interestingly, renaming the element ID the way I did it most recently also sets the CSS ID to the same name too. So I guess the bug is if doing it in reverse order I suppose, where one sets a CSS ID without renaming the element itself, then renaming the element to match the CSS ID will break it.