I am trying to create a MapView component using React Native and have given it the following styling:
map: {
flex: 1,
width: vw,
height: vh,
}
The component is to render completely between a navbar and a footer.
How do I get the Map to render with 100% height between the navbar and footer?
Use calc() in the css.
for exapmle, if your header is 50px high you would set the map height: calc(100% - 50px;)
fiddle: https://jsfiddle.net/DIRTY_SMITH/3oo2jmko/2/
Related
I am trying to make my table header fixed with rest of the table body scrollable in my react application.
This I have been able to achieve using the following css
// Parent Container
.Table-Container {
max-height: 60vh; //Making my table height unresponsive for some reason
min-height: 40vh;
max-width: 100vw;
position: relative;
overflow-y: scroll;
margin: 1rem;
}
// Styling and posiition for table header
.tableHeader .th {
position: sticky;
top: 0;
}
My layout is something like this.
Card is expanding because of the values assigned to table height to make it scrollable and header sticky
I don't want my wrapper content to scroll. The card height should not expand outside the remaining space
Ideally, I want header and footer fixed and the remaining space should be utilised by the breadcrumb, Filter buttons for the table(if any) and my table itself (again with fixed header) with the ability to auto expand/shrink based on the available space
I want the table height to fit inside the cardbody(parent div) automatically, but without assigning height, the scroll wouldn't work. It is only considering height in px or vh. Setting the height to auto also wouldn't work.
I want this to be responsive across different screen sizes.
Declaring a height in vh is also coming in the way of making it responsive.
Would appreciate any help or direction on this.
Thanks
I tried to set the height to my main-content like this
.main-content {
height: calc(100vh - #{$header-height} - #{$footer-height})
padding: calc(#{$header-height} + #{$grid-gutter-width})
calc(#{$grid-gutter-width} / 2) $footer-height
calc(#{$grid-gutter-width} / 2);
}
The card is still expanding outside the defined height of the parent.
I even tried using box-sizing: border-box but this wouldn't have any impacts either.
When I use this logic in a normal html + css this works perfectly,
However in react it is not behaving as expected.
I have some svg files with position: "absolute" in my page, but whenever they're positioned close to the corners of my page they end up expanding the width of my Container element (I'm using Material UI React), I've tried using "maxWidth":"100vw" on the page container, with no success, as well as the prop maxWidth="lg" and "md". If possible I'd like the svg or img file to just disappear into the nothing without interacting in any way with its outside container https://gyazo.com/9d3d8cf86748ac434700ac0b0ceaf1c6
Have you considered doing something like this?
.container {
/* If for some reason the image doesn't fit, hide the overlap */
overflow: hidden;
}
/* Make image sit within it's container */
img {
height: auto;
width: 100%;
}
I have following component structure in simple react app
<div id='app'>
<Navbar />
<Graph />
<Footer />
</div>
Navbar has fixed height 80px
Footer has fixed height 40px
Graph is a d3-wrapper div that contains SVG with graph elements.
How to fit Graph into the remaining height of the screen so it always occupies the remaining height the screen?
How to update react component containing d3-wrapper/SVG on resize event?
PS. As I want the graph to be responsive I should not hardcode width and height of the SVG.
Here is codepen snippet where I tried to solve this issue.
Ok so I have found solution for this.
The shortest way is to leave majority of work to css:
.d3-wrapper {
width: 100%;
height: calc(100vh - #{$footerHeight + $navbarHeight});
}
svg {
width: 100%;
height: 100%;
}
Then in d3-wrapper component, if needed, create ref to the div
and pass clientWidth and clientHeight to svg component as props.
For on resize update, add resize listener and make svg component update itself.
Using a responsive fluid grid and images are 800px x 500px
Problem: When images load, the footer as it the top and is pushed down while the images are loading in.
Setup: Using a div for the images and div for the footer.
Goal: To have the footer always remain in the correct position, not trying to put it in an absolute spot, just looking to have the images spacing accounted for.
Ideas: Perhaps use a transparent png at 800x500 so it loads first before the images.
Concerns: Creating a div placeholder at 800x500 might not work as these images are responsive in a fluid grid so they'll never actually be at that size unless the viewer has a huge monitor..
Final result when images loaded:
Current issue:
Goal for images to load:
When I know the aspect ratio for something is going to stay the same no matter what the width of the elements/screen is, I do something like this:
.image-holder {
display: inline-block;
width: 33.333%;
position: relative;
}
.image-holder:before {
content:"";
display: block;
padding-top: 62.5%;
}
.image-holder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here's a full demo: http://jsfiddle.net/serv0m8o/1/
I wrap each image in a div with a class of image-holder (which is styled to give you the 3 per row pattern that you illustrated) and make sure it is position: relative;
I then style the :before pseudo-element of that div to be the proper height of the aspect ratio that is needed. Padding in CSS is an intrinsic property, which means it is based on the width of the element, allowing you to assign a percentage which reflects the ratio. You specified 800x500 images, so (500/800*100) = 62.5% as my padding-top
Then, you can absolutely position your image to fill the full width and height of the container (which is why we set it to be position: relative;)
Doing this means that the div element is the size that the image will be, whether the image is loaded into it or not (the image itself has no bearing on the container size, since it is absolutely positioned)
With Bootstrap there is a CSS style container-fluid which we use in our app. The problem is, when the app loads I can see that the div which this CSS style is applied gets this:
element.style {
height: 322px;
}
However I tried to use Javascript to set the CSS height of container-fluid on app load, the height gets that size, which is actually the initial height of the browser. So the issue is that when I resize the browser there gets a white space that the background of the div which have this container-fluid property.
Use !important with that class styling and javascript won't take over this property.
For example:
#main {
height: 100% !important;
}