I have a drop down menu button that sits in a span:
Don't mind that it's not horizontally centered (that's just a poor screen shot). What I want to do is vertically center it, but not by using position. Instead I would like to shift it down by a pixel or two. How can I do this?
Here's my styling:
<span
className={ 'arrow-down' }
style={{
float: 'right',
display: 'block',
height: '12px',
lineHeight: '12px',
width: '12px',
borderRadius: '30px',
backgroundColor: '#ffbf44',
color: 'black',
textAlign: 'top',
fontSize: '1.25em',
}}/>
You can use margin-top:
<span
className={ 'arrow-down' }
style={{
float: 'right',
display: 'block',
height: '12px',
lineHeight: '12px',
width: '12px',
borderRadius: '30px',
backgroundColor: '#ffbf44',
color: 'black',
textAlign: 'top',
fontSize: '1.25em',
marginTop: '2px'
}}/>
This is effectively what #AllanJiang proposed with paddingTop, but margin won't affect the clickable size of the element, if that's an issue.
You can try use flex box positioning:
spanStyle: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 2, <--- in case you want to adjust the position manually
}
Related
I have a webpage using parallax for its title section, but the title gets partially obscured when scrolling.
The simplified code is here:
https://codesandbox.io/s/aged-microservice-0yb5xd?file=/src/App.js
<div
style={{
top: 0,
left: 0,
right: 0,
width: "100vw",
height: "100vh",
overflowX: "hidden",
overflowY: "scroll",
perspective: "1px",
perspectiveOrigin: "0 0",
position: "absolute"
}}
>
<div
style={{
position: "relative",
zIndex: -2,
transformOrigin: `0 0`,
transform: "translateZ(-3px) scale(4)",
height: `480px`,
backgroundColor: "red"
}}
/>
<div
style={{
transformStyle: "preserve-3d",
position: "absolute",
width: "100vw",
height: `480px`,
transformOrigin: `0 0`,
transform: "translateZ(-1px) scale(2)",
top: 0,
zIndex: -1,
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
<div
style={{
fontSize: "120px",
lineHeight: "180px",
backgroundColor: "blue"
}}
>
Title fits on two lines
</div>
</div>
<div>
<div
style={{
backgroundColor: "purple",
position: "sticky",
width: "100%",
zIndex: 1,
height: 800
}}
/>
</div>
</div>
Here's what it looks like before the visual artifact appears:
And here's after scrolling a bit:
The artifact disappears if I remove the text with a plain div, or if I remove the "backgroundColor: purple", which makes me think that this is the result of an interaction between, at minimum, the parallax, the text, and the backgrounds.
I can repro this in Chrome but not in Firefox. Is this a bug? (And if so, where do I report it?)
I am trying to align the items in a div (that is within an MUI Select styled component):
const SelectStyle = styled(Select)(({ theme }) => ({
width: WIDTH,
border: `1px solid ${theme.palette.grey[400]}`,
borderRadius: 3,
fontSize: '1.2rem',
'&:hover': {
backgroundColor: theme.palette.grey[300],
border: `1px solid ${theme.palette.grey[500]}`,
},
'&:focus': {
backgroundColor: theme.palette.grey[700],
border: `1px solid ${theme.palette.grey[700]}`,
},
'& .MuiSelect-select': {
paddingTop: 5,
paddingBottom: 5,
fontSize: '1.2rem',
alignItems: 'center',
display: 'inline-flex'
},
}));
I can see that the effect has been applied to the parent div:
However, I still see that the text and the icon don't look center aligned ("Text" looks higher than the icon):
Is there a reason for this? And how do I make it more center aligned?
I am trying to make it so that by sidebar is overfills with a scroll bar when the screen is shrunk:
<RootStyle>
<Authenticator />
<DashboardNavbar onOpenSidebar={() => setOpen(false)} disabled />
<BodyStyle>
<ConsoleSettings
navConfig={settingsConfig}
sx={{
overflow: 'auto',
width: DRAWER_WIDTH,
}}
/>
<MainStyle>
<Outlet />
</MainStyle>
</BodyStyle>
</RootStyle>
const RootStyle = styled('div')({
display: 'flex',
justifyContent: 'center',
minHeight: '100%',
overflow: 'auto',
});
const BodyStyle = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
width: '70%',
minWidth: 1000,
minHeight: '100%',
paddingTop: APP_BAR_MOBILE + 24,
paddingBottom: theme.spacing(10),
overflow: 'auto',
[theme.breakpoints.up('lg')]: {
paddingTop: APP_BAR_DESKTOP + 24,
paddingLeft: theme.spacing(10),
paddingRight: theme.spacing(10),
}
}));
const MainStyle = styled('div')(({ theme }) => ({
display: 'flex',
flexGrow: 1,
overflow: 'auto',
float: 'right',
minHeight: '100%',
paddingBottom: theme.spacing(10),
[theme.breakpoints.up('lg')]: {
paddingLeft: theme.spacing(4)
}
}));
If the screen is large, it looks fine:
But if I shrink the screen, the sidebar gets cut off with no scroll bar:
I was under the impression that adding overflow: auto would fix the issue, but it doesn't seem to work in this case. Would someone be able to explain why?
I have a parent view which width is "100%" (not screen width), and I want to have each children with the same width and height.
My codes is:
<View style={styles.container}>
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
</View>
const styles = StyleSheet.create({
container: {
width: "100%",
flexDirection: "row",
alignItems: "center",
},
item: {
width: 75,
height: 75,
marginRight: 10,
backgroundColor: "red",
},
});
But this is not responsive for all devices (in small sevices some of the children go out of screen)... Is there any other way to do that?
Thank you.
container: {
flexDirection: "row",
alignItems: "center",
},
item: {
flex: 1,
aspectRatio: 1,
backgroundColor: "red",
},
The trick for your situation is aspectRatio. Just make each child flex: 1, but with an aspect ratio of 1 to make them squared.
Percentage widths
There are likely many ways to do this, but the first one that comes to mind is setting the widths to percentages. This makes the item a percentage of the parent.
item: {
width: '30%',
height: 75,
marginRight: 10,
backgroundColor: "red",
}
If you need something more flexible, you may want to look into responsive design and setting breakpoints for different screen sizes.
Flex Wrap
If you want your content to stay a fixed size, you can have it wrap within your container. For different screen sizes, there may be more boxes in one row than another.
You'll likely need to change some styling, but wrapping would look something like this
<View style={styles.container}>
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
<View style={styles.item} />
</View>
const styles = StyleSheet.create({
container: {
width: "100%",
justifyContent: 'space-between',
flexDirection: "row",
alignItems: "center",
flexWrap: 'wrap',
},
item: {
width: 75,
height: 75,
marginRight: 10,
backgroundColor: "red",
},
});
Grid
If you don't like a variable number of boxes per row, you could make a grid. You would have a container, rows, and, in each row, your boxes.
Again, you'll have to tweak some styles.
<Container style={styles.container}>
<Row style={styles.row}>
<Box />
<Box />
<Row />
<Row style={styles.row}>
<Box />
<Box />
<Row />
</Container>
const styles = StyleSheet.create({
container: {
width: "100%",
},
row: {
width: "100%",
justifyContent: 'space-between',
flexDirection: "row",
alignItems: "center",
},
item: {
width: 75,
height: 75,
marginRight: 10,
backgroundColor: "red",
},
});
I'm working on an image upload component, and the design breaks when I put iphone 5 / se
But my css are breaking out, I want to force the design to respect the limits, iphone 6 and others are good, but when I change to the iphone 5, well, the print says everything.
This is the CSS code:
import { fontTitle, fontSizeInput, gradient, shadow, primaryColor, grayColor3, grayColor4 } from './theme'
export const
dropzone = {
display: 'grid',
margin: 'auto',
alignContent: 'center',
justifyItems: 'center',
gridRowGap: '15px',
border: `2px dashed ${grayColor3}`,
borderRadius: '6px',
color: primaryColor,
textAlign: 'center',
},
instructions = {
marginTop: '20px'
},
button = {
display: 'block', // necessary for link version
WebkitAppearance: 'none',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
MozAppearance: 'none',
outline: 'none',
cursor: 'pointer',
width: '90%',
padding: '10px 0px',
border: 'none',
borderRadius: '20px',
fontFamily: fontTitle,
fontSize: fontSizeInput,
color: '#FFF',
background: gradient,
boxShadow: `${shadow}`
},
btnDisabled = {
...button,
cursor: 'initial',
color: primaryColor,
background: 'none',
backgroundColor: grayColor4,
boxShadow: 'none'
},
input = {
opacity: 0
},
styleTag = `
.dropzone {
height: 100%;
height: -webkit-fill-available;
height: -moz-available;
}
`
This is the print of how it looks: