CSS styles interfering with Bricks Builder forms

  • Resolved wpmad

    (@wpmad)


    7 months, 3 weeks 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 7 months, 3 weeks 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)

    7 months, 3 weeks 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)

    7 months, 3 weeks 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)

    7 months, 3 weeks 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)

    7 months, 3 weeks ago

    Awesome. Thank you!

    Plugin Support brijeshk89

    (@brijeshk89)

    7 months, 3 weeks 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.