I just started using the new component functionality. Love how it works. However when I converted one of my commonly used element structures to a component, some elements in the component did not render properly.
Upon further inspection, I found that the reason is because the two elements that didn’t render properly had custom sizes for the img/figure set at the id level. When I inspected the resulting Bricks html however, it seems component id’s are converted to classes which can (and did in this case) lead to specificity problems.
My setup was to use a class for all images in the component, but 2 of the images needed custom sizes, so I styled those two at the id level, setting a custom size. The custom sizing which was supposed to be at the id level, was overridden by the sizing at the class level, making the id styling ineffective. Also, the issue does not reveal itself in the builder - only on the front end.
I am sure I can get around this using custom css and using !important on the two images, but this issue seems to reveal a bug or perhaps a weakness or oversight with respect to components and id’s.
thank you for getting in touch with us. I believe this is not a bug, and it works as intended (converting ID to class). Because you can have multiple instances of the same component on one page, and if we would keep IDs, that would mean that there would be multiple same IDs on a page, which is not allowed.
So, I’ll mark this as a NO BUG and you will have to override the settings using !important or creating a bit more specific selector.
Thanks for the explanation. It makes sense why id’s are converted - what doesn’t make sense is the possible css collisions that can occur as part of it. I personally don’t think I should have to change anything in my setup just to use components. Or at the very least, some documentation should be provided explaining this possible scenario. Converting to a class does not provide the same functionality as an id, since there isn’t a risk of specificity problems when using an id. Bricks has unknowingly introduced this issue into my design by just blindly converting id’s to classes with seemingly no mechanism for addressing a potential issue like what I’m seeing.
In my attempt to fix this issue, I added css using the Bricks css panel for the two elements in question, like this: %root% { height: 14.5em !important; }. This property fixed the issue but there is some problem with this as well. When I add the css to the main component, it did not flow out to the components on other pages. If I deleted those other components and re-added them, the change was there. But if I needed to adjust that css again a second time, the change would not appear, and I have to delete and re-add the component.
So it seems adding css at the “id” level on a component does not work as I think it should either.
I do understand this is an experimental feature though and some things may not be fully fleshed out.
I’ve confirmed this and I’ve created an internal bug report for this part. What seems to solve it also, is to just change some styling on that other page. Does not need to be on a component - just so that it “forces” it to regenerate a styles.