Is there a way that I can make the nested columns height equal the row height? Currently they only equal 75% of the row height. I have tried setting the column height vs css, but that doesn't seem to work either.
<body>
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="row">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-md-12">
<h1>Current Visitors</h1>
<h2>0</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Online Orders</h1>
<h2>00</h2>
</div>
</div>
</div>
<div class="col-md-8">
Grid Here
</div>
</div>
</body>
I think you are looking for something like this? https://jsfiddle.net/0cL2qaq1/3/
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
Related
I am trying to show the fields in the angular side by side no matter what I do it is still showing like below
And below is my html component
<div id="report-prj-search">
<div class="dx-fieldset" >
<div class="dx-field">
<div class="dx-field-label">ShipTo Account</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name" (onValueChanged)="onValueChanged($event)" ></dx-select-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Purchase Order</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="purchaseOrder" displayExpr="customer_purchase_order" ></dx-select-box>
</div>
</div>
<div class="dx-field">
<dx-button (onClick)="click($event)">Filter</dx-button>
</div>
</div>
</div>
I've refactored your HTML slightly so that you can use CSS Flexbox:
<div id="report-prj-search">
<div class="dx-fieldset flex-column">
<div class="flex-row-container">
<div class="dx-field flex-row">
<div class="dx-field-label">ShipTo Account</div>
<div class="dx-field-value">
<select></select>
</div>
</div>
<div class="dx-field flex-row">
<div class="dx-field-label">Purchase Order</div>
<div class="dx-field-value">
<select></select>
</div>
</div>
</div>
<div class="dx-field">
<button (onClick)="click($event)">Filter</button>
</div>
</div>
</div>
Use Flexbox in your CSS:
.dx-fieldset.flex-column {
display: flex;
flex-direction: column;
}
.flex-row-container {
display: flex;
flex-direction: row;
}
.dx-field.flex-row {
display: flex;
flex-direction: row;
}
Here's the flexbox guide that I've used several times in the past:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to style the component as some sort of component that is in the same line, such as display: inline or a wrapper which is display: flex and flex-direction: row or display: inline-block!
I'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
I'm fairly new to bootstrap and having trouble with nesting. I've got a layout that I'm trying to recreate and not getting the correct result seen here layout image.
My code http://www.bootply.com/0BETlZMU7T
<div class="container-fluid">
<div class="row">
<div class="col-md-4">image with image text here</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">A Text</div>
<div class="col-md-6">B Text</div>
</div>
<div class="row">
<div class="col-md-6">Y Text</div>
<div class="col-md-6">Z Text</div>
</div>
</div>
</div>
</div>`
vertical align isn't possible with default bootstrap, but you can achive it with code showed in this solution
vertical-align with Bootstrap 3
Your updatetd html would look like the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">image with image text here</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">A Text</div>
<div class="col-md-6">B Text</div>
</div>
<div class="row">
<div class="col-md-6">Y Text</div>
<div class="col-md-6">Z Text</div>
</div>
</div>
</div>
</div>
And your CSS like:
/*From:
https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3#answer-25517025
*/
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
/**
* "flex: 1" or "flex-grow: 1" is added to make the inner div
* - Which is also a flex-item - take up all the horizontal space
* available space inside the flex container (.col-* elements)
*/
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
/* flex: 1; */
flex-grow: 1;
}
I made you an example with your code and I merged the Items "A,B,X,Y" into one row, because you don't need this second row.
http://www.bootply.com/uIVbiDLGkj
For example, I have following html:
<html><head>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.col-1{
height: 300px;
}
.col-2{
/*
height: 100% not working, how to stretch col-2 like col-1
*/
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1">
</div>
<div class="col-md-6 col-2">
</div>
</div>
</body></html>
Height of container is auto, but actual height is defined, because col-1 height is 300px. How to set col-2 height 100% of actual parent height?
You have to add .row outside of any col-* because col-* have float attribute. To make the same height of col-*, add .row-eq-height with this style:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
The HTML is like this:
<div class="container">
<div class="row row-eq-height">
<div class="col-md-6 col-1">
a
</div>
<div class="col-md-6 col-2">
b
</div>
</div>
</div>
DEMO
Maybe you should try to use "row row-eq-height" classes.
Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>
And add this CSS property to your custom CSS
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
min-height:100% usually works.
<html>
<head>
<style type="text/css">
.container {position:relative;height:600px;width:100%;background-color:black;}
.col-1{float:left;width:50%;height:300px;background-color:red}
.col-2{float:left;min-height:100%;width:40%;background-color:green}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1"></div>
<div class="col-md-6 col-2"></div>
</div>
</body>
</html>
Here is a sample:
https://jsfiddle.net/001cbskq/
You are using bootstrap but I am not in this example.
im trying to use bootstrap for a site, but what i am trying to achieve to have to columns within a row col-sm-6. Where i want one column to be in an ordinary container and the other to have container fluid effect.
So it would one column as normal and the other column as full width. So far this has been difficult to do:
<div class="container">
<div class="row">
<div class="col-sm-6 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
http://jsfiddle.net/8fyjtn09/
i think i figured it out, instead of using a normal container i would have to use container fluid as i said before but just an offset
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-2 col-xs-4 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
Do you know flex-box layout in CSS ?
As i understand your question, i believe that on wider screens you want to have first column fixed and second column should be responsive. And for a smaller screen you want the default bootstrap behaviour. If this is what you are looking for, i have created a simple fiddle. Please check that and let me know if this is helpful.
Here is the link : https://jsfiddle.net/YameenYasin/7zaxx06z/23/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="row flexbox">
<div class="first">
</div>
<div class="second">
</div>
</div>
</div>
.flexbox {
display: -webkit-flex;
-webkit-flex-flow: row; // Children elements will be in rows
-webkit-flex-wrap: wrap;
width: 100%;
}
.first
{
border:1px solid red;
height:50px;
width:200px;
}
.second{
border:1px solid green;
width:100%;
-webkit-flex: 1;
height:50px;
}
#media (max-width: 767px) {
.flexbox {
-webkit-flex-flow: column;
}
.first,.second{
width:100%;
}
}