i am working with a Box element which contains Textfield elements. I was wondering If i can create a circle for each TextField. I have tried using css like below.
circle: {
display: 'flex',
width: '100px',
height: '100px',
color: 'green',
borderRadius:'50%',
},
<TextField
className={classes.circle}
id='consumptionInkWhPerkmAltitudeGain -number'
label='Altitude Gain(TomTom)'
type='number'
value={customConsumptionDetails.consumptionInkWhPerkmAltitudeGain }
color = "secondary"
onChange={handleConsumptionDetailsParameterChange('consumptionInkWhPerkmAltitudeGain')}
InputLabelProps={{
shrink: true,
}}
/>
but without luck.
For a better understanding of what I want to do I will leave a picture bellow.
How can I create something similar with what is in the picture?
You can try to add the styling with className, you can easily modify the code below, hope it helps!
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<textarea />
<span className="circle"></span>
</div>
);
}
In the styles.css:
.circle {
display: flex;
width: 30px;
height: 30px;
background-color: green;
border-radius: 50%;
}
Live demo here: https://codesandbox.io/s/ecstatic-bardeen-dd4h1w?file=/src/App.js
Related
I understand that question looks pretty easy, but I haven't found anything helping me.
I have an image inside a div, and I want that image to be centered in that div even if I add, for example, a text.
Here is some code and images to better understand that problem :
If I only have my image in my div (with solid border), all is well :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
But adding a text, I can't figure out how to keep the image in the center of the div (well aligned with the grey lines) and the text below that :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
Here is a full example :
<div style = {{display: flex;
flex-direction: row;
height: 90%;
width: 100%;
justify-content: center;
align-items: center;}}>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
<Line/>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
<Line/>
</div>
Thank you in advance for your precious help !
You can use flexbox to do this very easily.
I've created an example here for you (doesn't include styled-components but your issue is not the styled components anyway) https://codesandbox.io/s/solitary-night-7859bz
you should use flex-direction: column;
import { React } from "react";
export default function Demo() {
return (
<>
<div
style={{
display: "flex",
flexDirection: "column",
height: "90%",
width: "100px",
border: "2px solid",
justifyContent: "center",
margin: "0 auto",
alignItems: "center"
}}
>
<div>
<img
height="75px"
width="75px"
src={
"https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
}
/>
</div>
<div>test</div>
</div>
</>
);
}
Im making a container with 3 cards. Each card (brown-ish color in example) has a header with title (sand-buiscuit color) and content (blue one).
What I want to acheive is when the cards are closed (click on header in example), the content (blue) is transitioning to height 0, and so the only visible part is header.
Also when the card is open I want to show the available content but only then, when there is enough available space in container (green).
When 3 cards are open, they have the same height (expand evenly in container), and remaining content (blue) is scrolled.
Is it possible to make?
I prepared a demo codesandbox
I made a small code example using styled-components (just because i like it), you can easily change it to regular react components with css, but this demonstrates the idea.
I created 3 boxes, each box has a default height(40px) and after clicking (which opens it) its height is set to: 100%.
Wrapping all of this boxes with flex container does the trick.
import styled from 'styled-components';
import React, { useState } from 'react';
const MyComponent = () => {
return (
<Container>
<BoxContainer height={100} number={1} />
<BoxContainer height={100} number={2} />
<BoxContainer number={3} />
</Container>
);
};
export default MyComponent;
const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 200px;
height: 400px;
overflow: hidden;
border: 1px solid black;
background-color: blue;
`;
const BoxContainer = ({ number, height = '100' }) => {
const [open, setOpen] = useState(false);
return (
<Box style={{ height: open ? '100%' : '40px' }} onClick={() => setOpen(!open)}>
Box: {number}
{open && <p>Content</p>}
</Box>
);
};
const Box = styled.div`
width: 100%;
overflow: scroll;
background-color: #00b8a2;
border: 1px solid red;
`;
sandbox example here: https://codesandbox.io/s/boxes-fill-container-evenly-when-opened-btlvb
I have a website and I want to add a custom error page when javascript is disabled. I added a component inside inside _document.js
<body>
<noscript>
<ErrorPage />
</noscript>
</body>
Then that page is defined like this
function ErrorPage() {
const requiredMsg = 'Javascript Required'
const errorText = 'We’re sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.'
return (
<div style={{ width: '100%', textAlign: 'center' }} >
<img style={{ width: '100%' }} src={ 'img.svg' } />
<Typography component='h1' style={{ fontFamily: 'lato, sans-serif', color: '#1074C3' }}>{requiredMsg}</Typography>
</div>
)
}
export default ErrorPage
It looks good, but I need to add some media specific styling and elements to the page.
Like it needs to take up entire space in mobile, while in desktop, it should just occupy the middle 200 px height, and rest should have a faded background.
How is that possible? Can this be achieved?
I was able to achieve this by placing the styles within inside _document
<Html>
<noscript>
<style>{`
div.errorPage {
background-color: rgba(0,0,0,0.3);
}
/* This is mobile */
#media (max-width:600px) {
div.errorPage {
background-color: none;
width: 100%;
text-align: center;
height: auto;
}
}
`}</style>
</noscript>
I have a search bar in a React application (using material-ui v4). I have a TextField which I always want to be centered horizontally no matter what I put to the left or right of it.
Essentially I want to position everything else relative to the TextField and have it "anchored" in the middle.
I thought this would be simple in CSS but I can't crack it!
I can get the TextField centering on its own no problem with Grid Layout but can't get the button to position relative to it.
This is what I have so far. I feel like I'm missing something really obvious!
import React from "react";
import "./styles.css";
import Paper from "#material-ui/core/Paper";
import TextField from "#material-ui/core/TextField";
import Button from "#material-ui/core/Button";
import { makeStyles } from "#material-ui/styles";
const useStyles = makeStyles({
actionBarRootStyle: {
display: "grid",
justifyItems: "center",
padding: 20
},
textFieldRootStyle: {
border: "1px solid red"
},
buttonRootStyle: {
//?????
}
});
export default function App() {
const styles = useStyles();
return (
<Paper
square={true}
classes={{
root: styles.actionBarRootStyle
}}
>
{/* How do I position this button relative to the TextField so the TextField always stays centered ?*/}
<Button
variant="contained"
color="primary"
classes={{
root: styles.buttonRootStyle
}}
>
Button to the Left
</Button>
<TextField
variant="outlined"
classes={{
root: styles.textFieldRootStyle
}}
/>
</Paper>
);
}
If I'm following correctly, the textfield and button should be within the same container and if you make the container position: relative you can then make the button position: absolute and move its width to the left. Then you can just center the container to achieve the desired effect.
:root {
--TEXTFIELD_WIDTH: 300px;
}
.container {
display: flex;
justify-content: center;
}
.controls {
position: relative;
}
.buttons-left {
position: absolute;
transform: translateX(-100%);
}
.buttons-right {
position: absolute;
transform: translateX(var(--TEXTFIELD_WIDTH));
}
input[type="text"] {
width: var(--TEXTFIELD_WIDTH);
}
<div class="container">
<div class="controls">
<div class="buttons-left">
<button>First</button>
<button>Second</button>
</div>
<div class="buttons-right">
<button>Third</button>
<button>Fourth</button>
</div>
<input type="text" />
</div>
</div>
i have a specific use case, and i am not sure what component or technology i can use for that.
I have a set of items in a wrapped flexbox:
xxx|xxxxxxxx|xx|xxxxxxxxx|
x|xxxxxx|xxxxxxxxxxxxxxx|xxx|
xxxxx|xxxxxxxxxx|XXXX|xxxx
xxxx|xxxxx|xxxxxxxxx
The items have different widths, but fixed heights. And their should be wrapped, so that there is no horizontal overflow. And there is alway one "active" item, which has a diffent style.
For now flexbox works perfecly fine for me. Here's a demo:
.wpr {
width: 150px;
display:flex;
flex-flow: row wrap;
border: 1px solid green;
}
span {
position: relative;
display: inline-block;
padding: 0 2px;
}
span:after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 16px;
background-color: #111;
}
.special {
color: green;
}
<div class="wpr">
<span>xxx</span>
<span>xxxxxx</span>
<span>xxx</span>
<span>xxxxx</span>
<span>xxx</span>
<span>xxxxx</span>
<span class="special">XXX</span>
<span>xx</span>
<span>xxxxxxxx</span>
<span>xx</span>
</div>
But now i want to also highlight the complete row of the active item. The problem is, that i dont what items are in which row, because flexbox ist handling that.
For example:
xxx|xxxxxxxx|xx|xxxxxxxxx|
x|xxxxxx|xxxxxxxxxxxxxxx|xxx|
xxxxx|xxxxxxxxxx|XXXX|xxxx
xxxx|xxxxx|xxxxxxxxx
Just to see also in which row the active item is.
I am using React and Flexbox. But im not sure if thats possible with flexbox.
I could render every single item into a hidden DOM element to get its size and calculate the row-number by myself, but this is very hacky....
Do you know a trick to do that? Or maybe a different layout system, which is able to do that?
Edit: Examplecode:
<div style={{ display: "flex", flexWrap: "wrap", maxWidth: "960px" }}>
{this.state.myItems.map((w, i) => (
<div className={`${i !== this.state.activeIndex ? "playerword" : "playerword-active"}`} style={{ marginTop: "15px", fontSize: "1.3em", cursor: "pointer" }}>
<div className="olBack" style={{ padding: "3px" }}>
{w[0]}
</div>
</div>
))}
</div>
-Alexander