I am quite new to coding and building my first React app. I have made good progress in styling and solving my other problems on my own, but I just cannot figure out this one: my rendered map obscures something else on the page. For styling I am using v5 of Material-UI.
To be clear, the map renders and I have no issue seeing my map in my app (sometimes), as well as having it geographically positioned to specific coordinates. The code looks like this for its specific grid:
<Grid container direction="row" rowSpacing={150}>
<Grid item xs={12} position="relative">
<MapsContainer />
</Grid>
</Grid>
Depending on the grid position property of the MapsContainer, the map either disappears completely (absolute and fixed), or just a sliver shows above the page footer unless rowSpacing is as obscene as the example code, and I lose footer functionality (no set property). When position is relative, I lose both header and footer functionality.
Regardless of the footer component position property, the map does not push it further down.
I hope this is not too convoluted to understand
*Edit: The problem came from the google-maps-react module. After pouring over it for 3 hours with a more skilled developer, not even he could figure it out, so we just broke it less by trying to reign in the div the rendered map would throw around itself. Is it fixed? Yes. Is it fixed in the proper way? Probably not. If you have the proper way to fix it, by all means share!
Related
I finished working on an app project and I built the final project. The problem is that the classes and hooks get placed but didn't render in the final version for some reasons...
Here you can find the live version https://www.htfgamestudio100.com/
Inspecting it you will find the content div that has the main logic of the app. All the classes and hook functions didn't get render at all but the logic get placed correctly.
Style is missing width, height & background-size (cover/contains etc), as your image is in the background the button cant size around it, so you would need to specify the dimensions to 'contain' it correctly.
<button alt="Lost Ark WIP" title="WIP" value="" id="MonsterId1" style="background-image:url(https://i.stack.imgur.com/XePN4.jpg);height:10px; width:30px;background-size: cover;"></button>
see pen
I found the problem... For some reasons my div's opacity is dropped to 1% so they become invisible. I fixed the problem by finding where I use opacity and changed it from 90% to 0.9. Seems that react can't understand the opacity expressed in % for some reasons.
I have a react app that uses ant design and styled components and am trying to get antd tabs to render the full height available but setting height to 100% or min-height to 100% is not working, however if I set 100vh it works... but this (of course) does not give the result I want because the component I am trying to render is not the full height of the screen.
Does anyone have experience with ant design that might have a good trick? I've looked at some solutions here on stack overflow but they do not seem to work. One was to use a row and col (here). I've also read through issues on github that suggest to target the specific antd classes like this one but it also does not seem to work.
Finally, I have a code sandbox link here that I have taken directly from ant design's site and added a style prop to the TabPane, setting the height and background (just to be able to see the effect) if someone would like to fiddle with it.
Please chime in if you have experience and a definite solution or even a suggestion at this point. Thanks in advance.
you can do with height : 100vh property .with appropriate padding .
here is the code sandbox link for the same .
https://codesandbox.io/s/bold-silence-d02qi?file=/index.js:2079-2088
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
I am new to React. Basically, I have been given a HTML Bootstrap template. It is pretty simple... a left sidebar (always present), an adjacent menu (always present) and all other components fit adjacent to side bar and under menu. I have attached a pic so you can easily see what I mean.
I can display the components but my dynamic components or the components that change are rendered below the sidebar and NOT next to it.
I have tried to solve this issue for days... no luck. Help would be greatly appreciated.
Thank you
Vincent
It seems like a css issue, make sure you have your child divs inside the parent and nothing is position absolute. if you have it online I can take a look.
I'm building a React Native app which has a screen containing a list of several items the user can see. I wrapped up the elements by using a ScrollView component and it works fine as shown below:
However, I'd like to have the vertical scrollbar always visible just to let the user know he can see more items than the ones shown in the first place. I've read the ScrollView documentation but it seems that there is not an option to make it happen.
Does anyone know if there is a way to achieve that or perhaps a workaround to make it intuitive to the user that there is a scroll on the list?
Try this ,Its working for me
persistentScrollbar={true}
https://facebook.github.io/react-native/docs/scrollview#flashscrollindicators
The closest thing to showing the scroll indicator constantly that is available in React Native is flashing the indicator. You can obtain a reference to the scrollview and call the flashScrollIndicators() method. There is no known way to disable hiding the indicator without writing native code. If you want to go down that path, you could try something like this for iOS.