Greetings Overflowers,
I have an HTML page as follows:
1. HTML, BODY, DIVs and SPANs are reset to have 0px border, padding, margin and outline
2. HTML, BODY and DIV elements has display: -webkit-flex and -webkit-flex: 0 0 auto
3. HTML and BODY with height: 100vh and width: 100vw
4. Inside BODY, a DIV named #slider with display: -webkit-flex and -webkit-flex: 0 0 auto
5. Inside this #slider, two DIVs #sidebar and #main with display: -webkit-flex and -webkit-flex: 0 0 auto for both, width: 10rem for #sidebar and width: 100vw for #main
Problem: I was expecting the width of #slider to be 10rem + 100vw, but it is only 100vw even if I change the width of #main to something smaller such as 50vw!
Am I missing anything in here?
Kind regards
/*
unicode-bidi: bidi-override;
-webkit-user-modify: read-write-plaintext-only;
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 1s ease;
*/
body, div, html, span {
background: transparent;
border: 0px;
cursor: default;
direction: rtl;
margin: 0px;
outline: none;
padding: 0px;
position: relative;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
}
body, html, div {
background: black;
display: -webkit-flex;
overflow: hidden;
-webkit-flex: none;
}
body, html {
height: 100vh;
width: 100vw;
}
span {
background: white;
}
.stretch {
-webkit-flex: 1;
}
.vertical {
-webkit-flex-flow: column;
}
body>.slider {
/*-webkit-transform: translateX(10rem);*/
}
#main {
width: 100vw;
}
body>.slider>#west {
width: 10rem;
}
#filter-sort.region, #filter-sort-options.region {
width: 10rem;
}
#doc>#east {
background: orange;
height: 6rem;
width: 6rem;
-webkit-align-items: center;
-webkit-justify-content: center;
}
#doc>#center {
background: green;
}
#header, #doc-types {
height: 2.75rem;
}
#preview {
max-height: 6rem;
max-width: 6rem;
}
#search.button, #filter-sort.button {
background: red;
width: 3rem;
}
#doc-type {
background: blue;
width: 5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body ng:controller="Docs">
<div class="slider">
<div id="main" class="region vertical">
<div id="header" class="region">
<div id="search" class="button"></div>
<div id="center" class="region stretch">
</div>
<div id="filter-sort" class="button"></div>
</div>
<div id="doc-types" class="region">
<div class="slider">
<div id="doc-type" class="button"></div>
</div>
</div>
<div id="docs" class="region">
<div class="slider stretch vertical">
<div id="doc" class="region">
<div id="east" class="region">
<div id="preview" class="region"></div>
</div>
<div id="center" class="region stretch vertical">
<span id="title" class="label"></span>
</div>
</div>
</div>
</div>
</div>
<div id="west" class="region">
<div class="slider">
<div id="filter-sort" class="region vertical">
<div id="header" class="region">
<span id="title" class="label">Filter and Sort</span>
</div>
<div id="grades" class="region">
<div id="center" class="region stretch vertical">
<span id="grades" class="label">Grade</span><br />
<span id="grades" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
<div id="doc-topic" class="region">
<div id="center" class="region stretch vertical">
<span id="doc-topic" class="label">Doc Topic</span><br />
<span id="doc-topic" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
<div id="course" class="region">
<div id="center" class="region stretch vertical">
<span id="course" class="label">Course</span><br />
<span id="course" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
<div id="sort" class="region">
<div id="center" class="region stretch vertical">
<span id="sort" class="label">Sort</span><br />
<span id="sort" class="field"></span>
</div>
<div id="west" class="region"></div>
</div>
</div>
<div id="filter-sort-options" class="region vertical">
<div id="header" class="region">
<div id="back" class="button"></div>
<div id="center" class="region stretch">
<span id="title" class="label">Options</span>
</div>
</div>
<div id="grades" class="region">
<div class="slider vertical">
<span id="grade" class="label"></span>
</div>
</div>
<div id="doc-topics" class="region">
<div class="slider vertical">
<span id="doc-topic" class="label"></span>
</div>
</div>
<div id="courses" class="region">
<div class="slider vertical">
<span id="course" class="label"></span>
</div>
</div>
<div id="sorts" class="region">
<div class="slider vertical">
<span id="sort" class="label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
See http://codepen.io/anon/pen/fluKI which works as you would expect (Chrome 27)
As far as I can tell from your description, you need to set the width and height of your flex container (#slider). Using flex: 0 0 auto; on #slider won't do what you expect since it is a flex container and not a flex item itself (read: it is not in a flex container).
Also please note that flex: 0 0 auto; is the same as saying flex: none; which removes the item's flexibility.
Related
please help me with this https://jsfiddle.net/duonglam271/spdqL73a/
I could not position the tree and those fished
.coral {
float: left;
padding-top: 2%;
}
.coral img {
width: 80%;
}
.col-9 {
width: 73%;
display: inline-block;
}
.col-3 {
width: 23%;
display: inline-block;
position: relative;
}
.col-2 {
width: 16.66%;
display: inline-block;
}
.skill-header {
padding-top: 2%;
text-align: center;
font-size: 100%;
}
.skill-level {
padding-left: 1%;
font-size: 100%;
}
.crab {
width: 70%;
margin-top: 20%;
}
<div class="container div-5">
<div class="row">
<div class="col-3 coral">
<img src='https://i.imgur.com/y7ciVbe.png' />
</div>
<div class="col-9">
<div class="col-12 skill-header">
<h1>Skills</h1>
</div>
<div class="col-12 skill-level">
<div class="col-2 ">
<h2>Beginner</h2>
</div>
<div class="col-2 ">
<h2>Familiar</h2>
</div>
<div class="col-2 ">
<h2>Intermediate</h2>
</div>
<div class="col-2 ">
<h2>Professional</h2>
</div>
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
</div>
</div>
</div>
Example
I have a look and this issue you are using the wrong measurement of grid system as it's work well with 12 grids
for 4 columns as it needs to be divided to col-3 each as 12 in total. you are using col-2 which is total in 8 which left col-4 in space and cause layout issue unless you need to put Horizontal alignment.
so I suggest you have look at grid layout and it will help you much understand
suggest code that I wrote and working on my side
<div class="col-12 skill-level">
<div class="col-3">
<h2>Beginner</h2>
</div>
<div class="col-3 ">
<h2>Familiar</h2>
</div>
<div class="col-3 ">
<h2>Intermediate</h2>
</div>
<div class="col-3 ">
<h2>Professional</h2>
</div>
</div>
Please have a look at https://v4-alpha.getbootstrap.com/layout/grid/
Have a fun with code
You can use media queries for it. I added custom font-size to h2.
h2 {
font-size:16px;
}
.coral {
float: left;
padding-top: 2%;
}
.coral img {
width: 80%;
}
.col-9 {
width: 73%;
display: inline-block;
}
.col-3 {
width: 23%;
display: inline-block;
position: relative;
}
.col-2 {
width: 16.66%;
display: inline-block;
}
.skill-header {
padding-top: 2%;
text-align: center;
font-size: 100%;
}
.skill-level {
padding-left: 1%;
font-size: 100%;
}
.crab {
width: 70%;
margin-top: 20%;
}
#media only screen and (max-width: 768px){
h2 {
font-size:11px;
}
}
#media only screen and (max-width: 768px){
h2 {
font-size:9
}
}
<div class="container div-5">
<div class="row">
<div class="col-3 coral">
<img src='https://i.imgur.com/y7ciVbe.png' />
</div>
<div class="col-9">
<div class="col-12 skill-header">
<h1>Skills</h1>
</div>
<div class="col-12 skill-level">
<div class="col-2 ">
<h2>Beginner</h2>
</div>
<div class="col-2 ">
<h2>Familiar</h2>
</div>
<div class="col-2 ">
<h2>Intermediate</h2>
</div>
<div class="col-2 ">
<h2>Professional</h2>
</div>
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
</div>
</div>
</div>
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
In my code,
Within one container Three blocks will be there. one freezes on the left and one freezes on the right and the other will scroll in between these two divs. Just like modern grids. But I don't want to use the grid.
I have tried, but the center block is not getting the Horizontal scroll.
I want no breakage of the center block, instead, it should scroll horizontally.
* {
box-sizing: border-box;
}
.container {
width: 100%;
overflow: auto;
white-space: nowrap
}
.scroll-center {
width: auto;
overflow: auto;
display: block;
white-space: nowrap
}
.row {
float: left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
<div class="container">
<div class="row">
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
<div class="scroll-center">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
You probably need to add width to your container. Right now it's set to 100% so it will not size beyond the browser window. Instead you could do something like this:
.container {
overflow: auto;
white-space: nowrap;
width:2000px;
}
I realize that you may need to change this value dynamically but hopefully this gets you started
Example:http://codepen.io/nilestanner/pen/jAjbdK
Try with For example:
css:
* {
box-sizing: border-box;
}
.left, .center, .right{
float:left
}
.center {
width:400px;
overflow: scroll;
display: block;
white-space: nowrap
}
#center-scroll{
width:2000px;
}
.center .row{
display:inline-block;
width:33%;
}
.center .row .cell{
min-width:100%;
}
.row{
float:left;
}
.cell {
padding: 3px;
border: 1px solid #bbb;
min-height: 25px;
min-width: 200px;
}
HTML
<div class="container">
<div class="left">
<div class="row" >
<div class="cell">HeaderL1</div>
<div class="cell">HeaderL2</div>
<div class="cell">HeaderL3</div>
</div>
</div>
<div class="center">
<div id="center-scroll">
<div class="row">
<div class="cell">HeaderT2</div>
<div class="cell">Data21</div>
<div class="cell">Data22</div>
</div>
<div class="row">
<div class="cell">HeaderT3</div>
<div class="cell">Data31</div>
<div class="cell">Data32</div>
</div>
<div class="row">
<div class="cell">HeaderT4</div>
<div class="cell">Data41</div>
<div class="cell">Data42</div>
</div>
<div class="row">
<div class="cell">HeaderT5</div>
<div class="cell">Data51</div>
<div class="cell">Data52</div>
</div>
<div class="row">
<div class="cell">HeaderT6</div>
<div class="cell">Data61</div>
<div class="cell">Data62</div>
</div>
<div class="row">
<div class="cell">HeaderT7</div>
<div class="cell">Data71</div>
<div class="cell">Data72</div>
</div>
<div class="row">
<div class="cell">HeaderT8</div>
<div class="cell">Data81</div>
<div class="cell">Data82</div>
</div>
<div class="row">
<div class="cell">HeaderT9</div>
<div class="cell">Data91</div>
<div class="cell">Data92</div>
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="cell">HeaderTR</div>
<div class="cell">DataR1</div>
<div class="cell">DataR2</div>
</div>
</div>
</div>
I have seen many different ways to resolve the following, but it does not work quite as I hoped...
I need to make a div (main div) with severel divs inside (item-divs).
Each item-div must show a different picture, but when I hover a certain picture, this picture should be hidden and a text showen instead - in the same div.
How on earth can I make this?
For example this variant:
<div class="wrap">
<div class="child1"></div>
<div class="child2"></div>
</div>
And your css chould be:
.wrap:hover > child2{
opacity: 0;
}
But static styles should be like this:
.wrap{
width: 200px;
height: 300px; /* maybe auto if you want */
position: relative;
}
.child1{
width: 100%;
height: 100%;
background: lightgreen;
}
.child2{
width: 100%;
height: 100%;
background: #ff3030; /* surely for example */
position: absolute;
top: 0;
left: 0;
}
/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */
You can do this with the CSS pseudo element :hover
See example:
http://jsbin.com/vijawuda/1/edit?html,css,output
HTML Markup:
<div class='outer-container'>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 1
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 2
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 3
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 4
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 5
</div>
</div>
</div>
CSS
.image-holder {
width: 150px;
height: 150px;
display: inline-block;
}
.image-holder > .text {
visibility: hidden;
width: 150px;
height: 150px;
}
.image-holder:hover img {
visibility: hidden;
}
.image-holder:hover .text {
visibility: visible;
}
HTML
<div class="main">
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
</div>
CSS
.main {
width: 1000px;
height: 200px;
}
.content {
width: 150px;
height: 150px;
background-color:#c80000;
color:#fff;
font-family:arial;
text-align:center;
float:left;
margin-left: 10px;
font-size: 20px;
cursor:pointer;
}
.content > div.maincontent + div {
display:none;
padding-top:50px;
}
.content:hover > div.maincontent {
display:none;
}
.content:hover > div.maincontent + div {
display:block;
}
http://jsfiddle.net/q92zL/4/
ie 8 is adding unnecessary padding to a div. I cannot see any unusual styling here. Can somebody help ?
Html
The div highlighed in blue is the one in context.
.block {
clear: both;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content {
padding: 0 18px 0 0;
}
Here is the html code that will reproduce this issue. Sorry about the length. But if you copy this to a html file and open it in ie8, you'll be able to reproduce it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.block {
clear: both;
}
div.block .inline:last-child {
float: none;
overflow: hidden;
}
div.content-root {
padding: 0 0 0 18px;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content.input-container {
padding-right: 0;
}
div.content {
padding: 0 18px 0 0;
}
</style>
</head>
<body>
<div id="contentPane" style="background-color: transparent; display: block;">
<form>
<div class="block content-root">
<div class="block">
<div class="block">
<div class="block">
<div class="inline">
<label>
<div class="block">
<div class="inline content input-container">
<input type="checkbox" />
</div>
<div class="inline">
<div class="block">
<div class="block">
<div class="inline" style="float: left;">
<div class="block content">
<p>
<span style="font-family: arial; font-size: 11pt;">C. </span>
</p>
</div>
</div>
<div class="inline">
<div class="inline">
<p><span>Correct</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
The paragraph tag has its own margin by default.
If you write
<p style="margin:0px;">
the 'padding' above and below the word 'Correct' goes.