Hello I am trying to make a cookie banner using React JS. I tried using paddings and alignment but was unable to meet the requirement. May you please help me and what to add with my inline-styline
I downloaded the NPM: npm i react-cookie-consent
import CookieConsent, { Cookies } from "react-cookie-consent";
<CookieConsent
location="bottom"
buttonText="Yes, I agree"
cookieName="GLA"
style={{ background: "#262626" }}
buttonStyle={{ justifyContent: "left", background: "#3f7edf", color: "#FFFFFF", fontSize: "13px" }}
expires={150}
>
<p styles={{ textAlign: "center", color: "#FFFFFF", fontSize: "24px" }}>We use cookies on this site to enhance your user experience</p>
<p styles={{ textAlign: "center", color: "#FFFFFF" }}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the website's privacy policy.</p>
</CookieConsent>
Current Design:
Here is my goal and expecting result:
try to add this in your style
style={{background: "#262626", maxWidth:"1200px", display:"flex", justifyContent:"center", alignItems:"flex-end"}}
Related
I've only found dated responses for this question. I'm trying to change the highlighted background for today. I have the <FullCalendar> component inside <Box>:
<Box flex={"1 1 100%"} ml={"15px"}>
<FullCalendar
height={"75vh"}
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin
]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
}}
initialView={"dayGridMonth"}
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={handleDateClick}
eventClick={handleEventClick}
eventsSet={(events) => setCurrentEvents(events)}
initialEvents={[
{
id: "aapl_q1_2023",
title: "AAPL Q1 2023",
date: "2023-02-02"
},
{
id: "amzn_q4_2023",
title: "AMZN Q4 2023",
date: "2023-02-02"
},
]}
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
/>
</Box>
I'm able to manually change the color by toggling the css line item
But the sx isn't overriding it:
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
It seems that FullCalendar accepts a CSS variable --fc-today-bg-color for customizing background color of "today", according to their customization guide.
If the preference is to use a custom color defined with MUI, perhaps try set the CSS variable with a sx prop on the MUI Box containing FullCalendar.
Minimized live example: stackblitz
Example:
<Box sx={{ ["--fc-today-bg-color"]: pink[500] }}>
<FullCalendar />
</Box>
Setting this by sx prop on FullCalendar itself could also work if the component has already been wired up with MUI by its styled() utility.
So, recently, I've been playing around with Material-UI, trying to get a feel for it. I've been using their 'Sign-In Side' template. Everything is working well, except for one thing. Below is a sample of the template code I want to change (Just note, I have only added the relevant area)
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
},
image: {
backgroundImage: 'url(https://source.unsplash.com/random)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
},
Specifically, the backgroundImage part. I have a local image saved in the path from this '../Login/BackgroundImg1.jpg' and it is imported correctly. I added it to the bottom of the page to see if it was rendering correctly and it was, but whenever I try to add it to this code - nothing, just a white screen - no errors, just blank.
I've tried every method I can think of, and have scoured Stack, YouTube and other random blogs to try and find what I'm doing wrong. Right now, I'm pretty sure I'm missing something small and just need someone else to look it over.
Any assistance would be greatly appreciated.
EDIT: Please see the changes I have attempted below:
image: {
backgroundImage: 'url(../Login/BackgroundImg1.jpg)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
},
I've also tried the below since I had imported the image using both url and src
image: {
backgroundImage: 'url(${BackgroundImg1})',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
},
As I mentioned above, I'm sure I'm missing something simple because I've been staring at this code for a day now.
Oh, and here is an image of the Dev Tools, styles for the element.
I am using the native-base button and trying to download the image by pressing the button. It's is working perfectly fine in IOS but not working in Android. Here is my code
<View
style={{
marginVertical: hp("2%"),
marginHorizontal: wp("15%"),
textAlign: "center",
width: "100%",
}}
>
<Button
onPress={() => downloadFile()}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
<Text
style={{
color: "black",
fontSize: RFPercentage(2.1),
fontFamily: "BalsamiqSansBold",
}}
>
ADD TO PHOTOS
</Text>
</Button>
</View>
The downloadFile() function is called in IOS when the button is being pressed but it's not working in the case of Android.
I also tried console logging on press like this
<Button
onPress={() => console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
It's working in IOS but not in the case of Android.
Also if I directly call the function on onPress like this in Android it automatically logs Button Clicked without being pressed. I tried to figure all the possible ways to resolve it but I am not getting the exact cause of this issue.
<Button
onPress={console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
Maybe you are facing an issue regarding TouchableOpacity in android.
You can import ToucahableOpacity from 'react-native-gesture-handler' and hopefully this will help a lot.
You can import like this
import {TouchableOpacity} from 'react-native-gesture-handler'
import {TouchableOpacity } from 'react-native'
<TouchableOpacity
style={styles.button}
onPress={handleSaveLimitValue}
>
<Text
color={colors.white}
weight={TextWeight.DEMI_BOLD}
size={16}
style={styles.buttonText}
>
Save
</Text>
</TouchableOpacity>
Using TouchableOpacity of native module worked for me instead of using import {BaseButton} from react-native-gesture-handler
Hope my answer may help you.
I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.
In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.
Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?
My current component looks liks this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
UPDATE
For many scenarios, my later answer (which avoids using TextField and therefore has no side-effects on FormControl context) may be more appropriate: How can I set an static outlined div similar to Material-UI's outlined textfield?
There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:
import React from "react";
import TextField from "#material-ui/core/TextField";
const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
const OutlinedDiv = ({ children, label }) => {
return (
<TextField
variant="outlined"
label={label}
multiline
InputLabelProps={{ shrink: true }}
InputProps={{
inputComponent: InputComponent
}}
inputProps={{ children: children }}
/>
);
};
export default OutlinedDiv;
The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:
import React from "react";
import ReactDOM from "react-dom";
import OutlinedDiv from "./OutlinedDiv";
import Avatar from "#material-ui/core/Avatar";
import deepOrange from "#material-ui/core/colors/deepOrange";
import deepPurple from "#material-ui/core/colors/deepPurple";
import red from "#material-ui/core/colors/red";
import green from "#material-ui/core/colors/green";
import blue from "#material-ui/core/colors/blue";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<div className="App">
<OutlinedDiv label="Color Picker">
<Grid container justify="center" alignItems="center">
<Avatar style={{ backgroundColor: deepOrange[500] }} />
<Avatar style={{ backgroundColor: deepPurple[500] }} />
<Avatar style={{ backgroundColor: red[500] }} />
<Avatar style={{ backgroundColor: green[500] }} />
<Avatar style={{ backgroundColor: blue[500] }} />
</Grid>
</OutlinedDiv>
<br />
<br />
<OutlinedDiv label="Custom Outlined Thing">
You can put whatever you want in here.
</OutlinedDiv>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
No need to write Outlined div component and all. As we can achieve this using FormControl, FormLabel and Formgroup.
If you follow the Outlined div logic your input fields will lose focus.
The below solution is very easy and quick you just need to wrap your code:
<FormControl component="fieldset" className="fieldset">
<FormLabel component="Legend">Title</FormLabel>
<FormGroup row>
{/*Your Input fields e.g TextField or Select e.t.c*/}
</FormGroup>
</FormControl>
Now using useStyles apply some css:
fieldset: {
width: '100%',
marginBottom: 10,
padding: 10,
border: '1px solid #ddd',
borderRadius: 5
}
The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks
SVG Element
Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.
The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.
Plain old border with a background on the label
This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.
Fieldset and legend
This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.
Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!
Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
background-color:'inherit' **(just add this line)**
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
How to align text of a Material UI input text? Following does not seem to work. Im using version 1.x
import {Input} from 'material-ui';
//didn't work
<Input
className="max-w-128 inline-block"
style = {{textAlign: 'center'}}
id="input-quantity"
inputStyle={{ textAlign: 'center' }}
//tried hintStyle as suggested in a bug
hintStyle={{ width: '600px', textAlign: 'center' }}
value={this.state.currentRecord.quantity}
onChange={this.handleCurrentRecordTextChange('quantity')}
/>
you just need to use (with styles overriding) :
classes={{
input: classes.inputCenter
}}
and the styles should be:
const styles = theme => ({
inputCenter: {
textAlign: "center",
color: "red"
}
});
go through the documentation from here: https://material-ui.com/api/input/#css-api
here is a working example: https://codesandbox.io/s/n9nr9x8xo0
hope this will help you.
Please Use
<Typography align="centre|right" />
If you have specific font already set then use above solution with withStyle HOC