I have following layout:
Here is the code:
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<div style={{ height: 300 }}>test</div>
<div style={{ flex: 1, display: "flex", border: "1px solid green" }} >
<div style={{ flex: 1, maxHeight: 350, overflow: "auto", border: "3px solid red" }}>
<ResultsTable />
</div>
<div style={{ flex: 1, }}></div>
</div>
</div >
You can see setting maxHeight: 350 worked above and there is a scrollbar, but the height of the red div is smaller than height of the green div, ideally I think one would like to have the height of the red div same as height of green div, and then to have a vertical scrollbar too. How can I achieve this in such setup?
Note: having maxHeight: 100% on the red div, didn't work, as both red and green div just increased in height.
Question seems to be resolved: There was issue in above Note, actually maxHeight:100%, does seem to work on red div: http://codesandbox.io/s/inspiring-lederberg-ni52j, it wasn't working in my project because the parent of top div from this example had flex:1 (that parent isn't seen here) .
Try to use height: "auto" and maxHeight: "100%" in the red div.
Here is the updated style.
Related
I am using #react-google-maps/api to use google map inside Next JS app.
Based on their documents, they mentioned that the parent HTML element could determine the size of the map.
My return function from my component looks like this:
return (
<div
style={{
display: "flex",
flexDirection: "column",
height: "100vh",
width: "100%",
}}
>
<GoogleMap
options={mapOptions}
zoom={mapOption.zoom}
center={mapCenter}
mapTypeId={google.maps.MapTypeId.ROADMAP}
mapContainerStyle={{width: "300px",height: "300px"}}
onLoad={() => console.log("Map Component Loaded...")}
/>
</div>
)
So basically I need to determine the width and height of the map and via parent, it would be overridden if I want to make it fill the entire screen. The problem is that the above return still shows the map with 300 to 300 px.
Does anyone have any solution so that the initial map fills the entire screen?
MapContainerStyle is a child of your div container
It's because the <GoogleMap /> attribute mapContainerStyle is also a seperate container and is only a child of the <div> container outside it, where you put the style attribute.
So although you set the <div> container with 100% width and height or 100vh/vw, if it's child component got a lower width and height, most especially because what you're using here is pixels, ofcourse it would show as only 300px in width and also in height.
Here's an example:
return (
<div
style={{
backgroundColor: "green",
display: "flex",
flexDirection: "column",
height: "500px",
width: "500px"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "50%",
height: "50%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
Notice that the <div> container having a green background and height/width of 500px, shows that it contains the mapContainerStyle provided here that I set the width and height to 50%.
So if you want to fill the 500px square <div> container, you should just set the height and width of mapContainerStyle to 100%. It would look like this:
return (
<div
style={{
backgroundColor: "green",
display: "flex",
flexDirection: "column",
height: "500px",
width: "500px"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
So to answer your question, you can just leave your <div> container without any styling, then setting the mapContainerStyle to 100% for it's width and height. Or you can set your <div> container as you have on your sample, depending on your use case. But here's the sample for both.
Without <div> styling:
return (
<div>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
/>
</div>
)
With <div> styling:
return (
<div
style={{
height: "100vh",
width: "100%"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
Hope this helps! Feel free to leave a comment if you need clarification or if I misunderstood your question somehow. But that's about it from me for now.
I want to show scrollbar without providing fixed height to inner container with outer container having position fixed.
I am facing an issue that if I provide to fixed height to the innerContainer. And when I check the responsiveness and change the height of the window the outerContainer with position fixed hides the content of innerContainer.
// OUTER CONTAINER
<div style={ { width: "250px", zIndex: 5, position: "fixed", right: "2rem" } }>
<div style={ { width:"100%, height: "100px" } }>
// having some other content
</div>
// INNER CONTAINER
<div style={ { width: "100%", height: "400px", overflowY: "auto" } }>
// overflowing content inside the container
</div>
</div>
Is there any solution please help me. I will be very thnkfull for time and help.
add to the outer container:
display: "flex", flexDirection: "column"
and then you can remove the height of the inner container.
In react native I cannot use something like float:left or float:right so I want to align items extreme left and right how can I do that? I have used absolute position on parent View but inside that View flexdirection and justify content space between is not working why so? Does flexbox and absolute positioning doesn't work together?
Code:
<View style={styles.cardContent}>
<View style={{maxWidth: 175}}>
<Text
style={{
fontSize: 16,
fontWeight: '700',
padding: 10,
color: 'white',
}}>
{hotelName}
</Text>
</View>
<View style={{flexDirection: 'column', marginLeft: 75}}>
<Text
style={{
fontSize: 20,
fontWeight: '700',
padding: 5,
textAlign: 'right',
color: 'white',
}}>
₹ {newRate}
</Text>
<Text
style={{
fontSize: 16,
fontWeight: '700',
textAlign: 'right',
color: 'white',
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
}}>
₹ {oldRate}
</Text>
</View>
</View>
CSS:
cardContent: {
position: 'absolute',
bottom: 0,
flexDirection: 'row',
justifyContent: 'space-between',
},
For cardContent I cannot remove position absolute and bottom 0 property because I want to fix the card at bottom of the screen.
In below screenshot you can see that hotel name is present on extreme left but newRate and oldRate is not going in extreme right even after using flexDirection: 'row' and justify content: space between
Screenshot:
You can try this
cardContent: {
position: 'absolute',
bottom: 0,
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor:'red',
width:'100%' // add width
},
add a width: '100%' to your cardContent component styles.
I would just add width: Dimensions.get('window').width to the cardContent style instead of width: 100%.
Since 100% means that you want this element to fits 100% of its parent width and Dimensions.get('window').width means that you want the width of the viewport (device).
Simply put I have 3 elements,
<div>
<Header/>
</div>
<div>
<Body/>
</div>
<div>
<Footer/>
</div>
The header is a static but undefined height.
The body is an accordion that when expanded should overflow into a scroll bar
The footer is also an accordion that should always be showing but can minimize to only show its header rather than header + content.
What I need to have happen is to have the header always displayed in full, have the accordionFooter always display as much as it wants (whether header + content, or just header), and finally let the bodyAccordion display as much as it can and then overflow into a scroll bar.
Here's what I have so far.
Container: {
height: '100%',
minHeight: '100%',
display: 'flex',
flexDirection: 'column'
},
SectionContainer: {
flex: '1',
display: 'flex',
flexDirection: 'column',
position: 'relative'
},
bodyAccordion: {
overflowY: 'auto'
},
footerAccordion: {
position: 'absolute',
bottom: '0px',
right: '0px',
left: '0px'
}
The html is considerably more complex so here is a simplified version
<div className={Container}>
<MyHeader/>
<div className={SectionContainer}>
<div className={bodyAccordion}>
<MyAccordion/>
</div>
<div className={footerAccordion}>
<MyFooterAccordion/>
</div>
</div>
</div>
When the above code runs the bodyAccordion will overflow into the footeraccordion rather than increasing the size of the scrollable wheel.
Here's a jsFiddle that shows the issue
https://jsfiddle.net/jackyFrosty/mwz62bh9/2/
You need to to asign in your container class min-height:100vh. It happens because your 100% is equal to your child's labels
var headerheight= document.querySelector("header").offsetHeight;
var footerheight= document.querySelector("footer").offsetHeight;
var contentheight = window.innerHeight -(footerheight+headerheight);
document.querySelector(".content").style.height= `${contentheight}px`;
*{
margin:0;
padding:0;
}
header{
height:100px;
background-color:red;
}
footer{
height:50px;
background-color:yellow;
}
.content{
background-color:skyblue;
width:100%;
overflow-y:scroll;
}
.inner{
height:500px;
width:50%;
margin:0 auto;
background-color:white;}
<header>header</header>
<div class="content">
<div class="inner">body</div>
</div>
<footer>footer</footer>
i used javascript to get header and footer height so u can calculate the body height for remaining screen height !
When the above code runs the bodyAccordion will overflow into the footeraccordion rather than increasing the size of the scrollable wheel.
This is happening because you have given position: absolute to your footer. Get rid of it and the bodyAccordion will stack over your footer. If you want the scroll to work, you should restrict the height of your bodyAccordition. Currently there's no restriction on it. As Sergio has explained in his answer, it will be better if you go with 100vh instead of 100%
let the bodyAccordion display as much as it can and then overflow into a scroll bar
Finally for it, get rid of flex:1. This will make your bodyAccordition to take up maximum space above footer.
Hope it helps. Cheers!
Thanks for the answers everyone,
I was able to figure this out by using the following
<div className='header'>
<MyHeader/>
</div>
<div className='container'>
<div className='content'>
<MyContent/>
</div>
<footer className='footer'>
<MyFooter/>
</footer>
</div>
container: {
position: 'relative',
height: 'calc(100vh - 95px)',
display: 'flex',
flexDirection: 'column'
},
header: {
height: '35px',
width: '100%'
},
content: {
overflowY: 'auto',
flex: '1'
},
footer: {
marginBottom: '0px',
textAlign: 'left'
}
I have a dynamic "progress bar" component that renders a different background color and width for different percentages as so
<div
style={{
backgroundColor: '#FFFFFF',
height: '24px',
borderRadius: '3px',
border: '1px solid black'
}}
>
<div
style={{
width: `${percentage}%`,
height: '100%',
backgroundColor: '#15c621'
}}
/>
</div>
This component works great in all email clients except Yahoo mail. The nested divs background color nor width does not get rendered in the email, and the parents background color is shown for the length of the progress bar. How can I fix this so the child divs background appears with the proper width and color?
[SOLVED] - Adding a non breaking space in the child div forced the height of the div to the parent container. The final code was
<div
style={{
backgroundColor: '#FFFFFF',
height: '24px',
borderRadius: '3px',
border: '1px solid black'
}}
>
<div
style={{
width: `${percentage}%`,
height: '100%',
backgroundColor: '#15c621'
}}
>
</div>
</div>