I have a bootstrap row with 3 columns nested within a container which I'd like to give a height of 100% for each row, applying vertical scrolling if they overflow.
Current Layout
DOM
<body>
<div id="wrapper">
<nav...
</nav>
<div id="page-wrapper" class="container-fluid">
<div class="content" ui-view>
<!-- content starts here (loaded by angular)-->
<div class="row">
<div class="col-md-4 nopadding">
...
</div>
<div class="col-md-4">
<!-- example column content -->
<div class="list-group">
<a class="list-group-item" ng-repeat="..."></a>
</div>
</div>
<div class="col-md-4 nopadding">
...
</div>
</div>
<!-- content ends here -->
</div>
</div>
...
I tried a lot of things now, e.g. negative margins, absolute positioning, displaying the columns as table/table-cells. However everytime the content populates, the list groups expand to the height they need for displaying all items, pushing the whole site down.
Based on other examples, it should work this way (it does not, though -> has no effect):
body, html {
height: 100%;
}
.table-row { // applied to "row"
display: table;
> [class*="col-"] { // applied to columns
vertical-align: top;
float: none;
display: table-cell;
}
}
.overflow-auto { // applied to the list groups inside the columns
height: 100% !important;
display: block;
overflow-y: scroll;
}
Anyone got an idea about how to solve this?
Examples tried:
How to make bootstrap column height to 100% row height?
Twitter bootstrap 3 two columns full height
Setting 100% height to columns in Twitter Bootstrap
Bootstrap 3 - 100% height of custom div inside column
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
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.
1.I am trying to get a fixed position div (#externalPopupHeader) to inherit the width of its parent width(#reportsWrap) with no success.
2 I am also trying to get the #externalPopupHeader div with the lengthy content to scroll horizontally WITHOUT the scroll bar being visible. This is required because I would then Like to use javascript to sync the column headings with the content below.
#reportsWrap{
min-width: 1050px;
overflow: hidden;
position: relative
}
#externalPopupHeader{
width: inherit // Have aslo tried min-width: 1050px, and width: 100%;
position: fixed;
top: 0
overflow-x: scroll // hidden disables the scrolling.
}
<div id="reportsWrap">
<div id="externalPopupHeader">
<div id="genConfigFieldsWrap">
<div class="genField">Record No.</div>
<div class="genField">Serial Number</div>
<div class="genField">Room Number</div>
<div class="genField">Codec IP</div>
<div class="genField">Model</div>
<div class="genField">Version</div>
<div class="genField">NTP Status</div>
<div class="genField">Speaker Track</div>
<div class="genField">Max RX Kbps</div>
<div class="genField">Max TX Kbps</div>
<div class="genField">Default Call Kbps</div>
<div class="genField">Remote View</div>
<div class="genField">Voice VLAN</div>
<div class="genFieldTrans">Transport</div>
<div class="genField">Olson Zone</div>
<div class="genField">Time Zone</div>
<div class="genField">Helpdesk</div>
<div class="genField">Provisioning</div>
</div>
</div>
<div id="innerReportWrap">
<div id="genConfigAnchor">
</div>
</div>
</div>
your code is ok. your div data is to small to check the original behavior.
try to add some more text to check.
<div class="genField">NTP Status NTP Status NTP Status NTP Status</div>
then you will see that it is correct.
you can check this example
https://jsfiddle.net/r61t50sb/1/
I am creating an accordion using bootstrap 3. What I want is the accordion's height is always fixed no matter how its content is. If the content of an element is too large then a vertical scrollbar should appear inside that element. Also, when user click an element's header that element should take the rest of the height of the wrapper (and display scrollbar if the rest of height is not enough).
I change flex-grow:1 when user click on the panel-header. However, when clicking "Collection 2" the scrollbar didnt appear inside the content-body of "Collection 2" as I expected and the accordion is pushed outside of the wrapper div. Could you please help? I prefer a css only solution if possible. Thanks.
The template is:
<body ng-app="accordion" ng-controller="ctrler as ctrl">
<div id="wrapper" class="full-height wrapper">
<div class="panel-border panel-group column-flex full-height" id="accordion">
<div ng-repeat='key in [1,2,3]' class='panel panel-default'>
<div class="list-group-item">
<a class="panel-title" data-toggle="collapse" data-target="#{{key}}" data-parent="#accordion" ng-click='onClick($event)'>Collection {{key}}</a>
</div>
<div class="panel-collapse collapse content-body" id="{{key}}">
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="item in data1">
<div>{{item}}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
The styling is :
.column-flex{
display : flex;
flex-direction: column;
}
.wrapper {
height: 500px;
border-style: solid;
}
The code to add flex-grow is:
if($(e.target).parents('.panel').css('flex-grow')==1){
$element.find(".panel").css('flex-grow',0);
}else{
$element.find(".panel").css('flex-grow',0);
$(e.target).parents('.panel').css('flex-grow',1);
}
You can check the example here : https://plnkr.co/edit/iqrHG80GXj8teiRGeBU8?p=preview.
Add this to your code:
.panel {
display: flex;
flex-direction: column;
}
.collapse.in {
overflow-y: auto;
}
revised plunkr
If you want a scrollbar to appear when the height of .wrapper is exceeded, add overflow: scroll; to .wrapper. But that will show a scrollbar for .wrapper, not individual panels in the accordion. If you want a scrollbar to appear for the individual panel in the accordion, apply a height and overflow: scroll; to each .panel-collapse where you want the scrollbar to appear.
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 */
}