We have a modal window (div) which is separated to two sections with a vertical border - <div class="border"></div> with the following CSS:
.modal-body {
padding: 0px 15px;
}
.modal-body-left,
.modal-body-right {
float: left;
width: 381px;
padding: 0px 0px 15px;
}
.border {
border-left: 3px solid black;
position: absolute;
top: 0px;
bottom: 0px;
width: 0px;
left: 396px;
}
.modal-body-right {
margin-left: 15px;
}
The vertical line fits well into the parent div, but the problem is - if the parent div is very high and there is a vertical scroll bar, the vertical line scrolls with the scroll bar. How do we prevent it from scrolling (or change it's height to the full height of the parent div)? We don't want to put a border to the right or left sections, because they may not be the same height and we want the vertical border to cover the full height of its parent div.
Edit: this is the HTML (The contents are dynamic):
<div class="modal hide fade" id="...">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form method="post" id="...">
<div class="modal-body-left">
<h4>...</h4>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
</div>
<div class="border"></div>
<div class="modal-body-right">
<h4>...</h4>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
...
</div>
</div>
You might be interested in CSS overflow. For example, choosing the value: auto will only show the scrollbar when the content is too large.
Use CSS overflow property
.modal-body{
height:300px;//your prefered value
width:300px;//your prefered value
overflow:auto;
}
DEMO
Related
I dynamically generate content blocks that can have each individual number of lines. If they are within a 'record-row' ... I want the 'record-second' within that row to have the same height.
This is for example such a block:
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... /* Dynamic content LEFT */ ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... /* Dynamic content RIGHT */ ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
So for example in the following block ... the left 'record-second' has 2 lines and the right 'record-second' has 4 lines:
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
How can I makes sure that the left 'record-second' has the same height as the right 'record-second' and vice versa?
Please keep in mind that they are numerous 'record-row' ... where each record row can have an different height.
Fiddle: https://jsfiddle.net/oLzq2vhs/
To try to help you I used only CSS. The solution I adopted involves the use of flexbox
Bootstrap has different classes to manage flexbox and you can see them here
Since using them would have added several classes to your divs, I decided to use only CSS, so it's easier for you to understand the various additions I've made.
Nothing prevents you from throwing away my CSS rules by managing them using Bootstrap classes (i.e. .d-flex, .h-100, .flex-column, m-0...). The important thing here is understand what's going on and, for my personal opinion, seeing the rules on CSS only is more understandible.
I didn't touch your layout. These are the rules I added:
.form-horizontal,
.record-second,
.record-group {
height: 100%; /*set these div to 100% to take full advantage of flexbox*/
}
.record-group {
display: flex; /* create a flexbox container */
flex-direction: column;
margin: 0;
}
.col-sm-4.record-col {
flex: 0 0 auto; /* the first div can't grow or shrink*/
}
.col-sm-8.record-col {
flex: 1 0 auto; /* the second div can grow to fill all the space*/
}
.row {
background: #f8f9fa;
margin-top: 20px;
padding-bottom: 20px;
/* I added also this line */
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.record-first {
padding-top: 12px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-top: #ffffff medium solid;
border-left: #ffffff 0px solid;
border-right: #ffffff 0px solid;
}
.record-second {
padding-top: 12px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-top: #ffffff medium solid;
border-left: #ffffff 4px solid;
border-right: #ffffff 4px solid;
}
/* --------------------------- */
/* I added these lines of code */
/* --------------------------- */
.form-horizontal,
.record-second,
.record-group {
height: 100%;
}
.record-group {
display: flex;
flex-direction: column;
margin: 0;
}
.col-sm-4.record-col {
flex: 0 0 auto;
}
.col-sm-8.record-col {
flex: 1 0 auto;
}
/* --------------------------- */
/* I added these lines of code */
/* --------------------------- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second ">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal h-100">
<div class="form-group record-group h-100">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
Here's the updated fiddle; https://jsfiddle.net/a3eknLuf/
To achieve this you need to;
Loop through all the .record-rows
When inside, loop through all the .record-second
Check the height of each record second and assign it to a variable if it is greater than the previous.
Loop again through all the .record-second and assign their height.
$(document).ready(function(){
var tallestRecordSecond;
// loop through record rows
$(".record-row").each(function(){
tallestRecordSecond = 0;
// loop through record seconds in this row
$(this).find(".record-second").each(function(){
// assign the tallest record second
if($(this).height() > tallestRecordSecond){
tallestRecordSecond = $(this).height();
}
});
// loop again and assign the height for each
$(this).find(".record-second").each(function(){
$(this).height(tallestRecordSecond);
});
});
});
This question already has an answer here:
How to create equal-height columns using Materialize and Flexbox?
(1 answer)
Closed 4 years ago.
I've got three panels, two on the left side and one on the right.
<div class="row">
<div class="col s6">
<div class="panel">
content1
</div>
<div class="panel">
content2
</div>
</div>
<div class="col s6">
<div class="panel">
content3
</div>
</div>
</div>
The content of my left two panels is variable and so is the size of the panels.
Now I want the height of the panel on the right be dependent on the size of the left panels i.e. they should be flush at the bottom like in this example:
Is it possible to solve this in pure css or do I need some js function for that?
Edit:
I'm using Materialize and I can't figure out how flexboxes work with Materialize.
If you use Bootstrap (v4.2.1) you can make use of the following:
html:
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<p>This is sample text</p>
</div>
</div>
<div class="row">
<div class="col">
<p>This is sample text</p>
<p>This is sample text</p>
<p>This is sample text</p>
<p>This is sample text</p>
</div>
</div>
</div>
<div class="col">
<p>This is sample text</p>
</div>
</div>
Please make sure you include Bootstrap in your project.
Here is some extra info regarding Bootstrap's grid system.
If you're not using bootstrap, you can achieve it with a simple flex layout
.container{
display: flex;
}
.row{
border: 1px solid black;
min-width: 100px;
padding: 10px;
flex-grow: 1;
margin: 10px;
}
.col{
display: flex;
flex-direction: column;
}
<div class="container">
<div class="col">
<div class="row">
1<br />
1<br />
1<br />
1<br />
</div>
<div class="row">
2<br />
2<br />
2<br />
</div>
</div>
<div class="col">
<div class="row">333</div>
</div>
</div>
I hope display flex solves your problem!
.row {
display: flex;
background-color: #343434;
}
.col {
flex: 1;
text-align: center;
align-items: center;
justify-content:center;
}
.s6 { background-color: #7dc242; }
.s7 { background-color: #ed1c24; }
<div class="row">
<div class="col s6">
<div class="panel">
content1
</div>
<div class="panel">
content2
</div>
</div>
<div class="col s7">
<div class="panel">
content3
</div>
</div>
</div>
what is the best way to make in bootstrap a hide/show element like in the picture??
I started with something like this:
<div class="container-fluid no-padding-left">
<div class="row">
<div class="col-md-4 no-padding-left">
<div class="row">
<div class="col-md-12 background-azul-claro">
<div class="col-md-2 text-left">
<img src="assets/images/ic_close_white_36dp_1x.png" alt="">
</div>
<div class="col-md-8 text-center" style="">
<h3>Nueva incidencia</h3> </div>
<div class="col-md-2 text-right">
<img src="assets/images/ic_done_white_36dp_1x.png" alt="">
</div>
</div>
</div>
<div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
<div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
<!-- form div with form field -->
<!-- checkbox Mostrar otras incidencias -->
</div>
</div>
</div>
styles.css
.background-azul-oscuro {
background-color: #009688;
}
.background-azul-claro {
background-color: #00BFA5;
}
.no-padding-left {
padding-left: 0px;
}
h3 {
color: white;
}
It´s nested columns the best way to do it ???
Im using angular in the front end, should i use normal bootstrap or angular ui bootstrap???
I would like totally responsible element with the hide and show functionality..
Since you would have to use custom width, margin and padding for the default bootstrap col's, there isn't much sense in using them.
You could have something like this in my opinion:
<div class="container">
<div class="background-azul-claro">
// position:relative;
width: calc(100% - 40px);
margin-right: 40px;
float: left;
</div
<div class=" background-azul-oscuro">
// position: relative;
width: 40px;
float: right;
</div>
</div>
*In case you would want one div to hover above the other, you should use position: absolute;
I have designed one form below the image. Now, I want to display full responsive image in a background of the form.
I tried to code but the image is displaying inside the form rather than displaying a form on full width and height image.
Where is my mistake?
HTML
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">To</label>
<input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.formhold {
background: url(images/334.jpg);
background-size: cover;
}
form {
display: block;
margin: 0 auto;
}
You almost have the right idea.
I drew up a really quick code-pen mock up you can take a look at:
http://codepen.io/zsawaf/pen/vKRLAP
In summary your mistake was that you needed another container outside of the bootstrap columns that spans the entire page and holds a background image.
HTML:
<div class="container-fluid cover-img">
<div class="row">
<!-- whatever you want your form container to span -->
<div class="col-xs-offset-3 col-xs-6">
<div class="form-container">
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
</div>
</div>
</div>
</div>
SCSS:
.cover-img {
background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.form-container {
margin-top: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
form {
margin: 20px 0;
input {
margin: 5px 0;
width: 100%;
height: 40px;
}
}
}
Like Sinan said, you need to give the form a width and height to match the image size.
I think you can take Sinan's code and combine it with this to expand the form's width and height to match the image size.
Let's say your image size is 1024x768, then:
form {
display: block;
margin: 0 auto;
width: 1024px;
height:768px;
}
You can do it like:
.formhold {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(images/334.jpg)
background-color: rgba(0, 0, 0, 0);
background-size: inherit;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
}
So i'm not sure if that worked for you but the last example was. Adding a wrapper div around the form with the container-fluid class and applying the background to that:
.wrapper {
background: url(images/334.jpg) no-repeat;
background-position: top center;
background-size: 100% auto;
}
And the HTML:
<div class="wrapper container-fluid">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
</div>
Here is the link to the latest jsFiddle.
i have a problem to center the content in a "row", the buttons in the example are always on the left side and i have too much space on the right side.
Is there a way to center this buttons?
thx
tomas
<div class="abc">
<div class="row red show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
The class span2 has property float:left:
<div class="block">
<div class="row show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
</div>
CSS:
.block {
max-width: 500px;
}
.block > div {
text-align:center;
}
.block > div > div {
float:none;
}
I would consider not using span2 (layout and grid class) with btn (button style class) together.
http://jsfiddle.net/sTwj7/10/
HTML
<div class="abc">
<div class="row red show-grid">
<div class="btn">a</div>
<div class="btn">b</div>
<div class="btn">c</div>
<div class="btn">d</div>
<div class="btn">e</div>
</div>
</div>
CSS
.red {
background-color: red;
}
.abc {
max-width: 500px;
}
.red .btn {
width: 160px;
margin: 0 auto;
display: block;
}
Updated 2018
Bootstrap 4
Use the auto-layout columns and text-center
<div class="row text-center">
<div class="col-sm border">a</div>
<div class="col-sm border">b</div>
<div class="col-sm border">c</div>
<div class="col-sm border">d</div>
<div class="col-sm border">e</div>
</div>
https://www.codeply.com/go/2fDFPSB5A4
Bootstrap 3
Use column offset and text-center
<div class="row red show-grid text-center">
<div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
<div class="col-md-2 btn btn-default">b</div>
<div class="col-md-2 btn btn-default">c</div>
<div class="col-md-2 btn btn-default">d</div>
<div class="col-md-2 btn btn-default">e</div>
</div>
https://www.bootply.com/zEYom4EJUF
Bootstrap 2 (original answer)
You could add CSS to center your spans like this:
http://jsfiddle.net/sTwj7/9/
<div class="span2 pull-center">
<h1>a</h1>
</div>
CSS class:
.pull-center {text-align:center;margin:0 auto !important;float:none !important;}