I want to make a responsive table that will show 2 sections a time, the labels and the values.
The labels would be fixed and the data would be a slider.
So far I have this:
[class^=col] {
float: left;
}
.row {
width: 100%;
overflow: hidden;
}
.frame {
overflow: scroll;
}
.col-6 {
width: 50%;
}
.col-12 {
width: 100%;
}
.sub-row {
border: 1px solid;
height: 30px;
}
.sub-row:first-child {
font-weight: bold;
}
<div class="row">
<div class="col-6">
<div class="sub-row"></div>
<div class="sub-row">Test1</div>
<div class="sub-row">Test2</div>
</div>
<div class="col-6">
<div class="col-12">
<div class="sub-row">Col1</div>
<div class="sub-row">bla</div>
<div class="sub-row">bla</div>
</div>
<div class="col-12">
<div class="sub-row">Col2</div>
<div class="sub-row">bla</div>
<div class="sub-row">bla</div>
</div>
</div>
</div>
But notice that the data is being displayed one below each other. I want it to be displayed side by side, hidden in the panel so I can slide it. How can I do this?
Here you can see a working example:
This is acheived using flexbox
thead, th{
display:flex;
}
http://codepen.io/dbushell/pen/wGaamR
Related
I am trying to create a layout that resembles the following:
Sketch mockup
The "1/3" and "2/3" labels refer to how much of the screen I want those sections to take up (on web).
I've created 2 rows (with one column and two columns, respectively) to try to produce this layout. However, since the rows stack, I end up with a bunch of whitespace, so my layout looks like this:
Current layout
How can I move up the blue area so that there is not whitespace, but it is still responsive and moves below the other areas on smaller screens?
Here is my HTML:
<div class="container-fluid">
<div class="row onethird">
<div class="col-sm-8 red">
<h1>Title:</h1>
<h1>Description of site</h1>
</div>
</div>
<div class="row twothirds">
<div class="col-sm-8 green">
<h2>pictures go here</h2>
</div>
<div class="col-sm-4 blue">
<h1>Signup form</h1>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
</div>
</div>
Here is my CSS:
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
html, body {
height: 100%;
width: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.full {
height: 100%;
}
.onethird {
height: 33.333%;
}
.twothirds {
height: 66.6666%;
}
I have tried to use CSS and height percentages to set the heights of the different sections in a responsive way. My main issue is floating that blue column up.
I have considered dividing the blue section into two different rows, but this would end up dividing the sections of the signup form on smaller screens, which I'd like to avoid.
Any help would be greatly appreciated! Thanks in advance.
I think the correct way of doing this is putting everything you have on the left into .col-sm-8 and everything you have on the right into .col-sm-4.
Check out the example below.
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
html, body {
height: 100%;
width: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.full {
height: 100%;
}
.onethird {
height: 33.333%;
}
.twothirds {
height: 66.6666%;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row onethird">
<div class="col-sm-8">
<div class="red">
<h1>Title:</h1>
<h1>Description of site</h1>
</div>
<div class="green">
<h2>pictures go here</h2>
</div>
</div>
<div class="col-sm-4">
<div class="blue">
<h1>Signup form</h1>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
<h6>Signup field</h6>
</div>
</div>
</div>
You can use a different setup for your divs, stacking the lefthand elements in one div, and the blue one on the right in it's own div.
Check out this fiddle: https://jsfiddle.net/3budaekb/ (I've used different classes in lieu of bootstrap)
<div class="row">
<div class="col-sm-8>
// Lefthand side containers:
// div.red
// div.green
</div>
<div class="col-sm-4>
// right hand side element:
// div.blue
</div>
</div>
I would like to have a collapsible sidebar in bootstrap.
For this I' d like to have a slim element between the content and the sidebar toggles the visibility of the sidebar (display property). See the example below:
https://jsfiddle.net/zaao8Lqb/1/
Instead of the border (as in the fiddle), I' d like to have an element. How would I do that?
The solution is a simple div with full height. The total solution of a collapsible sidebar:
https://jsfiddle.net/c2bgkbzL/1/
html,
body {
height: 100%;
}
.fill {
height: 100%;
min-height: 100%;
}
#content {
background-color: AliceBlue;
height: 100%;
padding-left: 0;
}
#sidebar {
background-color: DarkGray;
height: 100%;
padding: 3px;
}
#collapseme{
background-color: black;
width: 10px;
height: 100%;
float: left;
}
Here is the code to do it. Can find fiddle at https://jsfiddle.net/qaisarnadeem/zzs94oc1/
<body>
<div class="container-fluid fill">
<div class="row fill">
<div class="col-lg-2 col-md-4 col-xs-4" id="sidebar">
<h4>
Sidebar
</h4>
</div>
<div class="pull-left vertical-elem"></div>
<div class="col-lg-10 col-md-6 col-xs-6 text-center" id="content">
<h3>
Content
</h3>
</div>
</div>
</div>
</body>
here is css for class vertical-elem
.vertical-elem{
height:100%;
width:6px;
background-color:blue;
}
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/
I know a lot of topics have been written about div side by side, but I couldn't find a solution for my specific issue. I managed to get 2 divs side by side, and be mobile friendly (not require sideways scrolling), but there's a background color problem. If 1 div has little text while the div next to it doesn't, then the missing blocks of height just show blank instead of having a background. How can I fix this while staying mobile friendly?
Example page: http://www.gloryhood.com/articles/ztest.html
CSS:
div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
margin-left: 50%;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
HTML:
<div class="table">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>
I think you want something like this,
$(document).ready(function(){
$('.container').each(function(){
var firstDiv = $(this).find('.firsthalf');
var secondDiv = $(this).find('.secondhalf');
if(firstDiv.height() >= secondDiv.height()){
secondDiv.css('height',firstDiv.height());
} else {
firstDiv.css('height',secondDiv.height());
}
});
});
body{background: #39b1a4;}
div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
width: 50%;
text-align: left;
word-wrap: break-word;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="container">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
</div>
<div class="container">
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
</div>
<div class="container">
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>
</div>
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>