In this picture #1 is the regular border which I need to have. #2 and #3 are double the sizes of the #1. In the #4 we can see it happens because both nearby elements have borders and those aren't collapsed.
In my React / MUI project I have added borderCollapse: "collapse". But still, the problem is there.
This is my code sandbox
What went wrong in my code?
Each item in the Tabs gets it's own border that's why it looks double for the elements between.
The closest solution with the less code I could find is to add negative margin-left in each item except the first one like the code below. Here is the working codesandbox
<Tabs
value={value}
onChange={handleChange}
centered
variant="fullWidth"
aria-label="basic tabs example"
sx={{
".MuiButtonBase-root": {
color: "white",
textTransform: "none",
borderCollapse: "collapse",
border: "1px solid #83858E",
fontWeight: "normal",
marginLeft: "-1px" // You add negative margin
},
"& :first-child": {
borderTopLeftRadius: "0.5rem",
borderBottomLeftRadius: "0.5rem",
margin: "0" // You remove the negative margin-left for the first element.
},
"& :last-child": {
borderTopRightRadius: "0.5rem",
borderBottomRightRadius: "0.5rem"
},
"& .MuiTabs-indicator": {
display: "none"
},
"& .MuiTab-root.Mui-selected": {
color: "black",
backgroundColor: "#ABA9FF",
border: "1px solid white"
}
}}
>
Related
I am trying to create a custom card component in React and I want the content to be on top of the blurred background image. I read some examples but I cant seem to figure out the exact solution needed. Here is my code.
`
import React from "react";
import { motion } from "framer-motion";
export default function Pricing_Card({ title, image, children, heigth }) {
return (
<div
style={{
margin: 20,
// marginLeft: "10%",
width: "20%",
height: heigth,
borderRadius: "10px",
boxShadow: "3px 3px 3px #D3D3D3",
minWidth: "200px",
minHeight: "300px",
backgroundImage:
'url("https://www.thriftyfrugalmom.com/wp-content/uploads/2021/10/Meatless-Mexican-Rice-Bowls.jpg")',
backgroundSize: "cover",
filter: "blur(1px)",
}}
>
<div
style={{
position: "relative",
color: "black",
textAlign: "center",
fontSize: 30,
margin: 7,
fontWeight: "bold",
fontFamily: "Plus Jakarta Sans",
}}
>
{title}
</div>
<div>{children}</div>
</div>
);
}
`
I also attached an image to see exactly what I get the test2 has the blur effect.
Thanks in advance!
I am using the MUI-Slider component in React to display a value. I would like to customize the 'thumb'/valueLabel so the font and thumb are much larger. I read MUI's documentation on updating the CSS to customize the thumb with limited success. My slider looks like this currently. The thumb and dot are blue, but everything else is grey. The font is still very small.
Here is my React component:
Note: the sx usage is copied directly from the MUI documentation.
import { Slider } from '#material-ui/core';
<Slider
disabled
min={0}
max={100}
value={50}
marks={[
{ value: 0, label: '0' },
{ value: 100, label: '100' },
]}
aria-label="Conviction Score"
color="primary"
sx={{
'& .MuiSlider-thumb': {
borderRadius: '1px',
},
}}
valueLabelDisplay="on"
orientation="vertical"
valueLabelFormat={value => `${value.toFixed(1)}`}
></Slider>
I added this to my SCSS. Clearly I can change the thumb color but not any of the font attributes.
color:#0d47a1;
font-size: 20px !important;
font-weight: bold !important;
}
What am I doing wrong? Is there any way I can do this with just CSS?
Use this in your sx in the Slider component to replace the one you have now.
sx={{
"& .MuiSlider-thumb": {
borderRadius: "1px"
},
"& .MuiSlider-valueLabelLabel": {
fontSize: "20px",
fontWeight: "bold",
color: "#0d47a1"
}
}}
The image above is how my header normally looks, the image below is what happens when I start to shrink the window size.
What CSS can I use to stop the Text navLinks to stop wrapping like that?
Here is the CSS I use:
const useStyles = makeStyles((theme) => ({
// appBar is the CSS for the material-UI component
appBar: {
borderBottom: `1px solid ${ theme.palette.divider }`,
flexGrow: 1,
"#media (max-width: 1000px)": {
paddingLeft: 0,
}
},
// toolBar is the CSS wrapper for all <divs> inside the appBar
toolBar: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0.5rem 0.5rem 0.5rem 1rem",
},
// LOGO text
toolbarTitle: {
flexGrow: 1,
fontFamily: 'Track',
textAlign: "left",
margin: "0.5rem",
paddingLeft: "100px",
"#media (max-width: 1000px)": {
marginLeft: "20px",
paddingLeft: 0,
}
},
// Here are my navLinks that are wrapping and causing the problem.
navLinks: {
fontWeight: 700,
size: "18px",
marginLeft: "70px",
padding: "0 1rem",
float: "center",
whiteSpace: "nowrap",
overflow: "hidden",
display: "inline-block",
},
Thank you for the help!
for example
#media (max-width: 700px)": {
navlinks{margin-left: 30px,}
}
You can use media queries, size is % and inline blocks.
I am working on a React Native App . The components are vertically center as I desire but are all aligned on the bottom and can't get them move up towards the top of the screen.
Please take a look at the layout screen (attached here).
How can I get them to move up top?
Please Note : The yellow color in the screen is to figure out how far the component's view stretches.
I could not figure out to adjust the 'yellow' view. The 'yellow' view is only suppose to consist the donut/menu button .
<View style={styles.container}>
<TouchableOpacity style={styles.drawerButton} onPress={() => this.props.navigation.openDrawer()} >
<Image
source={menu}
style={{width: 25, height: 25, marginLeft: 5}}
/>
</TouchableOpacity>
<TextInput style={styles.addText} placeholder="Add New Item"/>
<Button style = {styles.submitButton} title = "Add" />
<TouchableOpacity style = {styles.pictureButton} onPress = {this.setCameraWindow}>
<Text style={{fontSize:14}}> Take Picture </Text>
</TouchableOpacity>
{this.state.isCameraVisible ? this.takePicture() : null }
</View>
);
}
}
const styles = StyleSheet.create ({
container:{
flex:1,
flexDirection: 'column',
alignItems:'center',
flexGrow: 1,
justifyContent: 'center',
backgroundColor: 'blue'
},
drawerButton:{
flex:1,
flexDirection:'row',
alignSelf:'flex-start',
backgroundColor:'yellow'
},
menuButton: {
height:50,
flex:1,
flexDirection:'column',
alignSelf:'flex-start',
backgroundColor:'yellow',
},
addText:{
flex:1,
flexDirection:'column',
justifyContent:'center',
backgroundColor:'white',
borderBottomColor: 'black',
borderBottomWidth: 2,
alignSelf:'center',
maxHeight:50,
},
submitButton:{
justifyContent:'center'
},
pictureButton:{
backgroundColor:'white',
justifyContent: 'center',
},
});
Thank you
You have given flex:1 inside the style={styles.drawerButton}, thats why its taking up the entire space and other things are pushed to the end of the screen, please remove flex:1 from that, and also remove justifyContent: 'center' from container style. Then all the content will be moved to the top
These styles are what you need. Specifically:
overflow: hidden: Hides the yellow bit when the menu is collapsed.
position: absolute on the menu. This means the menu will appear in the same position regardless of the other content. Use top: 10px; left: 10px to control the actual positioning of the menu.
position: relative on the menu's parent (TouchableOpacity) element. This means the position: absolute of the menu will be relative to the parent element.
You may have to get rid of some of the other styles, at least temporarily, so you can see what is happening.
I have a view with an icon (from react-native-vector-icons) inside as following:
return (
<View style={styles.iconContainerStyle}>
<Icon name='menu' size={23} style={styles.iconStyle} />
</View>
);
The following is the styling for both the components:
const styles = {
iconContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
height: 30,
width: 35,
borderRadius: 5,
backgroundColor: '#ffffff',
padding: 2
},
iconStyle: {
color: '#2279b4',
}
};
The weird part is that the border radius prop of 5 should give evenly rounded borders, but this is what I get:
Notice that on the right hand side, the borders are sharper then the left part!
I even tried with different borderRaduis values, its still the same concept.
The header you see is provided by react-native-router-flex for my scenes, I think this is also a factor as their styles are also applied on the hamburger button.
A work around (temporarily) is by supplying another parent view with he following style:
<View style={{ justifyContent: 'center', alignItems: 'center', height: 35, width: 40, }}>
The height and width need to be a value bigger then that of the iconContainer.
Please add border: 1px solid #f00; to your code to see if toggle icon is not hidden behind something.
If it looks fine, try to add seperate radius to each angle, Like:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
and so on. Also, try to use border-radius styles with !important.