You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Ignoring the overlapping elements, why does the decline button never budge? What is wrong here?
The text was updated successfully, but these errors were encountered:
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 :)
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:
And this is what the web look like:
![image](https://private-user-images.githubusercontent.com/141991095/350669116-21a5b36a-8ada-49b1-8ea9-8f4439c49955.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1MDY4OTYsIm5iZiI6MTcyMTUwNjU5NiwicGF0aCI6Ii8xNDE5OTEwOTUvMzUwNjY5MTE2LTIxYTViMzZhLThhZGEtNDliMS04ZWE5LThmNDQzOWM0OTk1NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyMFQyMDE2MzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lNzMxN2IxNDIwOWNhZGZlYWI0MTMzYmFjNjRjNTE1YTFjNDA4ZjM5MTEyMWYxYmVhMTcxNzU3ODE1ZjE5ZWJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.R31S6M7vz6VXpisBg5xAb8pmV-F7hs6BZm-sk_fTmzA)
Ignoring the overlapping elements, why does the decline button never budge? What is wrong here?
The text was updated successfully, but these errors were encountered: