I am using react-flexbox-grid from https://github.com/roylee0704/react-flexbox-grid, while it allows me to specify the column sizes I am not able to fill my whole page.
I want the Holy-Grail layout as seen here:
You can do this with plain ol' flexbox. You probably just want a container with min-height: 100vh;
<div class="container">
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
With the following CSS:
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.header, .footer {
height: 76px;
}
.left, .right {
width: 76px;
}
.content, .center {
flex: 1;
}
.content {
display: flex;
}
here is a simple codepen demonstrating it in practice
Related
See the fiddle
https://jsfiddle.net/m942h0wm/6/
HTML
<div class="container" ng-app="app">
<div class="main">
<p>Main</p>
</div>
<div class="aside">
<canvas class="chart chart-doughnut"
chart-data="[10,20,40]"
chart-labels="['one', 'two', 'three']">
</canvas>
</div>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
border: solid 10px;
}
.main {
flex-grow: 2;
flex-basis: 300px;
}
.aside {
flex-grow: 1;
flex-basis: 200px;
}
if you shrink the window so the layout pops to vertical, when you resize back up the layout doesn't pop back
has anyone else found this and solved it?
I found the solution here
Flex items not shrinking when window gets smaller
min-width: 0;
on the items :)
That did not work for my linechart, I had to use :
canvas
{
width: 100% !important;
}
from https://github.com/jtblin/angular-chart.js/issues/614
My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be opened in a mobile browser. As you scroll you will see that the red boxes poke out of the border-radius corners at the top and bottom of the grey element. If anyone knows of anyway to get rid of this problem, please help! Thanks in advance!
http://jsfiddle.net/Thatguyhampton/LLn74/
html:
<div class="card scrollable">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css :
.scrollable {
box-sizing: border-box;
overflow: auto;
overflow-y: overlay;
position: relative;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.card {
height: 300px;
width: 100px;
background-color: grey;
border-radius: .5em;
}
.content {
height: 50px;
width: 100%;
background-color : red;
margin-top: 10px;
margin-bottom: 10px;
}
Just want to stress that I only see this on mobile browsers.
remove the -webkit-overflow-scrolling: touch; and it will fix it :)
I'm having a really hard time understanding ngAnimate.
HTML:
<body ng-init="hide=false">
<button ng-click="hide=!hide">Toggle</button>
<div class="item" ng-hide="hide">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</body>
CSS:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.item {
padding: 40px;
background: orange;
margin-bottom: 50px;
transition: all linear 3s;
}
.item:hover {
background: red;
}
.item.ng-hide-add {
background: red;
}
Example: http://plnkr.co/edit/rixKjjvy4TUiu1r3MSFm?p=preview
The hover transition works fine, but the ng-hide-add doesn't animate at all.
Im trying to make a fluid responsive web that contains an horizontal navbar, my problem is that at a certain width of the browser window the elements of the bar start to relocate one on top each other, is there any way to avoid this behavior in order to make the navbar just stretch until a certain media query break point. I need to website to look al least decent in the ranges where the querys are not activated.
Here's how things look so far:
http://wearehellyeah.com/test/home_formacio.html
<div class="barra">
<!--Menu Principal-->
<nav class="menu-principal">
<ul class="menu">
<li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
<li class="item">Actualitat</li>
<li class="item">Activitat de l'oficina</li>
<li class="item">Vocalies</li>
<li class="item">Formació</li>
<li class="item">Serveis</li>
<li class="item">Actualitat</li>
<li class="item no-border">El Col-legi</li>
<li class="item home">Marcar com pàgina d'inici</li>
<li class="item conectados">Conectados 103</li>
<li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
</ul>
</nav>
<!--Fin Menu Principal-->
<!--Input buscador-->
<div class="buscador">
<form action="">
<input type="text" id="ip-search">
</form>
</div>
<!--Fin de Input Buscador-->
</div>
The CSS:
.barra {
background: #00b1da;
width: 100%;
padding: 0;
}
.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
}
.menu .item {
float: left;
list-style: none;
}
.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}
.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}
.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}
.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}
You could add a min-width:
.menu-principal {
min-width:883px;
}
Then it won't go on top of each other. However there are too many options on the navigation bar, you might want to make it a drop-down box when it goes into a mobile media-query range.
e.g. http://vagish.com (as you make the browser width smaller, it changes the navigation bar)
You could have a media query which takes place between 768px and 880px, and reduces the spacing between menu items, and this should be able to make it look fine until you hit the 768px media query.
This would work (along with the CSS above):
#media all and (max-width: 768px) and (min-width: 880px) {
.menu-principal {
padding:0px;
}
.menu-med .item a {
padding:0 .69em;
}
}
I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here How can I resize an image dynamically with CSS as the browser width/height changes?, but I'm not able to make that solution work. What am I missing?
I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...
Here is my html:
<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>
Here's my CSS:
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}
#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
.content_well_pop {
left: 0;
width: 100%;
}
.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}
p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}
.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
Thanks
this css rule here:
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}
You are specifiying a width on the parent container of the image. Change it to max-width instead of width.
Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.
HTML:
<html>
<body>
<div id="page-wrapper">
<div id="inner-wrapper">
<!-- your content here -->
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="<bild>" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#bg div
{
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
#bg td
{
vertical-align: middle;
text-align: center;
}
#page-wrapper
{
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
width: 100%;
height: 100%;
}
#inner-wrapper
{
margin: 30px auto;
width: 1000px;
}