I have a "pop-up" table which is a fixed element. The table is sometimes to high to fit on some screens so I have set overflow to auto. However the scrollbar appears detached from the pop-up table as the parent div is the width of the screen and the table is less. Is there a way to get the scroll bar to attach directly right of the pop-up table without the gap, while keeping the table centered? here is a demo to show you what I mean. Thank you.
html
<div id = "blanket">
<div>
<table align = "center" id = "popUpTable">
<tr>
<td>fixed pop uptable</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>four</td>
</tr>
</table>
</div>
</div>
<div>background stuff<br>background stuff<br>background stuff<br></div>
css
#blanket{
position:fixed;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(255,555,255,0.5);
overflow-y:auto;
}
#popUpTable{
border:1px solid gray;
margin-top:2%;
background-color:#fff;
}
#popUpTable td{
height:150px;
text-align:center;
border:1px solid gray;
}
The problem is position:fixed; left:0; right:0;, that makes it 100% width.
You should remove right:0, and set some padding on the left for displaying the "background stuff" content.
Updated Demo: http://jsfiddle.net/ssjkgb22/33/
This isn't currently supported in IE, but adding this will to you stylesheet will do what you want in Firefox Chrome and Safari, with proper centering.
width:-moz-fit-content;
width:-webkit-fit-content;
margin:auto;
See it here:
http://jsbin.com/yetoto/1/watch?css,output
When width is not auto, setting both margin-left and margin-right to auto will center things. But you need a value for width that will just fit your content, and fit-content does just that, in the browsers that support it.
Related
I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.
An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.
In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.
JSFiddle code to try in both Chrome and Firefox
HTML as follows:
<style>
#container {
height:80px;
width:100%;
border:1px solid;
overflow:hidden;
resize:vertical;
}
#inner {
height:100%;
width:300px;
border:2px solid red;
overflow-y:auto;
}
table{
height:100%;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="inner">
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</td>
<td>
<img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
</td>
</tr>
</table>
</div>
EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV i.e. the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.
Thats a common mistake. Whenever an element is set to height: 100% or any other percentage, it relates to the height of its parent. So when using this, its important to define a height for the parent of your element:
To demonstrate the problem: Adding a class to the parent <td class="fix"> and add some css fixes the problem:
.fix {
height: 80px;
display: block;
}
WORKING JSFIDDLE DEMO
Keep in mind that setting the display attribute of a table cell from table-cell to block is something you should avoid, as you are changing the elements roots. Consider a solution without using a <table> markup if you have got the possibilities.
#inner {
border: 2px solid red;
height: 75px;
overflow: auto;
width: 300px;
}
You can use this CSS. I think it may work fine.
Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?
I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).
Example: See JSFiddle Demo.
CSS:
<style>
#wrapper {
width: 250px;
/* looking for solution that doesn't use overflow auto here */
}
table {
border-collapse: collapse;
}
td {
border:1px solid #ccc;
padding: 3px;
}
</style>
HTML:
<div id="wrapper">
<p>Table should scroll, but not this text.</p>
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>....................................................................................</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
</div>
Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.
You can use overflow: scroll on the table itself if you make it display as block:
table {
display: block;
overflow: scroll;
}
Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.
Fiddle: http://jsfiddle.net/94g53edb/12/
I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:
You can set the <p> to the fixed position,
or
You can create another wrapper for the table.
:)
[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]
Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.
Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/
Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/
I am trying to create a header-container layout. The header height is variable and the container should always fill the rest of space (width, height).
IE (9,10) and latest Opera computes the height of the layout table wrong so as scroll bars appear. The rest of the browsers computes it right (Safari, Chrome, Firefox).
<div class="header-container-layout">
<table border="0" cellspacing="0" cellpadding="0">
<tr class="layout-hdr">
<td style="background:#aaa">
asdasdas asdasd
</td>
</tr>
<tr class="layout-content" >
<td style="height:100%;">
<div class="layout-content-inner" style="background:#ccc;">
</div>
</td>
</tr>
</table>
</div>
.header-container-layout{
height:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.layout-content-inner{
height:100%;
position:relative;
overflow:hidden;
}
table{
width:100%;
height:100%;
}
You can see here the situation: http://jsfiddle.net/95und/9/
Is there a solution for this without javascript ?
Thanks!
EDIT: My problem does not have to do with scroll bars appearence, I could avoid them with overflow:hidden. The problem is that I want to position content absolute to the bottom of the container.
Well, adding overflow:hidden to the .header-container-layout makes the scrollbar go away in Opera:
.header-container-layout{
height:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
***overflow:hidden;***
}
I can't actually test on IE terribly easily right now but I suspect it would probably behave the same.
The only problem with this, of course, is that if your content is particularly long, it could get cut off. Depends what your plans are I guess.
http://jsfiddle.net/yochannah/95und/10/
Here's an example on JSFiddle.
Excerpt of code:
<table style="height:100%">
<tr height="20"><td></td></tr>
<tr>
<td>This gray cell fits all available height of table</td>
</tr>
<tr height="20"><td></td></tr>
</table>
There is a table with three rows. Row in the middle fits all available height of table.
I took this solution from here.
Problem is that impossible to make overflow-y for middle cell. It seems that the middle cell has a min-height property equals height of it's content.
So does it possible to turn on scrolling (overflow-y:auto) somehow and if it doesn't how to implement this layout in divs?
UPD. Thanks. Seems like this is working example: http://jsfiddle.net/haGWe/6/
But it's still interesting how to implement this with divs.
Here it is.
Basically, add a div inside your td element, add a fixed height (I chose 20px) and overflow: auto.
Wrap the contents of middle row in a div and apply the css to the div.
<div class="widget">
<table cellpadding="0" cellspacing="0">
<tr class="widget-header">
<td>20 px above</td>
</tr>
<tr class="widget-content">
<td><div id="myDiv">This gray cell fits all available height of table. What happens when more text is added to this? Woot, scrolls bars.</div></td>
</tr>
<tr class="widget-footer">
<td>20 px below</td>
</tr>
</table>
</div>
.widget{
position:absolute;
min-width:200px;
width:200px;
outline:1px solid gray;
right:50%;
top:20px;
}
.widget > table{
height:100%;
width:100%;
}
.widget-header{
height:20px;
}
.widget-content{
vertical-align:top;
background:gray;
}
.widget-footer{
height:20px;
}
#myDiv
{
height:40px;
overflow-y:scroll;
}
http://jsfiddle.net/2YvG6/
I have a setup that looks like this:
<html><head><style>
table{
height:100%;
width:100%;
padding:0 20px 20px 20px;
min-height:540px;
min-width:720px;
}
tr.head{
height:35px;
background:black;
}
td.left-bar{
background-color:green;
width:220px;
}
td.spacer{
width:10px;
}
td.right-bar{
background-color:blue;
}
div.sb-top{
height:20px;
background-color:red;
}
div.sb-bottom{
height:100%;
background-color:yellow;
padding:10px;
}
</style></head><body>
<table>
<tr class="head"><td colspan='3'></tr>
<tr>
<td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td>
<td class="spacer"></td><td class="right-bar"></td>
</tr>
</table>
</body></html>
However, when I do this both the height and padding on sb_bottom cause it to overflow past the cell. I'm not so concerned about the right/left overflow, but I absolutely must fix the bottom overflow. How can I do this? Thank you!
You could always put an inner wrap inside of sb_bottom and give that the padding. That way it won't overflow.
How about moving the padding to the body instead of the table?
If that does not work, you can put the table in a div and give the div the appropriate margins instead of a padding.
get rid of your height and width 100% requirements... it will spread on its own. also, your min-heights and widths may be playing factors here... you can get rid of those too
This is probably just a hack, but I added padding-bottom to the left-bar and it looks okay.
td.left-bar{
background-color:green;
width:220px;
padding-bottom:40px;
}
I loaded up the sb-bottom div with text and it scrolled off the screen, but I wasn't sure if you wanted the height to be fixed or to be scrollable.
All you need is box-sizing: border-box; on div.sb-bottom.
This would make sure height:100% includes the padding as well in the parent content height. Otherwise, actual height or the div will be height of the parent + padding which will always go beyond the parent content height.