I am using Bootstrap 3 with a navbar at the top and a page that displays a table formatted using Bootstrap 3's table class. I would like the table (which is sitting in its own div) to be the only part of the page that is scrollable (when the width/height of the data in the table exceeds that of the page). I have styled the div for the table as follows:
.mygrid-wrapper-div {
overflow: scroll;
height: 200px;
}
I have a fiddle illustrating this, and I added an ugly 5px red border around the div to highlight the area that I would like to have scrollable:
http://jsfiddle.net/4NB2N/4/
Notice that scrolling left-to-right works great - I didn't have to do anything to get this to work, and the div adjusts the scrollbar automatically when the window is resized too. However, I don't know how to setup the div's height to behave the same way - I hardcoded the 200px value but really I would like the div to fill the "rest" of the window so that when the browser is resized it still works.
How can I make the div behave the same both horizontally and vertically?
A scrolling comes from a box with class pre-scrollable
<div class="pre-scrollable"></div>
There's more examples: http://getbootstrap.com/css/#code-block
Wish it helps.
Well one way to do it is set the height of your body to the height that you want your page to be. In this example I did 600px.
Then set your wrapper height to a percentage of the body here I did 70% This will adjust your table so that it does not fill up the whole screen but in stead just takes up a percentage of the specified page height.
body {
padding-top: 70px;
border:1px solid black;
height:600px;
}
.mygrid-wrapper-div {
border: solid red 5px;
overflow: scroll;
height: 70%;
}
http://jsfiddle.net/4NB2N/7/
Update How about a jQuery approach.
$(function() {
var window_height = $(window).height(),
content_height = window_height - 200;
$('.mygrid-wrapper-div').height(content_height);
});
$( window ).resize(function() {
var window_height = $(window).height(),
content_height = window_height - 200;
$('.mygrid-wrapper-div').height(content_height);
});
http://jsfiddle.net/4NB2N/11/
You can use too
style="overflow-y: scroll; height:150px; width: auto;"
It's works for me
Related
When viewing a website with Chrome for Android, the height of the view-area changes as soon as scrolling causes the URL-bar to hide. When using a fixed background image, this results in annyoing resizing of the image, initially when scrolling down, and also when the user scrolls up again, which enables to URL-bar again.
This topic has already been discussed here:
Background image jumps when address bar hides iOS/Android/Mobile Chrome
There was also a 'fix' announced, that recommends the use of vh instead of % to describe the height of the image:
https://developers.google.com/web/updates/2016/12/url-bar-resizing
Given now a site that contains a fixed background image:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="content">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</body>
</html>
using the following CSS:
html, body {
margin: 0;
padding: 0;
}
div {
color:white;
font-size: 30px;
}
#content {
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
will rescale the background image as described above, using Google Chrome for Android. Here is a Fiddle.
The methods determined to solve this (see linked JS-thread) make use of JavaScript to determine the window height after resizing of the window has taken place and then update the image height. However, it won't stop the background image from resizing without leaving a part of the page blank.
In order to keep the background image in place, two methods seem suitable:
preventing the URL-bar to hide
render the image with an initial offset to be able to compensate the image shift
Preventing the URL-bar to hide
In order to keep the URL-bar visible all the time, I created a fixed-div that contains a scrollable div-container:
<div id="content">
<div id="fixed">
<div id="scroller">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</div>
</div>
CSS:
#fixed {
height:100vh;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The idea is that since the user is not scrolling the website-body, the URL-bar won't disappear. This Even though this works on my emulator, it doesn't work on a real Galaxy S20. A user would be able to hide the URL-Bar after scrolling to the bottom of the page (the div).
Rendering the image with an initial offset to be able to compensate the image shift
The other idea was to draw the background image 'deeper' by default:
background-size: auto calc(100vh + 100px);
If there is "unused" space on top of the image, it should be possible to catch the resize- or touchmove-event, compare the new window height to the initial window height and then compensate the offset. Unfortunately, this will only affect the y-dimensions of the image and I would probably need to do the same for the x-axis or rescale the image again. However, when trying to determine the current image size in JavaScript (using jQuery, see this thread), I ran into another error; retrieving the image-size via $('#background').css('background-size') returned just auto and ignored the second part.
Most threads about this topic are older than five years. Can someone enlighten me and tell me there is a way to manage this by now?
Update:
I was able to eliminate the resizing using the following technique:
Assuming portrait-mode is active, I calculated the image width from the scaled image height and set the background-size to pixel values:
var initHeight = '';
var initWidth = '';
var imageHeight = 982;
var imageWidth = 1500;
var cssHeight;
var cssWidth;
$(window).on('resize', function () {
if (initHeight == 0) {
initHeight = $(window).height();
initWidth = $(window).width();
cssHeight = parseInt($('#content').css('background-size').split(" ")[1].slice(0,-2));
cssWidth = cssHeight / imageHeight * imageWidth;
$('#background').css('background-size', cssWidth + "px " + cssHeight + "px");
}
Now the background image won't scale, but it will move vertical when toggling the URL-bar.
To get rid of this, I make use of the second method described above and draw the background image with an initial offset:
background: url(../images/bg.jpg) no-repeat right 15% top -100px;
background-size: auto calc(100vh + 200px);
As soon as a resize-event occurs, I update the background image position:
let newHeight = $(window).height();
let newWidth = $(window).width();
let diff = newHeight - initHeight;
$('#background').css('background-position', "85% " + (startHeightOffset + diff) + "px")
This seems to work in my emulator. The background image stays in place now. However, when switching devices, I noticed that this approach works only for devices that have no toolbar in the bottom. Emulating a Galaxy S9, which has a URL-bar on the top as well as a toolbar on the bottom, the background image gets shifted too much, since the space acquired by both toolbars (top and bottom) will be added to the top of the image. In order to make this work, I would need to determine the height of the top URL-bar only and I genuinely don't know if this is possible.
Again, in order to solve this problem, one of the following problems must be solved:
reliably prevent hiding of the URL-bar
determining the height of the bottom toolbar
Update 2:
I was able to prevent hiding of the URL bar like so:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: scroll;
}
body {
-webkit-overflow-scrolling:touch;
}
#content {
width: 100%;
height: 100%;
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
#fixed {
height:100%;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The background image stays in place, since the URL-bar will never collapse. However, this isn't the ideal solution and it would be great if there would be a way to make this work without the need of preventing the URL-bar to collapse.
working demo with strange behavior: http://crawfordcomputing.com/AkadineWebOS/#/
If you grab the right div-window border and resize horizontally, It goes wonky vertically. Same for all the windows you can open with the icons. Everything is draggable too, and Jetris works. (check link for info)
This is an Angular single page app. My div-window is defined:
<div ng-repeat="pane in panes">
<div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 70; overflow: hidden">
<div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
<span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
</div>
<div compile="pane.content" style="background-color: white; padding: 5px; border: 1px solid black; overflow: auto;"></div>
</div>
</div>
So the window div id="{{pane.windID}}" has two children, a title bar and a content pane. So when resizing the window I tried asloResize the content pane. That was weird since it did not account for the titlebar. So I did this: (all variables are defined previously if not defined in the function)
objParent.resizable({
handles: "n, e, s, w",
minWidth: 250,
minHeight: fullHeight,
//fullHeight is parents height, don't wanna colapse one liners
//titlebar (child0) resizes just fine due to floating
//child0 size bugs alsoResize child1, let's also it manually
resize: function (event, ui){
//subtact title height from parents height
contentHeight = objParent.innerHeight() - objChild[0].innerHeight();
//width is fine
contentWidth = objParent.innerWidth();
objChild[1].css({'width':contentWidth, 'height':contentHeight});
}
});
Now see, when resizing, I aslo want to asloResize just the content pane, not the title bar. So I am trying to set the content pane's size manually, width is fine, but content pane height equals parents height minus the title bars height.
The problem is that if you resize horizontally first, the vertical goes wonky. Once you grab the bottom and resize vertically the bug goes away, you can then resize however you want perfectly without problems. It only happens if you resize horizontally first.
Why does this happen? I doubt the bug is actually in the draggable resize function because you can stop the bug by resizing vertically first, and then it works perfect. This happens on all browsers.
Does anyone have a clue?
The div with id window100-obj951 does not have a css height set initially. The contained div with compile="pane.content" does not either.
Resizing vertically changes the css height property of both these divs.
Resizing horizontally changes the width of both, but the height only of the contained div.
The containing div has overflow:hidden, so if its height is set, the height of the contained div is not significant. Hence, having the height of the containing div set masks the fact that the height of the contained div is actually being changed to be wonky.
[All this can be seen using Firebug and inspecting the element while resizing]
In this link, you see a page I am working on. When you change your window size, you will see that it is responsive.
However, the three rotating image boxes that are floated, with height auto and a clearing div under them, are not clearing.
The aim is to have the div containing these rotating images, and 20px padding on both top and bottom of it.
My css currently:
.rightbox{width:100%; clear:both; float:none; height:auto; min-height:inherit;}
#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 10px 20px 0px; float: left; left:0; transform:none; height:auto;}
less than 576px:
#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 5px 10px 0px; float: left; left:0; transform:none; width:26%;}
.rotating-item, .rotating-item2, .rotating-item3{width:100%; height:auto;}
I believe this will take you in the right direction: http://www.quirksmode.org/css/clearing.html
You can set height to .advertpanel. Current height of floated element is 0, so clear doesn´t work in this case (you clear after 0) - due to absolutely positioned images in carousel.
For mobile phone, <576px, you can hide that, it´s so tiny and mobile phone users has nothing from that.
the problem is not you clear:both, it's clearing the float but the problem is the floating element's height.
your rotating images is absolute while the container, eventhough it's relative and floating, doesnt get the height of the image inside it. try give a height value (the height of your slideshow image) instead of height:auto of the container.
Fixed with JavaScript.
<script>
var rotating = function(){
var getheight = $('.rotating-item'); /* cache the selector */
$('.advertpanel').css({ height: getheight.height() });
}
$(document).ready(rotating);
$(window).resize(rotating);
</script>
I have a div on my page with the following styles and no content to begin with:
#chatwindow {
width: 500px;
height: 50px;
overflow-y: scroll;
margin: 5px auto;
background: white;
border: 1px solid black;
}
Now, I have a simple Javascript function which adds new lines to the div:
function updateChat(response) {
$('#chatwindow').append('<p>' + response + '</p>');
$("#chatwindow").attr({ scrollTop: $("#chatwindow").attr("scrollHeight") });
}
It's supposed to add a line to the div and scroll to the top. However, after the content within the div becomes too large for the div, the overflow doesn't scroll - it remains invisible beyond the lower border of the div. What do I do (preferably with CSS alone) to make the div's scrollbar show up when the content becomes too large?
Fiddle
scrollTop is not an HTML attribute, it is however a jQuery method, among other things ?
$("#chatwindow").scrollTop( $("#chatwindow").attr("scrollHeight") );
note that scrollHeight is not an HTML attribute either, unless you added it for some reason, hard to tell without the markup, but you're probably looking for the native scrollHeight property
$("#chatwindow").scrollTop( $("#chatwindow").prop("scrollHeight") );
How should i set a div's height to be what's left of the viewport from its start minus 20 pixels? Parent DIV is 100% of the viewport, and i need the child to expand until the parent's end.
Parent div's jquery:
$(document).ready(function(){
windowHeight = $(window).height() - 0;
$('.slide').css('min-height', windowHeight);
});
If I understand your question correctly, you have a parent div with a 100% height, and inside it you have something that's 20px high and then something that should stretch to the bottom? (Please be clear in your question, or include a code example as a jsfiddle and/or a screenshot).
Look at this simple example
<div class="wrapper">
<div class="header">
Heading
</div>
<div class="strecth">
Stretching content
</div>
</div>
The styles to achieve what I think you mean:
.wrapper {
height: 100%;
}
.header {
height: 20px;
}
.stretch {
height: 100%;
padding-top: 20px;
margin-top: -20px;
}
The padding of 20px is rendered as part of the 100%, so effectively the contents of your .stretch will be 100% - 20px high (which is what you want), but there is an offset of 20px (the padding) that pushes it down. Then I use the negative margin to undo the offset by pulling the div back up 20px. The effect is that the visible contents are exactly 100% - 20px of height, which is what you wanted.
See the live code (I added some colors for emphasis, and had to set some extra height to body and html because jsFiddle will not do that automatically, you should not need that):
]http://jsfiddle.net/48aET/