I have a table that is within a scrollable div window. The header is enclosed in a thead tag and the footer is in a separate tbody at the bottom. I need them to be fixed to the screen while maintaining their alignment/orientation.
I've tried
position:absolute
and that skews everything.
See the following fiddle:
http://jsfiddle.net/jkgt3wdm/
I am open to all suggestions.
EDIT: also needs to be able to scroll to the left and right.
After making sure that your footer is in a <tfoot>, you can fix it and the header at the top and bottom of the page with:
position:fixed;
and then position the header at:
top:0;
and the footer at:
bottom:0;
Like this:
thead, tfoot {position:fixed;background-color:#000; color:#fff;}
thead {top:0; }
tfoot {bottom:0;}
You will still have to configure the widths of your <tbody> cells, but this should give you the sticky header and footer.
Is this what you are looking for: http://jsfiddle.net/jkgt3wdm/6/
To be honest, the easiest way to deal with that would be to use somethings that's already built. Messing with table is not always easy and if someone already found a foolproof way to do it, why not use it :)
I recommend using this: https://github.com/jmosbech/StickyTableHeaders
Check this out as a fast solution:
.header{
width:100%;
height:20px;
background-color:blue;
}
.footer{
width:100%;
height:20px;
background-color:green;
}
.content{
overflow-y:auto;
}
http://jsfiddle.net/jkgt3wdm/7/
Related
If you go to https://www.biznessapps.com on mobile layout, inspect element in Google Chrome and disable overflow-x: hidden from body and resize again, then you will find the white vertical stripe (padding) in the right side.
I had to add overflow-x:hidden to body to hide this, but not sure what causes this. Is there any other way than using overflow-x:hidden ?
So what you are doing with the overflow-x solution is a viable solution, but if you'd like to learn how to debug ghost elements, read below:
Basically, I debugged your site and saw that some of your sections (mainly ones in columns of 2 or 3, that float) extend past the wrapper's width. You can see this as well by inputting this into your CSS
*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Scroll down and look for sections that extend past the main div, such as this:
Most of these are the results of a little extra margin or padding on the floated section.
Like I said, the width:100%; and overflow-x:hidden; is still a very common solution, this is just how to debug it if you'd like to fix the structure.
Hope this helps!
It's a scroll bar. Since the default behaviour for overflow is to add the scroll bar,
overflow-x: visible;
might be the correct way to go.
Scrollbar some times visible and shows like extra padding or margin in body hiding overflow-x will work.
html, body {
width: 100vw;
overflow-x: hidden;
}
I have read all of the examples of this already and they are not complete and or do not work. What I need is a footer that will be at the bottom of the page always. However if there is no content to fill the area in the middle the footer still needs to be at the bottom of the page rather then in the middle. I tried this Method and this Method Neither of which work. The first does not seem to work at all, and the second forces it to the bottom of the page, if there is content or not, but if there is content, I.E you would have to scroll normally the footer is in the middle of the page as you scroll down. Any help would be great.
As you have not posted code (HTML or CSS) I am just guessing :
#wrapper{
min-height:100%;
position:relative;
}
footer {
position: absolute;
bottom:0;
left:0;
width:100%;
background:red;
height:100px;
}
Demonstration: footer with content
Demonstration: footer without content
I'm currently loading some Masonry items into a table-cell, the problem is that the browser has trouble calculating the width of the table-cell so the Masonry elements won't realign themselves when I adjust the browser width.
This article seems to discuss a similar problem but I can't get it to work here
The css looks like this and the Masonry Items are loaded into the #Gal1 element.
div#wrapper{display:table; height:100%; width:100%;}
div#sidebarWrapper{display:table-cell; min-width:40px; height:100%; background-color:#444;}
div#contentWrapper{display:table-cell; height:100%; position:relative;}
div#content{border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden;
padding-bottom:100px; margin-top:195px;}
div#masonryGal{max-width:1600px; position:relative; height:500px; overflow:hidden;}
#gal1{}
I've seen around the web about making a transparent image 100% width so that it fills up the container with something? Is this the way to go and would I have to have it repeat inside the element #contentWrapper?
How would this affect my jquery?
jQuery(document).ready(function($) {
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reload');
});
Again, the problem here is that I'm using Masonry inside a table, I'm using this inside a responsive layout and it's just the situation I'm in right now so please no "use a div".
absolute positioned elements (masonry use position absolute for blocks, to calculate their positions, and their container can't be display: table or table-cell) can't be inside table or table-cell
Update
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
First of all, I don't want to just remove it, I want to ensure that there is still scrolling capabilities there also.
This is because I would like to have a 'slide show' affect on the website, where you can click 'next' and before, however with the scroll bar there, you can just go through it.
I have hidden the scrollbar in other browsers using:
::-webkit-scrollbar {
display: none;
}
for webkit browsers and overflow: -moz-scrollbars-none; for Firefox. However, when it comes to IE, I can't find anything to simply hide it.
I found these on the internet:
scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:;
I thought by changing the colour to transparent, it would disappear, but it did not (just reverts back to normal).
Is there a way I can simply hide the scrollbar (simply like display:none or something else), in IE? I am open to css and js options.
jsFiddle of problem
NOTE: Adding overflow:hidden; stops the page from going past the second div when clicking the a tag.
See here for fiddle using your current code
Try this trick
body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}
It offsets a scrollable div so its vertical scrollbar is outside the viewable area.
I have similar problem, I don't need scroll bars on main page, but i have to have inside of my page content like in div's and span's.
So I found solution like this:
body {
-ms-overflow-style: none;
}
div, span {
-ms-overflow-style: auto;
}
I want to change the sidebars on the following template to have fixed position.
Is it possible to do it without using javascript and only css?
Template Demo
PS: Placing position fixed for the sidebards it is not an option because its changing the whole structure of the site and they are placed outside of content area.
you wanna like this??http://jsfiddle.net/kFBuD/1447/
overflow:hidden;
You can using position:fixed
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
**position:fixed;**
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
you can use overflow property of HTML if you don't want it in CSS or JavaScript.