I would like to change the following code to meet my needs
I need to change the design from this :
to this :
I can not change the style and also add an intermediate step
here is the lin to the sandbox
https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-9pqxxk
Thank you in advance
To make the stepper icons closer to each other simply change the width of your <Stepper /> component. I chose 400px, change this value to fit your needs.
sx={{
width: "400px",
...
}}
I replaced the content > with a wider arrow ❯ and adjusted the top alignment.
".MuiStepConnector-root": {
top: 2
},
".MuiStepConnector-root span::before": {
display: "flex",
justifyContent: "center",
content: '"❯"'
}
This is what the result looks like:
Live Demo
Related
I am using MUI for UI.
I have some options, given in image below:
It is perfect till now. But I want to move options container to more bottom. (Currently it is set as top: 64px which is default).
I want to set it as top : 100px. After setting, it will look like :
I have tried to achieve this, but css didn't apply.
const useStyles = makeStyles((theme) => ({
userAge: {
"& .Mui-focused": {
"body .MuiPaper-root": {
top: "100px !important" // 64px is default
}
}
}
}));
//jsx return
<FormControl fullWidth className={classes.userAge}>
// more code here
</FormControl>
You can also try here : https://codesandbox.io/s/funny-shannon-h6flch?file=/demo.tsx
Note :
I don't want to set top : 100px globally.
Made some changes to your codesandbox. Hope it helps ;)
Styles need to be applied to menu via MenuProps and then applying class based styles to paper
https://codesandbox.io/s/change-the-default-position-of-options-in-mui-stackoverflow-lm9mxn?file=/demo.tsx
I've been trying to use React Native lately and I am trying to incorporate a ScrollView in my program. I am having issues centering the ScrollView in the middle of the page. I have looked at many of the posts here on SO and have been unable to get a working implementation. If someone could point me in the right direction, I would really appreciate it!
Screen:
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollable}>
<ProfileGreeting />
<DailyGoals goals={GOALS} />
<CoursesContainer courses={COURSES} />
</ScrollView>
</SafeAreaView>
Styles:
const styles = {
container: {
height: "100%",
width: "100%",
display: "flex",
alignItems: "center",
flex: 1
},
scrollable: {
flexGrow : 1,
justifyContent : 'center'
}
}
As suggested in this this post I tried to use flexGrow on the ScrollView, but it still doesn't seem to work - it instead shifts to the side as such:
Try Scroll view "contentContainerStyle" propert instead of style
propert
ScrollView style defines the outer container of the ScrollView, e.g its height and relations to siblings elements
ScrollView contentContainerStyle defines the inner container of it, e.g items alignments, padding, etc
Using Framer Motion's useTransform I want to change the width of an element using a MotionValue that is a percent (eg. 75%) rather than in pixels.
The default assumes pixels:
<motion.div className="dynamic-element" style={{ width: w }}>
I want something like the following:
<motion.div className="dynamic-element" style={{ width:`${w}%` }}>
Which obviously doesn't work.
How can I specify that my MotionValue is a percentage and not pixel-based?
Alternatively, I can use filter: scale() but that results in the contents being blurry (and yes I've looked into how to fix that, but haven't had any success).
You can do it like this :
useTransform(w, (value) => `${value}%`);
Can you use variants?
E.g.:
<motion.div
variants={{
a: {width: '20%'},
b: {width: '50%'}
}}
animate={variant}
/>
See this CodeSandbox demo.
You can use percentages as the output value.
const width = useTransform(w, [0, someOtherNumberYouPick], ['0%', '100%'])
...
<motion.div className="dynamic-element" style={{ width }}>
I am trying to implement react-sidenav, and I would like the buttons to be at the bottom - a flex-direcion of column-reverse. I can add these styles manually in chrome, and it works. According to the documentation, there is a style property on SideNav that I can use to set my custom style. I would change it from block to flex and add the column-reverse flex direction.
I cannot get the style property to work, however. I have tried this:
const SideNavBottom = {'display': 'flex', 'flex-direction': 'column-reverse'};
.
.
<SideNav
style={SideNavBottom}
>
You can view a demo of what I am working with at codesandbox.io. You will want to look at the RenderItems2 file.
const SideNavBottom = {display: 'flex', flexDirection: 'column-reverse'};
<SideNav
style={SideNavBottom}
/>
or
<SideNav
style={{display: 'flex', flexDirection: 'column-reverse'}}
/>
your sidenav component not closed, also you can test above code
I currently have these two styles:
indentLeft: {
marginLeft:'4%',
},
forwardButtonLocation: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
},
I followed this tutorial https://facebook.github.io/react-native/docs/style.html and concatenated them like this:
<View style={styles.forwardButtonLocation, styles.indentLeft}>
However, it seems like the latter style overrides the previous one even indentLeft and forwardButtonLocation don't share same properties. The button is either padded on top with 20 or indented by 4% depending on which one comes to the second in the concatenation, but according to the tutorial, it should have both properties. What am I doing wrong here?
In order to provide multiple styles to the same element you need to the pass the styles within []
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
Passing them directly in {} will only allow the last one to take effect