I'm new to reactstrap and I have some issues with the layout.
I would like to design a connection container like following example.
enter image description here
When I resize my screen for smaller screens, the text is layered over the image. And it's not aligned properly. enter image description hereenter image description here
The code I have for this layout is:
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Card>
<CardBody>
<AvForm className="form-horizontal" onValidSubmit={(e, v) => {
this.handleValidSubmit(e, v)
}}>
<Row>
<Col sm="3"><img src={mollieImage} style={{
width: '300px',
height: "auto",
boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)"
}}/></Col>
<Col sm="9">
<Row><h5>Connection Status</h5></Row>
<Row><p>Allow access to your customers, payments, organization, profiles and onboarding.</p></Row>
<Row>
{this.props.isConnected ? <Button type="submit" color="danger">Disconnect</Button> :
<Button type="submit" color="success">Connect</Button>}
</Row>
</Col>
</Row>
</AvForm>
</CardBody>
</Card>
</Container>
</div>
</React.Fragment>
)
};
For your image to be responsive, I'd refactor the 300px value to be maxWidth instead of width. As for its width you can have it be responsive to its container by assigning 100% to it.
<Col sm="3"><img src={mollieImage} style={{
maxWidth: "300px",
height: "auto",
boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)",
width: "100%"
}} /></Col>
With regards to the smaller screens view, the prop sm on your Col components will only kick in if the screen size is greater than or equal to 576px. See the sample col-sm- definition on the Bootstrap stylesheet
#media (min-width: 576px)
.col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
So when the client's screen size if less than 576px, that is when the sm prop will start to lose effect thus your layout changes drastically. For that, your going to have to come up with solutions such as using xs prop or CSS media queries
Related
I want my images to fully fit the CardMedia. Yet since they are of different heights and widths, some of them get cut like so:
Also upon resizing, some images get cut as well:
This is the code for the CardMedia part:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={product.img_urls[0]}
alt={product.name}
title={product.name}
sx={{ padding: "1em 1em 0 1em" }}
/>
// Other Content
</Card>
Overall, I want to achieve something like this but with all the cards in the same height and width:
Is there any way I can fix this or do I need to resize each image individually?
You need to make your pictures to fill their layouts, AND keep their aspect ratio.
The best way is to set their "object-fit" css property to "contain".
Try this:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={imageNetwork}
alt={"alt"}
title={"titleasdasdsada"}
sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
/>
// Other Content
</Card>
Try this
parent-image-element {
width: 100px;
}
image {
width: 100%;
max-height: 100px;
}
I want the hover functionality to happen (UI) which is happening in this case:
Desired UI
Source: https://www.loewshotels.com/santa-monica
Now since modifying background image styles is a bit complicated, I have to use the Box Component from Material UI and in it, I have placed the image and also done the desired transitions like zoom out, etc. However I cannot add text on the Box component (which again is basically inside a Card Component).
Code for the specified part:
<Grid item xs={4}>
<Card
onMouseDown={console.log("fewfwg")}
className={classes.cardWelcomeTwo}
>
<CardActionArea>
<Box variant="outlined" style={{ position: "relative" }}>
<img
className={classes.paperImgWelcome}
src="https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg?&targetx=0&targety=-25&imagewidth=500&imageheight=751&modelwidth=500&modelheight=700&backgroundcolor=AF7163&orientation=1"
alt="nothing"
/>
<CardContent>
<Typography
variant="h4"
component="h2"
className={classes.welcomeGridHeadingText}
>
Explore The City
</Typography>
</CardContent>
</Box>
</CardActionArea>
</Card>
</Grid>
Styles.js:
paperImgWelcome: {
flexGrow: 1,
position: "relative",
"&:hover ": {
display: "flex",
transition: "0.6s all ease-in-out",
// animationTimingFunction: "ease-out",
transform: "scale(1.1)",
backgroundSize: "75%",
opacity: "0.75",
},
},
cardWelcomeTwo: {
position: "relative",
height: 510,
flexGrow: 1,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
},
welcomeGridHeadingText: {
position: "absolute",
textAlign: "center",
color: "white",
fontFamily: "'Lato'",
fontSize: "60px",
letterSpacing: "5px",
lineHeight: "60px",
},
Currently, my UI looks like this:
not hovered
hovered
You can use the ::after pseudo-element with the content property and show it only on hover.
Here's a simple example:
CSS
.backgroundImage {
background-image: url("https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg");
height: 500px;
color: white;
padding: 50px;
}
.backgroundImage:hover::after {
content: "For a ride";
}
HTML
<div className="backgroundImage">
<h1>Let's Go</h1>
</div>
For simplicity it uses just plain HTML/css.
If you want to see it in action in a material-ui/React project here's the sandbox link.
I want to make the img and text below as close as possible, but I'm having difficulties doing so..
CSS for style on container :
const style = {
height: '100%',
top: '0px',
left: '0%',
width:'12%',
position: 'fixed',
color: 'rgb(30 215 96)',
textAlign: 'center',
background: 'rgb(40, 40, 40)'
};
<Container style={style}>
<Table>
<TableRow>
<TableCell style={{width: '3px'}}>{track.trackCover,
<img
class="cover"
alt="cover"
style={{ width: "50px", height: "50px" }}
src={track.trackCover}
/>}</TableCell>
<TableCell style={{width: '3px'}} >{track.name}, {track.artists}</TableCell>
</TableRow>
</Table>
</Container>
I've currently got it set up like this. The width in the table cell reduces it as close as the img above, however I want them basically touching.. I've tried -3px and even 0. But They seem to make it more distant. Can someone help me identify what I'm doing wrong please?
I have been programming a lot in React Native and I'm trying React js (only web) and I don't know to make a simple View that get all screen to start play with all components.
Let me explain:
In React Native I handle the View dimensions with flex, something like this:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.5, backgroundColor: 'blue' }}>
<Text>I'm a blue 50% screen View!</Text>
</View>
<View style={{ flex: 0.5, backgroundColor: 'yellow' }}>
<Text>I'm a yellow 50% screen View!</Text>
</View>
</View>
But in React JS I have to use div tags that doesn't recognize flex.
I mean, I cannot do this:
<div style={{ flex: 1 }}>
<div style={{ flex: 0.5, backgroundColor: 'blue' }}>
<p>I'm a blue 50% screen View!</p>
</div>
<div style={{ flex: 0.5, backgroundColor: 'yellow' }}>
<p>I'm a yellow 50% screen View!</p>
</div>
</div>
How I have to use that styles in React js for the divs to get the percentages results?
React Native uses its own flexbox implementation - https://facebook.github.io/react-native/docs/flexbox
In React you are using CSS flexbox - https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.
In css, you also need to declare parent container as
.flex-container {
display: flex;
}
and that is probably what you are missing.
pure CSS version of your flex would probably look like this (styles as "string" version):
<div style="display: flex; flex-direction: column; height: 100vh;">
<div style="flex: 1; background-color: blue;">
<p>I'm a blue 50% screen View!</p>
</div>
<div style="flex: 1; background-color: yellow;">
<p>I'm a yellow 50% screen View!</p>
</div>
</div>
I created right side collapsible panel. I need to change the panel height (max 100px) after the collapse
My css is like this
background: '#f7f7f7', borderRadius: 5, width: 200, marginBottom: 0, border: 50, overflow: 'hidden',
and Rekit code like this
render() {
return (
<div className="common-coll-bar">
<Collapse bordered defaultActiveKey={['1']} onChange={callback}>
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
<p>{text}</p>
</Panel>
</Collapse>
</div>
);
}
can you help me?
!do not use height it will ruin the layout!
Just use line-height
.ant-collapse-header {
line-height: 100px;
}