Mapbox canvas rendering on half of the screen - javascript

I'm trying to use MapBox with React.js. This is my code:
import ReactMapboxGl, {Layer, Feature} from "react-mapbox-gl";
render() {
const Map = ReactMapboxGl({
accessToken: "..."
});
return (
<div className="App">
<Map style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw",
}}>
<Layer
style={{
position: 'absolute',
left: 0,
top: 0,
}}
type="symbol"
id="marker"
layout={{"icon-image": "marker-15"}}>
<Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
</Layer>
</Map>
{/*<button onClick={this.requestLocation}>Refresh position</button>*/}
</div>
);
}
The problem is, this is the result:
It's always precisely 50% of the width. I'm using this module: https://github.com/alex3165/react-mapbox-gl
What did I mess up?

Sorry for the late answer, this is caused by come css conflcts.
Try to comment the text-align center for .App
.App {
/* text-align: center; */
}
This should work!

Related

React.js - Styled components - center image in direct div parent with other objects

I understand that question looks pretty easy, but I haven't found anything helping me.
I have an image inside a div, and I want that image to be centered in that div even if I add, for example, a text.
Here is some code and images to better understand that problem :
If I only have my image in my div (with solid border), all is well :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
But adding a text, I can't figure out how to keep the image in the center of the div (well aligned with the grey lines) and the text below that :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
Here is a full example :
<div style = {{display: flex;
flex-direction: row;
height: 90%;
width: 100%;
justify-content: center;
align-items: center;}}>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
<Line/>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
<Line/>
</div>
Thank you in advance for your precious help !
You can use flexbox to do this very easily.
I've created an example here for you (doesn't include styled-components but your issue is not the styled components anyway) https://codesandbox.io/s/solitary-night-7859bz
you should use flex-direction: column;
import { React } from "react";
export default function Demo() {
return (
<>
<div
style={{
display: "flex",
flexDirection: "column",
height: "90%",
width: "100px",
border: "2px solid",
justifyContent: "center",
margin: "0 auto",
alignItems: "center"
}}
>
<div>
<img
height="75px"
width="75px"
src={
"https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
}
/>
</div>
<div>test</div>
</div>
</>
);
}

Align button to the bottom of the page using MUI v5 in React

I'm trying to position the button exactly at the center bottom of the page irrespective of the content height in that page.
Excerpt from my code
const useStyles = makeStyles({
button: {
bottom: 0,
right: 0,
position: "absolute"
}
});
export default function Home() {
const classes = useStyles();
return (
<div>
<Box>
<Box>
<Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
Some data
</Paper>
</Box>
<Box textAlign="center">
<Button
className={classes.button}
variant="contained"
sx={{ width: "200px" }}
>
Submit
</Button>
</Box>
</Box>
</div>
);
}
I created a working example using CodeSandbox. Could anyone please help?
This is more css related (see other post) but you as you manually set the width of the Button you can position it 50% from the left and then subtracting half of its width from its left margin:
bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"
see exemple

Unable to apply media specific styling to the error page that appears when Javascript is Disabled

I have a website and I want to add a custom error page when javascript is disabled. I added a component inside inside _document.js
<body>
<noscript>
<ErrorPage />
</noscript>
</body>
Then that page is defined like this
function ErrorPage() {
const requiredMsg = 'Javascript Required'
const errorText = 'We’re sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.'
return (
<div style={{ width: '100%', textAlign: 'center' }} >
<img style={{ width: '100%' }} src={ 'img.svg' } />
<Typography component='h1' style={{ fontFamily: 'lato, sans-serif', color: '#1074C3' }}>{requiredMsg}</Typography>
</div>
)
}
export default ErrorPage
It looks good, but I need to add some media specific styling and elements to the page.
Like it needs to take up entire space in mobile, while in desktop, it should just occupy the middle 200 px height, and rest should have a faded background.
How is that possible? Can this be achieved?
I was able to achieve this by placing the styles within inside _document
<Html>
<noscript>
<style>{`
div.errorPage {
background-color: rgba(0,0,0,0.3);
}
/* This is mobile */
#media (max-width:600px) {
div.errorPage {
background-color: none;
width: 100%;
text-align: center;
height: auto;
}
}
`}</style>
</noscript>

CenterText in doughnut in react

centerText: {
display: true,
text: `${income}`,
fontSize : 10
}
I'm not able to see center text using about code in option of doughnut chart.
Anyone know why?
Thank you in advance
It was sometime ago when I was researching about adding centering text in react-chartjs-2's Doughnut, and I briefly remembered the easiest way to achieve center text in Doughnut is actually using relative and absolute positioning to add a layer to the doughnut.
<div style={{ width: '200px', height: '200px', position: 'relative'}}>
<Doughnut data={data} options={options} width={200} height={200}/>
<div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px', lineHeight: '20px'}}>
<span>Text here</span> //may use text-align here to center text
</div>
</div>

React Native Modal styling

So, I have a modal in react native which takes my whole screen, I do not want this to happen, any ideea how to configure it?
I have the following structure
<Modal visible={props.display} animationType="slide" style={{
width: '50%',
height: '50%'}}>
<Wrapper>
<ShiftDeclinedWrapper>
<CenterText padding="20px">{props.data}</CenterText>
<Footer>
<ButtonWrapper>
<Button
isDisabled={props.isLoading}
onPress={() => props.declineAccept()}
textColor="white"
color={theme.color.red}>
Decline
</Button>
</ButtonWrapper>
<ButtonWrapper>
<Button
isDisabled={props.isLoading}
onPress={props.declineBack}
textColor="white"
color={theme.color.green}>
No, thanks
</Button>
</ButtonWrapper>
</Footer>
</ShiftDeclinedWrapper>
</Wrapper>
</Modal>
The Wrapper component structure is
export const Wrapper = styled.View`
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex: 1;
`;
ShiftDeclineWrapper is just
export const ShiftDeclinedWrapper = styled.View`
text-align: center;
`;
I have tried putting 50% width/height just so i can make sure it works so i can style it how i want, I tried putting it on the modal, wrapper, also shiftdeclinewrapper too nothing worked
From the Modal documentation here, you can't use the style prop for this.
You can add the styles to your <Wrapper> element and add the prop transparent to your Modal to get a transparent background (instead of the default white).
<Modal visible={props.display} animationType="slide" transparent>
<Wrapper style={{width: '50%', height: '50%'}}>
You also have to use the style props over on your <Wrapper> component.
This worked for me!
<Modal
presentationStyle="overFullScreen"
transparent
visible={true}
>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
backgroundColor: "#fff",
width: 300,
height: 300,
}}>
<Text>MY TEXT </Text>
</View>
</View>
</Modal>

Categories

Resources