I'm working on a web-app where the layout is the next :
A left-side navigation menu
A right-side body for content
My problem is that even though both sides height: 100% when content is added to the right-side, the left one doesn't expand !
I illustrated my scenario with this photo to explain more what's happening.
[UPDATE]
Here is the code snippet that I'm using for building this layout.
PS : it's an Angular app so I'm using <router-outlet> where I display the content's components:
app.component.html
<div class="dp-flex-display dp-flex-row dp-full-width-height">
<aside>
<dev-portal-side-navigation></dev-portal-side-navigation>
</aside>
<aside class="dp-full-width">
<router-outlet></router-outlet>
</aside>
</div>
app.component.scss
.dp-flex-display {
display: flex;
}
.dp-flex-row {
flex-direction: row;
}
.dp-full-width-height {
min-width: 100%!important;
min-height: 100%!important;
}
.dp-full-width {
width: 100%;
}
Related
I have a page with a section of tabs in which each one of these tabs has more or less content and when I open a tab with a lot of content and then I go to a tab with less content the page keeps allowing scroll (even it the page is empty), I've just found answers about when the content grows up but nothing about when it shrinks out.
What I want to achieve is to be able to scroll when there is a lot of content on the screen and use just the view height when there is little content on the screen.
This is the basic scheme of the page
HTML:
<body>
<div class="wrapper>
<div class="content">
</div>
<footer>
</footer>
</body>
css:
body {
margin: 0;
padding: 0;
height:100%
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
position:relative;
bottom:0;
}
This is how it looks when I open a lot of content and then a little:
add max-width: 100vw; to your overflowing element replace 100vw with ur value
I have a container which fits the whole viewport with nav, main and footer nodes. The main node needs to fill all of the available space of the page so its height is dynamic. Inside the main node I have a short hierarchy of nodes, where cats node may not fit the parent.
<div class="container">
<nav>
<input />
</nav>
<main>
<div class="scrollable">
<div class="cats">
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/300/300" />
</div>
</div>
<div class="cat">
<img src="https://placekitten.com/280/280" />
</div>
</main>
<footer>
<button>
Click me!
</button>
</footer>
</div>
I want to force the scrollable node to fill the main parent, but when its children overflow, show a vertical scrollbar. By any means I do not want the main node to resize to fit children, cause this results in content not fitting the viewport.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column
}
main {
flex: 1;
display: flex;
}
.scrollable {
flex: 1;
display: flex;
overflow-y: scroll;
}
.cats {
flex: 1;
display: grid;
grid-auto-columns: 1fr;
grid-gap: 10px;
}
This solution works... under Chrome. It does not under Firefox. I get the feeling that this chain of flex is not the way to go. I will be thankful for any hits how to make it more universal.
Here is a working fiddle: https://jsfiddle.net/ktguLn73/13/
Funny thing is, when I put overflow-y: scroll on the main node, it works in both Chrome and Firefox. But this is not the result I prefer.
Thank you for your help.
I remember reading an article with a similar problem where firefox wouldnt scroll with flex oveflow. Check out this page and see if it helps: https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
Read through the article and min-height: 0 on the container solved the issue for the layout in firefox.
I am currently working on a website where sometimes (for instance when the loading square comes up - like image below) the main content div is too small to fill the entire page with the footer/header.
I would like the main content that is in between the header and footer to stretch when the content div is too small, so that it fills the entire screen, while keeping the footer and header in view.
I have tried many different ways to do this, but all to no avail so far. The image below illustrates my problem.
The HTML layout looks like this:
<body>
<div class="nav-container"></div>
<div class="main-container"></div>
<footer></footer>
</body>
If you are familiar with flexbox, this would do the trick:
<body>
<header></header>
<div class="main-container"> Main content </div>
<footer></footer>
</body>
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header, footer {
flex: none;
}
.main-container {
flex: auto;
}
I believe I have located a bug I have, but am not 100%. I have a basic grid setup with three main sections. Two of those sections are:
-light-gray
-white-green
I then have a 100% width footer under both of those two sections. On the left side of my footer (underneath light-gray) an input I have, shows up, but it acts as if something is over-top of it. If I start inputting in the input, then it appears as it should. It is almost like something is covering it, but allowing it to be shown. Then whenever I submit that input, the normal pop-up I have gets covered by the white-green div, even though the popup has a higher z-index.
The layout looks like this:
However, I will put the link to the live site, so you can see what this is actually doing...note the input in the left hand side of the footer...it looks dark, but if you click in it and type something it goes back to its original state. Then if you put a random email address in it, and submit, you will notice the pop-up gets covered up.
None of these issues occurred until I turned this layout into a flex layout.
Here is the base code for it:
.project-flex-wrap {
display: flex;
}
.left {
display: flex;
flex-direction: column;
flex: 0 0 33%;
}
.white-green {
background: rgb(241,250,247);
flex: 1;
z-index: 55;
text-align: center;
}
.light-gray {
background: #E0E0E0;
padding-top: 150px;
flex: 100vh;
}
<div class="project-flex-wrap">
<div class="left">
<div class="light-gray"></div>
</div>
</div>
<div class="white-green">
</div>
I'm not sure if your question is asking if you can accomplish this all with only flex.
If that's the case here's a resource.
However, a solution would be adding a section break and a footer section, listed code below.
<div class="project-flex-wrap">
<div class="left">
<div class="light-gray"></div>
</div>
</div>
<div class="white-green">
</div>
<div style="clear:both;"> </div>
<div class="footer"></div>
Add this CSS:
.footer {
background-color: blue;
width: 100%;
height: 100px;
}
I have some code inside pre and code tags in a bootstrap container that I'd like to scroll horizontally. This normally works fine, until I add a flexbox to my page's body in order to accomplish a sticky footer. After this, the code no longer scrolls horizontally when the page is narrow (such as for mobile viewing).
Here's my code (note that horizontal scrollbars for the code go away as you narrow the window):
html, body {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
code {
max-height: 200px;
background-color: #eeeeee;
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
}
.flexer {
flex: 1;
}
footer {
background-color: #CCC;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 docs">
<p>Some sample code</p>
<pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre>
</div>
</div>
</div>
<div class="flexer"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
footer
</div>
</div>
</div>
</footer>
http://jsfiddle.net/nturor46/1/
Any idea how to use flexbox for sticky footers while still maintaining scrolling pre / code?
a simple
.container { width:100%; }
resizes the website correctly. BUT then, Chrome doesn't let you actually use the scrollbar. This is caused by it overflowing the dimension of all of its containers (apart from BODY).
Hence we gotta tell the browser to correctly recognize the pre node:
.container {
max-width: 100%;
}
pre {
position: relative;
}
This tells Chrome to correctly handle mouse events again AND fixes the layout
Please note that the margin-bottom of the pre-node is lost in overflow-country, which could cause your layout to look weird. max-width was used in the final version to make sure it doesn't overwrite fixed width statements made in bootstrap
PS: tested in current Chrome and Firefox http://jsfiddle.net/nturor46/32/
Those bootstrap styles just wreak havoc on natural CSS!
The problem seems to come from a conflict between your column-direction flex container and bootstrap rules. It's basically resulting in the horizontal scrollbar shifting from the pre / code content box to the browser window, when the content box overflows the screen.
With these adjustments, your desired layout seems to work:
make the primary .container div the primary flex container (in your code this role is played by the body element)
move the footer element into this new container
use flex auto margins to stick the footer to the bottom
override bootstrap margin, padding and width wherever necessary
HTML
<div class="container">
<div class="row">
<div class="col-md-12 docs">
<p>Some sample code</p>
<pre><code>Loading mirror speeds from ... cached hostfilebase</code></pre>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
footer
</div>
</div>
</div>
</footer>
</div>
CSS
html, body { height: 100%; }
body > .container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%; /* override bootstrap styles */
padding: 0; /* override bootstrap styles */
}
body > .container > .row {
margin: 0; /* override bootstrap styles */
display: flex; /* nested flex container */
justify-content: center; /* center content box on page */
}
body > .container > .row > .docs {
width: 75%; /* adjust width of the content box here */
}
code {
max-height: 200px;
background-color: #eeeeee;
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
}
footer {
margin-top: auto; /* stick footer to bottom of container */
background-color: #CCC;
}
Revised Fiddle
Tested in Chrome and Firefox.
What happens here is most definitely a bug in Chrome.
After playing around with your Fiddle, and looking at it with other browsers, I can conclude that this is a Chrome-specific problem. And a curious one.
For some reason, <div class="col-md-12 docs"> grows to the size it should have (the height of p and pre together), but doesn't account for the horizontal scrollbar inside the pre tag.
Here's an image to demonstrate the problem. The part with the red background is the container.
Since pre has a border of 1px wide at the bottom, the result leaves a 1px gap for you to actually use the scrollbar. You can try it yourself. Just try to grab the most upper 1px line of the scrollbar.
Removing the flex properties does fix your problem, but we're not going to accept that.
Now, I would've thought that adding a padding of 0.1px to the bottom of the parent would fix the problem, but it didn't. I then tried wrapping the pre tag in a div with class chromefix, and then added the following CSS
.chromefix{
overflow: hidden;
}
But that created an even weirder situation where the container grew with the scrollbar for about 50%
So I tried combining the two, but not a lot of difference there.
This is where I started looking at the pre tag and its properties. It has overflow: auto by Bootstrap default. So what I tried was adding
pre{
overflow-x: scroll !important;
}
And guess what? It worked!
So all you have to do is add overflow-x: scroll !imporant to pre, and you're good to go! Here's a working Fiddle.
Hope this helps
As a sidenote. I think you want to move max-height: 200px to pre as well. It won't work when you've applied it to code.
Problem seems to be with the width of <pre>.
When width of your screen goes below 768px no specific width is applied to the .container by bootstrap hence the issue is occurring.
When width of your screen is above 768px following classes from bootstrap.css come in picture.
#media (min-width: 1200px)
.container {
width: 1170px;
}
#media (min-width: 992px)
.container {
width: 970px;
}
#media (min-width: 768px)
.container {
width: 750px;
}
As you can see once the width goes below 768px there is no specific width given.
To counter this issue, you have to write your css, something like this.
#media (min-width: 480px) {
.container {
width: calc(100% - 40px);
}
}
Basically, you have to specify width for .container when screen width goes below 768px. Once you do, it will fix your issue.
Wrap the prev tag and its content with div like below.
<div class="code">{your code goes here}</div>
css :
.code{
width:92vw; /*you can change this in media query to specific device width for better results*/
overflow-x:auto;
}
Working jsfiddle link