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).
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.
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.
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>
There is 1 Div-container, into which I want to render my full application. The application shall fill out the whole Div width.
I have tried both the following Divs, but still the Div-container is not 100%, there is even no width like as if there is no content. What is wrong?
<div id="stuff"></div>
and
<div style="width: 100%;" id="stuff"></div>
My ExtJS app:
launch: function() {
var div = Ext.Element.get('stuff');
Ext.create('Ext.panel.Panel', {
renderTo: div,
width: "100%",
height: 500,
title: 'Container Panel',
layout: 'border',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: '80%',
width: '100%'
},
{
xtype: 'panel',
title: 'Child Panel 2',
html: 'textextetxtext',
height: '80%',
width: '100%'
}
]
});
}
Try setting the div to a fixed width in pixels instead of just 100%. In other words, if I give you 100% of my money, and you get nothing, it's because I have no money. Similarly, you have 100% width specified, but of what? Perhaps the #stuff div needs a containing div to draw its 100% width from.
Furthermore, both child panels Have 100% width and 80% height. Try 50% each.
Thanks for the help. There were several additional Divs of the framework on top. So removing them solved it.