Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decline button is fixed in place and no styling works #202

Open
techy4shri opened this issue Jul 20, 2024 · 2 comments
Open

Decline button is fixed in place and no styling works #202

techy4shri opened this issue Jul 20, 2024 · 2 comments

Comments

@techy4shri
Copy link

I am using react-cookie-consent with two buttons, and while one of the buttons works completely fine and I can add styling easily to it, the Decline button is fixed in place and no matter what I do, the button won't budge.
Here's what my code looks like:

import React from 'react';
import CookieConsent from 'react-cookie-consent';
import { Link } from 'react-router-dom'; 

const CookieConsentBanner = () => {
  return (
    <CookieConsent
    location="bottom"
    buttonText="Accpet"
    cookieName="vigybagcookiebanner"
    style={{ background: "#2B373B" }}
    buttonStyle={{ color: "black", fontSize: "16px", padding: "10px 20px", left: "30px", right: "30px" }}
    expires={150} overlay
    aria-label="Cookie consent banner"
    role="dialog"
>
  This website uses cookies to enhance the user experience. By continuing, you agree to our Privacy Policy.{" "}
  <span style={{ fontSize: "16px" }}>
    <Link to="./privacy" style={{textDecoration: 'underline'}}>Learn more.</Link>
  </span>
  <button
    style={{
      float: "right",
      fontSize: "16px",
      background: "#ff0000",
      border: "0",
      color: "black",
      padding: "10px 20px",
      position: "relative"
    }}
    onClick={() => {
      alert("yay");
    }}
  >
    Decline
  </button>
</CookieConsent>
  );
};
export default CookieConsentBanner;

And this is what the web look like:
image
Ignoring the overlapping elements, why does the decline button never budge? What is wrong here?

@Mastermindzh
Copy link
Owner

Hey, you're using custom buttons :)
The one with the float: right will always be a little more difficult, floating elements are tricky.

You can use the built-in decline button and style that if you want:

<CookieConsent
  enableDeclineButton
  onDecline={() => {
    alert("nay!");
  }}
  declineButtonClasses=""
  declineButtonStyle=""
></CookieConsent>

If you don't pass the "clear styles" prop you'll be overwriting style instead of having to do it all yourself.
I recommend starting without styling as you'll find the button to be placed correctly already :)

@techy4shri
Copy link
Author

I will try that, thanks a lot for answering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants