I am trying to render my Handsontable display with the same width & height across each browser (IE, FF, Chrome) - I currently have the container's height and width set to 95% of it's parent container. This renders fine in Chrome and FF, however in IE the records get truncated and horizontal scrolling distorts the header - cell alignment.
#hot-container {
height: 95%;
width: 95%;
overflow: auto; //adds scrolling to the table
}
If I define my height & width with a set px value, It displays just fine, however I need my table to scale. Is there any solution out there for this?
My final solution is to use a set px h/w when a user is using IE using an IE-only CSS shim. I thought of going with the conditional IF statement, but these do not work in our standard browser, IE 11 (conditions are not supported)
<!--[if IE]>
<style>
#hot-container {
width: 800px;
height: 500px;
}
</style>
<![endif]-->
Any ideas?
Well if #hot-container is the only visible item on the screen, you can obviously go with the position: absolute trick!
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#hot-container {
position: absolute;
left: 0;
right: 0;
top: 5% /* since (100 - 95)%; 0 if you want it to fill full screen */
bottom: 5% /* since (100 - 95)%; 0 if you want it to fill full screen */
}
Good luck, have fun!
Related
You are my last hope.
I decided to implement an update to the Page of my brothers store. One of the new features I wanted was a (simple^^) parallax background with two layers to create a kind of 3d-feeling while scrolling.
First I got it to work with a little bit of JS, adjusting the position on scroll events with a multiplicator. Then I noticed that the performance of the background is sticky, laggy, stuttering and doesn't really look well in Firefox. As far I could see this was because of the "Asynchronous Panning"-Feature of the browser.
Link to the JS-Version of the page update
So after a little time with the search engine of my choice I saw no option to disable or work around that feature and decided to start working on a CSS-only implementation on that site.
And guess which browser is not able to display everything as wanted? Firefox!
First I stuffed all my content into divs, so that - so my hope - a mutual parent div would enable me to use "height: 100%;" to scale the div's together. That didn't work as the the background was overflowing over my content. The problem was: Because I wanted the background images to repeat on the y-axis AND to move with a slower speed as the content I had to define a specific height of the background divs which is larger than the content height.
I even tried to set the height of the background divs with jQuery by
$(#background).height($(.main_content_container).height());
but the background always just turned out to be too large or too short.
After my idea with the parent div didn't work I started to work with the body and my content container itself to generate perspective. Could this have worked when i would've set all height to 100%? When I set height: 100%; I always got my viewport's height...
What I got now:
Creating the perspective and applying transform with body causing the overflow-y:
body {
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
position: fixed;
height: 100vh;
transform-style: preserve-3d;
align-items: center;
align-content: center;
align-self: center;
text-align: left;
width: 100vw;
}
#background {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-2px) scale(3);
width: 100vw;
background-size: 100vw;
background-image: url(websiteimage.png);
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
}
#background2 {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-3px) scale(4);
background-image: url(websiteimage2.png);
background-size: 100vw;
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
opacity: 80%;
}
div.main_content_container {
transform: translateZ(0);
height: 100%;
background-color: transparent;
color: Silver;
max-width: 100vw;
width: 70%;
min-height: 100%;
}
In-vivo page (only startpage and only in dark mode is "working" at the moment)
Why does Chrome cut off the bottom of the background divs just as wanted and Firefox just create visible overflow?
Is there any chance to get one of my solutions to work fluent and formatted in Firefox?
I'm puzzling around for days now and thankful for every kind of idea/suggestion.
PS: This is my first post on StackOverflow. I hope I provided enough info and didn't break any rules as this site often helped me out of the hell of amateur webdesign.
PPS: I know my code is kind of a mess after all that puzzling but I'm playing around for days now
For all having the same problem:
I decided to try out several tweaks on my JS-implementation again and reached an improvement by adding
position: fixed;
background-attachment: fixed;
background-position: top;
to the background layers.
I also added a script by keith clark but I'm not sure if it takes any effect:
/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
var root = doc.documentElement,
scrollbarWidth, scrollEvent;
// Not ideal, but better than UA sniffing.
if ("MozAppearance" in root.style) {
// determine the vertical scrollbar width
scrollbarWidth = root.clientWidth;
root.style.overflow = "scroll";
scrollbarWidth -= root.clientWidth;
root.style.overflow = "";
// create a synthetic scroll event
scrollEvent = doc.createEvent("UIEvent")
scrollEvent.initEvent("scroll", true, true);
// event dispatcher
function scrollHandler() {
doc.dispatchEvent(scrollEvent)
}
// detect mouse events in the document scrollbar track
doc.addEventListener("mousedown", function(e) {
if (e.clientX > root.clientWidth - scrollbarWidth) {
doc.addEventListener("mousemove", scrollHandler, false);
doc.addEventListener("mouseup", function() {
doc.removeEventListener("mouseup", arguments.callee, false);
doc.removeEventListener("mousemove", scrollHandler, false);
}, false)
}
}, false)
// override mouse wheel behaviour.
doc.addEventListener("DOMMouseScroll", function(e) {
// Don't disable hot key behaviours
if (!e.ctrlKey && !e.shiftKey) {
root.scrollTop += e.detail * 16;
scrollHandler.call(this, e);
e.preventDefault()
}
}, false)
}
})(document);
Still no improvement on iOS Safari and mobile Firefox afaics.
Edit:
Thats the jQuery-function causing the effect here:
$(function() {
$(window).on('scroll', function() {
$('#background').css('background-position-y', $(window).scrollTop() * -.15);
});
});
$(function() {
$(window).on('scroll', function() {
$('#background2').css('background-position-y', $(window).scrollTop() * -.09);
});
});
I have a mobile version of a page. The content is enough that user has to scroll on his mobile device. When clicking an icon the mobile navigation bar slides in from left side and body gets overflow: hidden; so content does not scroll anymore. Is there a way to make the navigation bar 100% height of window (instead of document) so that user can scroll inside navigation bar furthermore?
At the moment slide-in and height of navigation is controlled by Javascript, but I'm looking for a CSS solution. Can anyone help?
// CSS
#mobile_nav {
width: 300px;
position: fixed;
top: 0;
left: -300px;
z-index: 10000;
overflow: auto;
}
// JS
jQuery("#mobile_button").on("click", function() {
jQuery("#mobile_nav")
.css({ height: jQuery(window).height() });
.stop(true)
.animate({ left: 0 })
;
jQuery("body").css({ overflow: "hidden" });
});
You could use Viewport units for that like this:
height: 100vh;
You could check the browser support for this css property here.
I'm trying to add a map as a full screen background below my Bootstrap NavBar, but at the moment my code is causing the bottom of the map to overflow the page.
I've tried different margins and positions and I cant get it to show the map within the bounds of the page under the navbar. I understand part of the issue is having top:50px but I don't know how to rectify the problem.
My CSS code is as follows:
#map {
/* Set rules to fill background */
height: 100%;
width: 100%;
/* Set up positioning */
position: fixed;
top: 50px;
left: 0;
}
Here is a screen shot of my page, you can see in the bottom right that the map attribution and controls have been cut off:
You're setting your map height as 100%. Try setting a fixed height, instead.
If it's too wide, add this to your CSS files.
.gmnoprint img {
max-width: none;
}
Alternatively, try this if that doesn't work:
html,body {
height: 100%;
width: 100%;
}
.whateveryourmapis {
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: -50px;
}
You need wait until div in which is content is displayed because google map chcecks it width wery early - and gets small width (or 0) and dont render.
Try this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
});
It is callback - when div for content after click on tab is dispayed THEN 'resize' google map on correct width.
For me this works.
Portrait img contained within a div does not get it's height set correctly... in FF(27.0.1) only. Works with Chrome, and IE8.
I have the following:
html, body {
margin: 0;
border: 0;
padding:0;
width: 100%;
height: 100%;
overflow:hidden;
}
.photo-container {
position: absolute;
right: 0;
top: 0;
width: 79%;
height: 100%;
overflow-y: auto;
}
img#photo {
margin-top: 0.5%;
max-width: 100%;
max-height: 95%;
}
In the html...
<div class="photo-container">
<div id="pic"></div>
</div>
<script type="text/javascript">
function f_pop(theImg) {
document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
}
http://jsfiddle.net/isherwood/sFZgn
Notes:
The photograph is portrait orientation.
This works with Chrome and IE8, but not in FF 27.0.1
In the img#photo, I changed the height to 50%. Chrome and IE8
sized the photo down. In FF it was truncated (and required the div's scroll bar to move down).
I initially had this (without the photo-container) as a page in a frameset, that is the hierarchy was body, div id=pic. It worked in that design with FF.
I converted the frameset to a single page with two column (divs), the right side being the photo-container, and now it does not work in FF.
Your help is greatly appreciated.
Thanks.
You need to set a height on #pic:
#pic {
height: 100%;
}
http://jsfiddle.net/isherwood/sFZgn/2/
I solved this by removing the div around the img. (This is what I had in my frameset version, and I'm not sure why I added it to this 2 column div version).
Also changed the photo-container from a class to a id.
So the only change in the CSS is .photo-container becomes #photo-container.
The html
<div id="photo-container">
<img id="photo" src="default.gif" alt="photo">
<div id="blurb"></div>
<div id="contributor"></div>
</div>
The js
document.getElementById('photo').src = pic;
document.getElementById('blurb').innerHTML = blurb;
document.getElementById('contributor').innerHTML = contributor;
I have a webpage that is horizontally centered but is rather short - it only takes up half the vertical page. I want it to be centered. How can I center the tag vertically? I cannot have a static height, so that is not an option. if CSS is not powerful enough, can I use Javascript to accomplish this? Thanks!
Two primary ways, neither of which is especially perfect, but widely used:
1) if your content really is a fixed, known height, then you CSS position it with
position: absolute;
top: 50%;
margin-top: here, set a pixel value that's equal to: -1 * (content height / 2)
2) If you don't care if it works the same way in IE7 and below, set CSS as follows:
html { display: table; }
body { display: table-cell; vertical-align: middle; }
If you don't mind adding non-semantic markup, you can do this:
html:
<div class="pusher"></div>
<div class="center"></div>
CSS:
html, body {
height: 100%;
}
.pusher {
height: 100%;
margin-bottom: -50%;
}
.center {
background: green;
width: 400px;
height: 200px;
margin: 0 auto;
}
http://jsfiddle.net/Jsqqk/
If you do care about semantic markup, and have to support older browsers, then you'll have to resort to JavaScript for this. Here's one solution using jQuery:
var $window = $(window),
$container = $('#container');
$window.resize(function(){
$container.css('margin-top',
Math.max(($window.height() / 2) - ($container.height() / 2), 0)
);
}).resize();
And here's the fiddle: http://jsfiddle.net/dw3rc/
I've often done this with setting height:50% and padding-top:25% but that's not always suitable.
This page identifies a different technique that might work:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html