I want a HTML-table to show the scrollbars (both horizontal and vertical), as soon as the browser window becomes too small to fully show the table.
Please see the following example: JSFiddle example
I suspect the main-div to be the faulty one:
.myMain {
background-color: #e9edf1;
overflow: auto;
width: 100%;
top: 130px;
left: 20px;
bottom: 1px;
position: absolute;
}
The problem with the example code is the following: the horizontal scrollbar appears, if the window becomes too small, but it appears only after a few pixels of the tables are already cut/ invisible when resizing the browser window with the mouse. And it is shown at the bottom of the page, but I want it to be shown directly at the bottom of the table.
And the vertical scrollbar doesn't appear at all. I don't want to change the page layout visible for the user, so that's not an option.
There were a couple things that threw it off for me, mainly the absolute positioning and left that was pushing the div across. Because you set it as absolute it will ignore other elements and react in it's own desired way.
Also disabling scroll via overflow:hidden on html/body will cut off part of the div coupled with it being absolutely positioned.
I've made a few changes, see below. But check the link and let me know if the desired behavior has been achieved now.
https://jsfiddle.net/0ksb8s8x/1/
html, body {
font-family: Segoe UI, Tahoma, Arial;
font-size: 11px;
margin: 0;
padding: 0;
background-color: #e9edf1;
overflow:auto;
width:100%;
height:100%;
}
.myMain {
background-color: #e9edf1;
overflow: auto;
width: 105%;
padding: 20px;
top: 0px;
left: 0px;
bottom: 1px;
position: relative;
}
I've finally found a solution which is not perfect but it works:
I used Joe Corby's Fiddle and changed only the following part in the CSS:
.myMain {
background-color: #e9edf1;
overflow: auto;
padding-left: 30px;
padding-top: 20px;
position: absolute;
top: 120px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
height: auto;
}
The scrollbars are shown at the bottom and at the right-hand-side of the browser-window (not of the table) but at least it works.
Related
I'm seeing some interesting z-index behaviour on iOS.
My sample code can be viewed here: https://jsfiddle.net/59mo8s16/4/
I need the #sidebar to be displayed in front of the #slide-in-tip. This is the case when viewed on Chrome (PC and Android) and Firefox (PC). However, on iOS Safari and Chrome, #slide-in-tip appears in front of #sidebar.
I've realised that removing -webkit-overflow-scrolling: touch from the CSS makes it appear as intended across all platforms/browsers. However, I need this in order to provide momentum scrolling for the #container div on iOS. Without it, you get that scrolling that stops as soon as you stop swiping, which provides a terrible user experience.
Any ideas on how to resolve this one? Ideally I'd like a CSS-only solution. Any significant restructure of HTML will cause me some major pain at this point. The sample is a really stripped back version of an already-complete website.
HTML:
html,
body {
height: 100%;
margin: 0;
-webkit-overflow-scrolling: touch;
}
#top-bar {
top: 0;
width: 100%;
z-index: 200;
background-color: green;
height: 85px;
position: absolute;
}
#sidebar {
float: left;
padding: 30px;
background-color: pink;
position: fixed;
width: 310px;
left: 0px;
z-index: 150;
top: 85px;
bottom: 0px;
padding: 0;
padding-bottom: 50px;
}
#container2 {
min-height: 100%;
}
#main {
padding-right: 20px;
height: 100%;
margin: 0;
margin-left: 10%;
line-height: 40px;
text-align: right;
}
#container {
height: 100%;
margin: 0;
position: absolute;
width: 100%;
overflow-y: scroll;
}
#container2 {
padding-top: 75px;
}
#slide-in-tip {
position: fixed;
bottom: 0;
text-align: right;
width: 100%;
z-index: 140;
background-color: blue;
height: 200px;
}
<div id="top-bar">
top-bar
</div>
<div id="container">
<div id="container2">
<div id="sidebar">
sidebar
</div>
<div id="main">
long content - see js fiddle for actual long content
</div>
</div>
</div>
<div id="slide-in-tip">
slide-in-tip
</div>
The documentation offers an explanation for the behaviour you're seeing:
touch
Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).
Since you cannot destroy a stacking context after creating one, an element outside of a stacking context cannot interact directly with elements within that stacking context, and you cannot move elements between stacking contexts without moving them physically, you won't be able to work around the stacking issues without restructuring your physical HTML.
Having said that, you shouldn't have to make significant changes to your structure. The best you can do is simply move #slide-in-tip into #container2 as a sibling of #sidebar and #main (where exactly you place it doesn't matter, as long as they are all siblings). For whatever reason, though, this seems to cause severe flickering on scroll in the simulator — I don't have a physical device to test this on, so you'll want to test this thoroughly.
The only CSS-based workaround I can offer is to shorten your #slide-in-tip by giving it a left offset equal to the width of #sidebar. Note that you have conflicting padding declarations in your #sidebar rule such that the width of #sidebar is actually 310px, not 370px. Unfortunately, if portions of #sidebar are transparent and you want #slide-in-tip to be seen through those transparent portions, this will not be an option either.
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
I am designing a web page with a little toggle menu icon for navigation purposes.
My problem is that whenever the window is resized under the width of the main container (.story, which only has max-width defined), the menu icon overlaps the content.
Instead, I would like the icon to block on the right border of my container.
currently, the code for positionning my nav icon:
nav {
position: fixed;
top: 100px;
right: 100px;
}
and the container:
.story {
padding-top: 50px;
margin: 0 auto;
height: 1000px;
max-width: 1000px;
text-align: justify;
}
Here is a jsfiddle to illustrate my problem.
and here is an example of a website where they made it work
Thanks for taking a look at it.
Per my understanding, position:fixed will overlap data.
A simple way can be reducing width of story div.
nav css
nav { position: fixed; top: 20px; right: 20px; }
story css
.story {
padding: 50px 0;
margin: 0 auto;
height: 1000px;
max-width: 400px;
text-align: justify;}
I did try using position:fixed; (I saw another topic with similar problem)
Here is the page I am working on
The Problem: click on the "*Click to view acute conditions" which is under Same Day Appointments. This opens up a div that is position:fixed 50% top & left of the page but not when scrolled down.
Here is a Jfiddle (only the preview frame: http://jsfiddle.net/u5cXv/2/embedded/result/)
The Code: Below is the parent div
#ubookwhite_content {
Background-color:#fff;
display:none;
position: fixed;
outline:solid 10px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index:1002;
overflow: auto;
}
The Javascript is a simple open close function. Can you please help me understand why this doesn't position when scrolled down.
You are defining the styles for that element in two places. Here is the other one:
#ubookwhite_content {
Background-color: #fff;
display: none;
position: absolute;
border: solid 5px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index: 1002;
overflow: auto;
}
That second is after the first and uses position:absolute
The width of your #ubookwhite_content is 800px, but once the padding is added in, the actual element width is 850px. This is setting your element off by 50px when you use margin-left: 400px.
You can either make the width: 750px or make the offset margin-left: 425px. Either way takes into account the additional width of the padding: 25px.
http://jsfiddle.net/u5cXv/4/
Your website doesn't match what you copy and pasted onto the website. The position on the website isn't fixed: it's absolute, which is completely different. If your code says fixed, you may need to re-upload to your server.
This is apparently located on index: line 860.
I would also recommend using google's "inspect" command in order to investigate later issues.
Try removing the margins or playing around withit. Keep the position: absolute
margin-top: -150px;
I'm just getting into HTML and CSS and I have a quick question. Is there any way to make a parent element grow in size to accommodate one of its children? I have the background set on <html>. Then inside the body I have a div which sets a different background color and isn't as wide/tall as the whole page. This leaves a two toned design. Then, I have a nested div containing all the content to be displayed. This all works fine, unless the page content is enough that a scroll bar is necessary. If that happens, both background colors are lost past the original bottom of the screen. This problem is extremely annoying and from what I've read there is no great way to handle it, but I wanted to see if anyone knew. I have the following properties set:
html {
background: [gradient code...]
height: auto;
min-height: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
body {
height: auto;
width: 100%;
position: absolute;
bottom: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
}
div.background {
background-color: #D0D0D0;
text-align: center;
height: auto;
width: 70%;
position: absolute;
top: 150px;
bottom: 30px;
left: 15%;
margin: 0;
padding: 0;
border-radius: 7px;
}
div.container {
height: auto;
width: 70%;
position: absolute;
left: 15%;
bottom: 0;
top: 0;
}
Where div.background has the second background color and div.container has the content displayed on the page.
Thanks for your help.
How about not using position: absolute? Remove that (and the associated top, left, bottom...) and replace them with correct margins instead.
I believe if you specify size (width, height) auto on the parent (or just leave it without specifying size) it grows/shrinks to fit the children's size (it doesn't work recursively, so you may want to go up to the last parent in the tree). Avoiding absolute positioning (http://www.w3schools.com/Css/css_positioning.asp) could also do the trick, and float element or a different z-index could probably do the workaround too, but overgrowing the parent, I think...
If you get rid of the width and position absolute div.background and change position absolute to relative for div.container you should be good