CSS styles interfering with Bricks Builder forms

Resolved wpmad
(@wpmad)

9 months, 1 week ago
There appears to be a conflict between Bricks Builder and your plugins form CSS.

The Cookie Admin form CSS is overriding the default Bricks Builder form CSS, breaking the form layouts, as shown in the screenshots below:

https://prnt.sc/6ZFfNtdDO0_w
https://prnt.sc/jx7SMq_ft5J_
https://prnt.sc/vZ3GcuPebecP

Specifically this CSS:
```
.form-group {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 16px;
}
```
and
```
.form-group input, .form-group select, .form-group textarea {
    width: 95%;
    padding: 8px 12px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
```
Please address this and update your plugin to use prefixes for your CSS selectors, or more specific CSS selectors to prevent conflict like this from occurring. It is not best practice to use CSS selectors that are so broad – hence the conflicts.
- This topic was modified 9 months, 1 week ago by wpmad. Reason: added code
The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support brijeshk89
(@brijeshk89)

9 months, 1 week ago

Thank you for reporting this.

I agree there should definitely be prefixes in place for all the css classes. We will add the same and release the updated version in a couple of days.
Thread Starter wpmad
(@wpmad)

9 months ago
Thanks for the update. However, I just noticed that it’s also conflicting with the Bricks Builder interface itself, again, due to a lack of CSS specificity.

The following CSS rules are causing issues:
```
label, input {
    padding: 5px;
    margin-right: 5px;
}
```
```
.title {
    text-align: center;
    color: black;
    font-weight: 600;
    font-size: 20px;
    margin: 2px;
}
```
Screenshots below:
https://prnt.sc/1-BB8791A82O
https://prnt.sc/CKfxroxIVlzt

It looks like the CSS for the plugin needs an overhaul.
Plugin Support brijeshk89
(@brijeshk89)

9 months ago

Hi,

We have made the required changes to add prefix to all the classes. Most of the css classes did have a prefix some of them were missed.

The new version is currently under testing and will be released asap.

Thread Starter wpmad
(@wpmad)

9 months ago

Awesome. Thank you!

Plugin Support brijeshk89
(@brijeshk89)

9 months ago

Hi,

We released CookieAdmin 1.0.8 yesterday which includes the css fix and it should not conflict anymore with any theme or design.

Please upgrade to the latest version.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS styles interfering with Bricks Builder forms’ is closed to new replies.

Tags