I cant seem to give my parent div a 100% height due to the fact that the React app div is not extending.
i have 3 children to the main Div which is class named as side-bar-container. I want the middle child to flex grow and take up all space and i did provide it a flex grow of 1 and others of 0 but the problem is there is no room to grow as shown in the picture.
edit: sorry i edited the question no react code is present im just trying to explain my issue
You'd want to utilize the entire screen height on your parent container. You have 2 options:
Apply 100vh on the App class, and then ensure your side-bar-container spans 100% height.
.App {
height: 100vh;
}
.side-bar-container {
height: 100%;
}
Apply 100vh on side-bar-container.
.side-bar-container {
height: 100vh;
}
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.
For my new react project I need a split pane.
I am using https://github.com/tomkp/react-split-pane for this.
After I implemented everything, I wanted to my header above so it would look like this.
So I added the header to my root component.
render() {
return (
<div className='App'>
<h1>This is my heading</h1>
<SplitPane split='vertical' minSize={50} defaultSize={100}>
<div>split 1</div>
<div>split 2</div>
</SplitPane>
</div>
);
}
}
Just like this without any css it gave me nearly a correct result. And the only problem here is that the split pane seems to take 100vh as its height and therefore the overall application is bigger. Which gives me the nice scroll bar, which I don't want.
My next idea was to just put everything into css grid (I know that it probably isn't the best use case but at least I would know there how to solve the sizing problem) and then resize it using the relative units.
The css I added to my main component is.
.App {
display: grid;
grid-template-rows: auto 1fr;
}
This change didn't get me the effect I wanted it to. Instead of neatly stacking everything it somehow put the split pane above the header.
I thought that I did something wrong with css grid, so I applied display: flex; which gave me the same problem.
I don't really know what the problem here is, so I'm curious if anybody had encountered such a problem before.
SplitPane source code
Add this to your .App selector:
.App {
position: relative;
}
Also, if you want the widths of both panes to be exactly half, change your SplitPane component to this:
<SplitPane split="vertical" minSize="50%" defaultSize="50%">
Unfortunately, there is a problem where the panes stops resizing and the application goes out of bounds at very small widths.
In response to:
SplitPane shrinking down to a size where it's not really
usable even though the height is set to 100%.
Content inside SplitPane is not visible/usable because:
SplitPane has the property height: 100%. This means SplitPane's height is 100% of its parent's height.
SplitPane has the property overflow: hidden. This will hide any content that exceeds SplitPane's dimensions.
Since SplitPane's height = .App's height = h1's height and the height for h1 was about 30-40px, SplitPane's height was also about 30-40px. This meant any child of SplitPane with a height greater than 30-40px had its content cut off.
SplitPane is most likely calculating how much to offset itself from the top by calculating the total height of its preceding siblings.
So, now we know SplitPane's CSS properties look like this:
{
position: absolute;
top: 0 || /* auto-calculated by SplitPane */;
left: 0 || /* auto-calculated by SplitPane */;
overflow: hidden;
height: 100%; /* total height of preceding siblings */
...
}
Your next steps would be to decide on how you would like your application to look and function and make choices based on your decision. To start:
Do you want your navigation bar fixed to the top of the viewport?
How would you like to handle excess content inside of the panes if you don't want a scroll bar?
Is your website mobile-friendly? If so, how would you like to display the split panes on small screens?
In response to:
How do I change to position: relative while assigning all space below the header to the split view?
Some possible solutions would be to use Javascript or possibly Sass/SCSS/Less to set the total height of SplitPane equal to the viewport's height minus how much SplitPane was offset from the top.
It is hard to give a definitive answer because I do not know how you want to handle viewing content that exceeds 100vh without a scroll bar.
In response to:
[I] can't use display: grid or flex since it would still overwrite the header.
Flexbox/Grid isn't working because SplitPane isn't living in the same space as its siblings. You'd have to overwrite SplitPane's position property to static.
CodePen
.App {
display: flex; /* Introduce Flexbox */
/* This is added to change the orientation of elements from
left-right (row) to top-bottom (column). */
flex-direction: column;
}
<SplitPane ... style={{ position: "static" }}>
Next steps
The only thing I can recommend at this stage is to add height: 100vh and width: 100vw to .App.
I have a screen divided into 3 columns spanning the full height of the screen, I would like to have a scroll bar within each of the 3 sections, not one for the entire page. Everything I find suggested is with a fixed height of the container element. Is it possible to have this setup with a fluid dynamic height?
Thanks!
You can set to the 3 elements have the height of the screen, so it doesn't block the page scroll, and they fills the entire screen
.column {
height: 100vh;
overflow: auto;
}
Set the height of the elements to the height of the screen and overflow to auto using css:
height: 100vh;
overflow:auto;
Here's a jsfiddle: https://jsfiddle.net/h7qkcnw1/
hope that helps.
I have a panel with a height of 100vh, so 100% of the screen (but height: 100% doesn't work, for some reason).
This panel must show a div with its own contents and the footer.
The footer is normally displayed under that panel, but in the front page it must be inside it, so I have to disable the normal one and call it inside the panel.
Thus, it must have position: absolute and bottom: 0.
Now the problem is that the footer takes its own height (which changes a bit when resizing the window's width), and the other div in the panel must take all the remaining height.
So, is there a way to set that div's height dynamically, rather than filling the CSS with media queries for each window width where the footer's height changes, setting it as height: calc(100vh - [footer height])?
Firstly, if you don't set height for parent elements, setting height in percentages on the child won't work. Your parent elements should have their height set to 100% (including html and body elements).
Secondly, if your browser support is IE10+, I recommend using flexboxes.
Here's how you do it (without browser prefixes):
.parent-container {
height: 100%;
display: flex;
flex-direction: column;
}
This will set the parent container as flexbox and change its direction to "column" (so its children stack one under the other).
.expanding-child {
height: 100%;
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
}
This is the wrapper for your content. It will expand as much as it can, keeping in mind your footer's height.
.sticky-child {
flex-basis: auto;
flex-shrink: 0;
flex-grow: 0;
}
This is your footer that will now always be at the bottom, pinned, without overlapping the scrollable content.
Here is what your HTML would look like:
<div class="parent-container">
<div class="expanding-child">
</div>
<div class="sticky-child">
</div>
</div>
And I made a quick fiddle to demonstrate it here
This will work as intended only if you set height to 100% on all parent elements.
Edit: here is a good source to learn more about flexbox, I recommend looking into it. And here is one I used when I first started using flexbox.
I think you are asking about sticky footer. I hope it will helps you. Always footer fixed at bottom using FlexBox
Fiddle
I'm trying to achieve the last piece of my general template for articles in a wordpress blog.
I've got an header/menu which is position: fixed.
Then I have a div .postThumbnail with a child img which is position: fixed so the following content can overlap the img when scrolling.
I also have a div that copy the img'height as the image is fixed.
Fact is, this could be a lot easier if .postThumbnail had an height, but it's value is equal to 0.
I do not know why.
What I intend to do is to set .postThumbnail's max-height equal to the height of the viewport minus the height of the header/menu, so if an image is taller than the viewport, it won't overflow and the following content which can be scrolled will appears right after the image (and not after the total height of the image).
Basically, I need to define .postThumbnail's height so I can apply an overflow:hidden.
Any idea?
I created a JSFiddle so you can actually see what I'm talking about.
Some of the current code :
#single\.php .postThumbnail img {
position: fixed;
z-index: 1;
width: 100%;
min-width: 640px;
height: auto;
}
#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
visibility: hidden;
}
What I need to achieve :
#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}
With this fixed, I could fix the rest of the page as the content's min-height must be equal to the image's height in order to cover it properly.
Well,
I really simplified everything since I don't need a .postThumbnailGhost in this new version.
I also made it in Jquery as I couldn't do it fully in CSS ( :'( ).
Here is the script that is doing the job :
function refreshDynamicContent(){
$('.postThumbnail').height($('.wp-post-image').height());
$('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
$('#post').css('min-height', $('.postThumbnail').height());
}
refreshDynamicContent();
$(window).on("resize", refreshDynamicContent);
New JSFiddle
And I don't need an overflow anymore because I can set the height to the window's height!
YAY!