I am using bootstrap as my CSS framework. Now I have some dynamic content in the left side div, and some static content in the right div. I want to the height of right side div auto change base on the height of left side div. Is that possible?
<div class="container-fluid">
<div class="row-fluid">
<div class="span5 offset1">
<div class="well">
Dynamic Content
</div>
</div>
<div class="span5">
<div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
Static Content
</div>
</div>
</div>
You could do this
<div class="wrapper">
<div class="dynamic">
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
</div>
<div class="static">
Static<br />
Static<br />
</div>
</div>
CSS
.wrapper {
position: relative;
width: 400px;
overflow: auto;
}
.dynamic {
position: relative;
background-color: yellow;
width: 200px;
}
.static {
position: absolute;
background-color: orange;
width: 200px;
float: left;
left: 200px;
top: 0px;
bottom: 0px;
right: 0px;
}
I think jQuery is the best solution to achieve this. Check out my fiddle:
http://jsfiddle.net/PHjtJ/
$(document).ready(function() {
var dynamic = $('.dynamic');
var static = $('.static');
static.height(dynamic.height());
});
the solution depends on the behavior you want in the case where the static column is larger than the dynamic one. [I actually think you want the second scenario.]
Notice: both case are pure CSS, and without specifying any height whatsoever.
also, not specifying a margin of any sort, so you can change the width of the column at your will, without the need to calculate the margin/position again and again..
if you want the dynamic column to enlarge, and to be as the static height:
so you actually want the columns to always be a the same height.
and that can be easily achieved with CSS table layout styling.
in that case: See this Fiddle (the script is only for adding dynamic content, this is a pure CSS SOLUTION)
if you want the dynamic column to stretch only to its content height, and the static one to have the same height + a scroller.
in that case: see this Fiddle (again: the script is only for adding dynamic content, this is a pure CSS SOLUTION)
in both cases, the static column grows if the dynamic one become longer.
Use Javascript/jQuery to find which box has the biggest height. Then set the same height to all the divs.
<script type="text/javascript">
jQuery(document).ready(function($) {
var description = jQuery("div.description");
var big =0;
description.each(function(index, el) {
if(jQuery(el).height() > big)
big =jQuery(el).height(); //find the largest height
});
description.each(function(index, el) {
jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
});
});
</script>
Related
I have two columns in a row with bootstrap 4. I want to use the whole screen to show the image. This is my code:
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-md-6 ">
<img class="img-fluid" src="jumbo_background.jpg" />
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Everything is working good and responsive but this is the result I get from this code:
The preferred result I want is this:
The picture I use the dimension are 6000 X 4000
The solutions I have tried:
html, body {
height: 100%;
}
I have inspected the browser with the Google dev tool and I can see the the body is 100% but still not the result I want.
I have used h-100 from bootstrap and still get the same result.
I have used height: 100vh; but on smaller devices it's not responsive
I have checked this link:
Height not 100% on Container Fluid even though html and body are
Still don't get the result I want.
How can I give the image a full height in bootstrap 4?
UPDATE:
After nikolay solution on resolution: 1156 x 1013
You seem to want to use the image as a background. So my suggestion would be to do just that, as the cross-browser support is better (I'm not saying it can't be done with <img> alone, only that it's easier with background-image). Do note I'm leaving the <img> tag in for two reasons:
SEO indexing (if you need it)
sizing the column properly on mobile devices.
However, the <img> is not rendered. You're always looking at the background image of the <div>.
Here's a solution which grabs the src attribute of the first <img> element in each .column-image and uses it as <div>s backgroundImage. For it to work, make sure the <div> has the image-column class:
$(function() {
$('.image-column').each(function() {
const src = $('img', this).eq(0).attr('src');
if (src) {
$(this).css({ backgroundImage: `url(${src})` })
}
})
});
.image-column {
min-height: 100vh;
background: transparent no-repeat center /cover;
}
.image-column .img-responsive {
visibility: hidden;
}
#media(max-width: 767px) {
.image-column {
min-height: 0;
}
.image-column .img-responsive {
width: 100%;
height: auto;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 image-column">
<img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Note: even though it's used as both src of the <img> and background-image of the <div>, the resource (image) is only loaded once.
Here's a solution:
html, body,
.container-fluid .row,
.container-fluid .row .col-md-6,
.container-fluid .row .col-md-6 img {
height: 100vh !important;
}
Add example for the responsive mobile view as you made above, so I can write a solution.
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !
This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.
Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 8 years ago.
I have a div with height: 100%; but it's not working. When I declare a fixed height (for example height: 600px;) it is working, but I would like a responsive design.
html:
<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;">
<div class="split-pane-component" style="position: relative; width: 50em;">
<div style="">
<ul class="nav nav-tabs">
<li class="active">Html</li>
<li>Helpers</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="html" style="height: 100%;">
<textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea>
</div>
<div class="tab-pane" id="helpers" style="height: 100%;">
<textarea id="helpersArea">{{:helpers}}</textarea>
</div>
</div>
</div>
</div>
<div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div>
<div class="split-pane-component" style="left: 50em; margin-left: 5px;">
<div style="">
<ul class="nav nav-tabs">
<li>
<a href="#" class="active">Preview
<img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" />
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" style="height: 100%;">
<iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
</div>
</div>
</blink>
You probably need to declare the code below for height:100% to work for your divs
html, body {margin:0;padding:0;height:100%;}
fiddle: http://jsfiddle.net/5KYC3/
You aren't specifying the "height" of your html. When you're assigning a percentage in an element (i.e. divs) the css compiler needs to know the size of the parent element. If you don't assign that, you should see divs without height.
The most common solution is to set the following property in css:
html{
height: 100%;
margin: 0;
padding: 0;
}
You are saying to the html tag (html is the parent of all the html elements) "Take all the height in the HTML document"
I hope I helped you. Cheers
I would say you have two options:
to get all parent divs styled with 100% height (including body and html)
to use absolute positioning for one of the parent divs (for example #content) and then all child divs set to height 100%
Set the containing element/div to a height. Otherwise your asking the browser to set the height to 100% of an unknown value and it can't.
More info here: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
I believe you need to make sure that all the container div tags above the 100% height div also has 100% height set on them including the body tag and html.
For code mirror divs refer to the manual, these sections might be useful to you:
http://codemirror.net/demo/fullscreen.html
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
theme: "night",
extraKeys: {
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
And also take a look at:
http://codemirror.net/demo/resize.html
Also a comment:
Inline styling is horrible you should avoid this at all costs, not only will it confuse you, it's poor practice.
Night's answer is correct
html, body {margin:0;padding:0;height:100%;}
Also check that your div or element is NOT inside another one (with height less than 100%)
Hope this helps someone else.
Alright, so I'm working on a website and currently I have a "shoutbox" at the index page however I'm loading the shouts from another .php file the problem is that the scrollbars shows up but I can't actually scroll, at the moment there are 6 shouts in the DB that are being loaded but I can only see 4 and I can't scroll down any more.
If you want to check out the problem for yourself here is the link to the site (work in progress) http://ecazs.net/beerandguns/index.php
You are only able to see 4 but I can assure you there are 6!
This is the code I use to load shouts.
$(document).ready(function(){
$('.messages').fadeIn("slow").load('shoutbox/load.shouts.php');
setInterval(function() {
$(".messages").load("shoutbox/load.shouts.php");
}, 2000);
});
And this is the "main" HTML of the shoutbox
<div id="chat" class="jspScrollable">
<div class="jspContainer" style="width: 620px; height: 327px;">
<div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">
<form action="" method="post" class="shout">
<p>
<label for="message" class="msglabel">Message:</label>
</p>
<p>
<textarea name="message" id="message" class="msgfield" rows="2" cols="95"></textarea>
</p>
<p>
<input type="image" name="submit" src="ext/images/submit_btn.png" value="" class="submit" onmouseover="this.src = 'ext/images/submit_btn_hover.png';" onmouseout="this.src = 'ext/images/submit_btn.png';"/>
</p>
</form>
<div class="messages"></div>
</div>
I'm then using the jScrollpane function before body ENDS. So I'm first loading the content then the jScrollpane.
$(function(){
$('#chat').jScrollPane();
});
I really need help with this, if you have any ideas on how to solve this or improve it then please, please let me know.
Your HTML is not good for jScrollPane.
You have two .jspContainer and .jspPane in #chat.
Just remove the classes jspContainer and jspPane for the elements in the first div.jspPane
And you have to use the callback function for load, to tell the jScrollPane the content changed.
your js should be something like :
//caching element
var messages = $('.messages'), chat = $('#chat');
messages.fadeIn("slow");
var loadChatContent = function() {
messages.load('shoutbox/load.shouts.php', chat.jScrollPane);
}
loadChatContent();
setInterval(loadChatContent, 2000);
--- update
I's a JS replacement for the one you show us :
$(document).ready(function() {
//caching element
var messages = $('.messages'), chat = $('#chat');
messages.fadeIn("slow");
var loadChatContent = function() {
messages.load('shoutbox/load.shouts.php', chat.jScrollPane);
}
loadChatContent();
setInterval(loadChatContent, 2000);
});
In your website ( not the code you shown ) your html contains two div.jspContainer and two div.jspPane, it will not work if you don't remove class from the elements in you first div.jspPane
Your code :
<div style="width: 640px; height: 327px;" class="jspContainer">
<div style="padding: 5px 10px; width: 600px; top: 0px;" class="jspPane">
<div class="jspContainer" style="width: 620px; height: 327px;">
<div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">
</div>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div style="height: 327px;" class="jspTrack">
<div style="height: 318px;" class="jspDrag">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
jScrollPane will accord the scroll with the height of the content of the first div.jspPane, but in your div.jspPane, you have a second div.jspContainer which have 327px for height. So jScrollPane consider that there is no more content to show. Just remove classes jspContainer and jspPane on line corresponding to my lines 3 and 4, and modify your js, i think it can work like that.
Well, you cannot ensure the jScrollPane() is called after the content has actually loaded by simply placing the code at the end of the page. Both codes are placed in the a DOMready event handler so they are in the end both executed right away as soon as the dom is loaded. I bet the execution plan is:
initiate fist load in .messages
execute jScrollPane
load finishes
And I guess the jScrollPane plugin does not initialize correctly because the content is empty. I don't know much about the plugin itself but I suppose you'd have to refresh it anyway if the content changes to update the scrollbars.
Using the callback of the .load() function will ensure you initialize the jScrollPane when the content has actually loaded:
$(".messages").load("shoutbox/load.shouts.php", function() {
$('#chat').jScrollPane();
});