Browser: Chrome 110
OS: Windows
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
Hello,
In the Comments element, the checkbox icon and text are in the wrong position, which affects the user interface.
Hi @Fred.foden,
thank you for your report. I can replicate this locally and I agree - having text in the same line would be better.
As a temporary workaround, you can use the following CSS:
.comment-form-cookies-consent{
display: flex;
gap: 0.4rem;
}
.comment-form-cookies-consent label{
margin-bottom: 0;
}
Best regards,
Matej
We’ve fixed this issue in Bricks 2.0.2 now available as a one-click update in your WordPress Dashboard.
Please take your time to read the changelog entry before updating: Bricks 2.0.2 Changelog – Bricks, and let us know if you continue to experience issues.
Thank you for your attention to this report. This issue has been generally resolved. However, the alignment issue still exists.
1- It would be great if .p.comment-form-cookies-consent was in flex.
2- The .wp-comment-cookies-consent class has a 5px bottom margin by default, which causes alignment issues.
Best regards
Hi @Fred.foden,
do you have a link to the page, where I can see this?
I’ve just checked locally, but I don’t have that margin-bottom:5px set there. Surely, it’s also not totally aligned for me as well :(, but I would like to gather all the information possible, before created another task.
Thank you,
Matej
Hi @Matej,
The margin is not visible visually. I changed the p tag to flex and then the margin became visible. That’s why you didn’t find it. But if you look at the label inside the p tag as per the screenshot below, it has a margin of 5px.
Thanks!
Hmm, do you have a link to the page? I don’t see this margin style in my local install.
Matej
Hi @Matej,
I don’t think you can see it. That’s why I didn’t post it at first. Link
Best regards
Yeah, I don’t see this. I mean, I see the form, but this works only if I’m logged it, but if I logged out (of my try bricks profile), then I can’t access it.
Locally, I don’t have this gap on the element:
Do you have a link to your website maybe?
Matej
Hi @Matej,
Okay. I will look into it further to see what exactly the problem is. My website is on localhost. That’s why I can’t share the link.
Best regards
Ok, understandable. Let me know if you figure it out.
Thanks,
Matej
Hi @Matej,
Sorry I didn’t pay attention to your screenshot. You selected the focus tag, that’s why there is no margin.
If you select the <label> tag that has the text “Save my name, email, and website in this browser for the next time I comment.”, there is a margin that all labels actually know this margin to. So I’m not sure how that can be resolved.
Ahh, ok. I see it now. I do have a 5px bottom margin as well, but the funny thing is, even if I remove it, it doesn’t change anything on my local install.
Do you have a way to create a test site/page, where I can see that online? Not try.bricksbuilder.io, as there I can’t be logged out to see it, though.
The thing that I wonder is why it’s different in my and in your case, and this is something that I would like to figure out. 
Thank you,
Matej
The thing that I wonder is why it’s different in my and in your case, and this is something that I would like to figure out.
Yes, removing this margin doesn’t make a difference for me either. But if you set the parent p tag (.comment-form-cookies-consent) to flex, then it will show its margin.
Ah, I see. So if we implement your first suggestion, we also need to take care of this one. This makes sense.
Matej
Thank you @Matej,
This problem exists even for the shipping method name in the Checkout order review element Which causes the text to be out of alignment.
Should I create a new topic for it?
Hi @Fred.foden,
yes please. Feel free to also tag me there, then I can create an internal task for this.
Matej
This bug still exists in 2.0.2 unfortunately. If the label text is longer than the box it is in, it moves under the check box.
