I am using this piece of code to have a footer at the very bottom in react native .However on different devices , the height appears to have changed .I want all devices to have same height from the bottom .
Here is the footer code .
footer:{
position: 'absolute',
left: 0,
top: windowHeight - 135,
width: windowWidth,
height: 180,
backgroundColor: "#436ab2",
opacity:0.5
},
I see that use of top variable is doing something .How can we assure that things are constant for all devices .
This should work
footer: {
position: 'absolute',
bottom: 0,
width: '100%',
height: 180,
backgroundColor: "#436ab2",
opacity: 0.5
}
Related
I have stacked small a div on top of another div and I want the small div to be at the bottom and centered, like this: Style.
I've searched up answers but some answers are telling me to make the small div relative but I can't do that otherwise it wont stack on top of the other div. How can I achieve this?
Here is my sandbox which explains the problem:
https://codesandbox.io/s/sweet-bas-grubn
Since you are using absolute positioning, set the bottom to 0, left to 50%, then translate it left by 50% of the width.
style={{
position: "absolute",
backgroundColor: "white",
zIndex: 1,
height: "250px",
width: "40%",
bottom: 0, // <-- 0px from bottom of screen
left: '50%', // <-- 50% of parent div width from left
transform: 'translateX(-50%)', // <-- translate left 50% of child width
}}
You can try this one. I hope it will be helpful for you.
import "./styles.css";
export default function App() {
return (
<div
style={{
position: "relative",
background: "blue",
width: "100%",
height: "400px",
margin: "0px",
padding: "0px"
}}
>
<div
style={{
position: "absolute",
background:"white",
zIndex:1,
height:"200px",
width:"150px",
bottom:"0",
left:"40%"
}}
></div>
</div>
);
}
I want to have a background image that takes all the screen and stays static when I scroll.
I have this component in a React Native project:
<ImageBackground` style={styles.backgroundImage}
source={require('../assets/images/Fondo1b.jpg')}>
....
</ImageBackground>
It is wrapping another components and it has this style:
backgroundImage: {
flex: 1,
resizeMode: 'cover',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
When I scroll up and down, it moves with the screen:
GIF link
In here you can see how it displaces with the scroll.
I need it to stay static occuping the size of the screen, not moving when I scroll and not displacing my FAB (it's Native Base's FAB, it that helps...)
Any tips, please?
Check this out. Need exactly this for React Native
https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314
<ImageBackground style={styles.backgroundImage}/>
backgroundImage: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
},
I am rendering a map using Mapboxgl, Bootstrap 4 and React.
I need the map to take 100% of the height of the page and to display in the first column of a two column grid.
However, when using React, the width of the map extends over to 100% of the width of the row - overlapping underneath the 2nd column.
The best thing would be to check my examples on jsfidle to understand what I mean.
Map correctly showing (when using pure HTML and no React)
https://jsfiddle.net/apphancer/jhxy5c63/
Map showing width issue (when using React)
https://jsfiddle.net/apphancer/9g71ovn6/
In order to have the 100% height working I am using this CSS:
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
I suspect this might have something to do with how the map gets rendered with React as the problem does not happen when using the pure HTML solution.
Is anyone able to point in the right direction?
HTML
<div id="app"></div>
CSS
body, html {
height: 100%;
}
#app, .row, .col-9 {
height: 100%;
}
.col-3 {
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid red;
}
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
JS
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
class Application extends React.Component {
componentDidMount() {
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [13.392, 52.523], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl());
map.resize(); // tried with this to see if it would help
}
render() {
return (
<div className="row no-gutters">
<div className="col-9">
<div className="map-wrapper">
<div ref={el => this.mapContainer = el} id="map"/>
</div>
</div>
<div className="col-3">
2 of 2
</div>
</div>
)
}
}
ReactDOM.render(<Application/>, document.getElementById('app'));
If you use position fixed with 100% width in wrapper, it will cover all width. But if you set position to relative, it will cover just remaining width.
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
This worked in your react-jsfiddle. Please try.
If you are using position fixed in your project you can cover whole area so for that you have 2 solution
1st solution
give 75% width to the #map so it will behave like col-9 and no need to give position: absolute;
#map {
width: 75%;
height: 100%;
}
2nd Solution
give it relative position to the parent of your element so it cant leave it area, for that you can change position: fixed to position: relative
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
both solution is good solution but i prefer 2nd solution, from my side.
const [viewport, setViewport] = useState({
width: '100%',
height: 'calc(100vh - 162px)', // 162px is size height of all elements on top of map
latitude: 0,
longitude: 0,
zoom: 12,
bearing: 0,
pitch: 0,
transitionDuration: 2000,
transitionInterpolator: new FlyToInterpolator(),
});
I migrated to React 18, and updated a bunch of dependencies, included the map library.
The only thing that resolved my problem was this. It has a tic, when the map resizes, but it's a start.
useEffect(() => {
map.on("load", () => map.resize());
}, [])
I trying to use modal with transition using Material UI and have problem to centering it and also make it responsive or center in small size screen (mobile).
Modal can be centered and looks good on small size if not using transition, but if i add a transition, modal can't be centered or responsive.
This is the code modal without transition link.
Works good with large or small screen size.
This is the code modal with transition link.
I tried to change the value of top & left but still can't get centered at the large and small screen size :
function getModalStyle() {
const top = 25;
const left = 25;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
Can anyone help me?
By default the modal creates a parent container that uses flex, so in order to center you can comment your left: property that it is set to your modal,
return {
top: `${top}%`,
margin:'auto'
// left: `${left}%`,
// transform: `translate(-${top}%, -${left}%)`,
};
and in your modal container you can align items with this
<Modal
...
style={{display:'flex',alignItems:'center',justifyContent:'center'}}
>
https://stackblitz.com/edit/react-1ny5g7?file=demo.js
This works for me:
function getModalStyle() {
return {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
};
}
This worked for me:
{
width: '100%',
maxWidth: '100vw',
maxHeight: '100%',
position: 'fixed',
top: '50%',
left: '0',
transform: 'translate(0, -50%)',
overflowY: 'auto'
}
My DOM is something like this:
wrapper
-element-container
--element (many)
---iconButton
Whenever an element is near the border of the element-container, the tooltip render is cut-off at the bounds of element-container.
How can I ensure tooltips always appear on top?
Here my current in-line styles:
element-container: {
paddingTop: '15px',
height: '65vh',
overflowY: 'scroll',
},
element: {
border: this.props.isSelected ? '4px solid #E71E61' : 'none',
boxSizing: 'content-box',
width: '300px',
transition: 'width 1.5s',
height: '500px',
margin: '15px',
position: 'relative',
},
iconButton: {
position: 'absolute',
marginTop: '-30px',
marginLeft: '-30px',
transform: this.state.isMouseOver === true ? 'scale(1,1)' : 'scale(0,0)',
transition: 'all .2s',
},
icon: {
height: '40px',
width: '40px'
},
I've tried:
setting the zIndex of both the tooltip (via the tooltipStyle prop of IconButton
changing the position of each element to different values (since this issue indicates position affects zIndex)
overwrting the entire tooltipStyle with the default style found in the MUI source code
ETA: Here's a screen shot of the issue I'm describing. My screenshot app doesn't capture the pointer, so I've drawn one to indicate that the mouse is over the grey circle button.
The cut-off tooltip is the dark box with the letters 'ing' visible. While this pic shows cut-off on the left side of the container, all sides behave the same.