I have a resizable and movable div using JQuery UI. I want a table inside it that scrolls vertically. Trying to set the table height to 100% basically does nothing, and absolute positioning with top and bottom of 0 doesn't work either. I have tried to put a separate div as a container and that has gotten me closer than anything, but it still does not behave properly.
Here is the fiddle: http://jsfiddle.net/scottbeeson/KrP7v/1/
Here is the relevant CSS:
table {
border-collapse: collapse;
width: 100%; height: 100%;
}
#tableContainer {
height: 100%; width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
And the basic HTML layout:
<div id="window">
<div id="header">Draggable Header</div>
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
I think that this is what you want.
http://jsfiddle.net/KrP7v/12/
#window {
width: 500px;
height: 400px;
min-width: 100px;
min-height: 100px;
border-bottom: 1px solid gray;
}
#header {
height: 25px;
line-height: 25px;
background-color: gray;
color: white;
text-align: center;
}
table {
min-height: 300px;
height: 100%;
width: 100%;
border-collapse: collapse;
}
#tableContainer {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
overflow: auto;
}
td {
padding: 5px;
margin: 0px;
border: 1px solid gray;
}
tr:last-child td {
border-bottom: none;
}
Here's what you can do:
http://jsfiddle.net/KrP7v/4/
#window {
width: 400px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
}
Related
I have code below. I have 2 questions:
Why right border of textarea is hidden? How to show it not use padding for div child1?
I don't set height for div child1. Why child1 is higher than textarea? How to fit it with textarea?
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>
<div id='child1' style='background-color:red;margin:10px;overflow:hidden;'>
<textarea style='width:-webkit-fill-available;height:100px;resize:none;border:2px solid black;overflow:hidden'></textarea>
</div>
</div>
</body>
</html>
thats the solution!!
your Problem was, that the Red div was as big as the text-area,
but the border doesn't count to the width, or height of an element.
so width:100%actually results into """width:100% + 2px of the left Border and + 2px on the right Border""".
but width:-webkit-fill-available counts the boreder in, with the non-advantage, (at least i think it is), that it does not work in every Browser
I have added the below CSS to textarea in your snippet to solve the two issues you have mentioned
Solution 1: To fix the border issue
box-sizing: border-box;
Solution 2 : Float to fix the height issue
float: left;
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
#child1 {
width: 80%;
}
textarea {
box-sizing: border-box; /* Solution 1: To fix the border issue */
float: left; /* Solution 2 : Float to fix the height issue */
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
<div id="clear" style="clear:both;"></div>
</div>
</div>
You have to give box-sizing:border-box
* {
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
Removing overflow: hidden from your div will display textarea border.
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
Textarea has display: inline-block; styling by default so just change it to display: block;
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
textarea{
display:block;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
These are the answers to your questions:
You should use the CSS calc function to reduce the textarea's 100%-width by 4px (which is the sum of the 2px border on the left and right sides);
You should apply float to left for textarea to reduce #child1's height.
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
#parent {
width: 100%;
height: 100%;
background-color: blue;
position: absolute;
}
#child1 {
background-color: red;
margin: 10px;
overflow: hidden;
}
textarea {
width: calc(100% - 4px);
height: 100px;
resize: none;
border: 2px solid black;
float: left;
}
<div id='parent'>
<div id='child1'>
<textarea></textarea>
</div>
</div>
It is because of the overflow element in DIV tag. you have given overflow: hidden; With the hidden value, the overflow is clipped, The overflow property only works for block elements with a specified height.
function within(){
document.getElementById("child1").style.height = document.getElementById("textarea").offsetHeight + "px";
console.log(document.getElementById("textarea").offsetHeight + "px it die höhe vom Text!")
}
function without(){
document.getElementById("child1").style.height = "unset";
}
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
button {
position:relative;}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px;'>
<textarea id="textarea" style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
<button onclick="within()">mit Höhe</button>
<button onclick="without()">ohne Höhe</button>
Greetings Stackoverflow!
I have problems pixel-perfect setting my tags. Here is the codepen: https://codepen.io/anon/pen/NLbyag
My aim is to have my <svg> and <table id="time-h-axis"> tags horizontally scrollable inside their <div id="main-charts"> parent, but not vertically.
<svg> and <table id="time-h-axis"> have height 330 and 70 which makes the 400px height of <div id="main-charts">.
However, there are a few extra vertical pixels coming from somewhere (one can scroll vertically and see a bit of lightgreen of the div in the codepen)...
I am out of ideas... Help needed! Thanks ;-)
HTML:
<div id="main-charts">
<table id="time-h-axis"><tr></tr></table>
<svg height="330" width="11970"></svg>
</div>
CSS:
#main-charts {
width:1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: scroll;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
}
Set the SVG to display:block (per this SO Q&A) and the wrapper to overflow:auto
#main-charts {
width: 1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: auto;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
display: block;
}
<div id="main-charts">
<table id="time-h-axis">
<tr></tr>
</table>
<svg height="330" width="11970"></svg>
</div>
Codepen Demo
I'm trying to create a table where a fluid column has a min width.
All other columns have a fixed width, and should not grow wider or thinner.
I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.
This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.
Applying a min-width to the th and/or td doesn't do anything.
Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.
Any ideas?
HTML:
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
CSS:
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
table th, table td {
border-top: 1px solid #333;
}
JSfiddle:
http://jsfiddle.net/ajcfrz1g/14/
DEMO
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: 100%;
min-width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
width: 100%;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
i am trying to solve your problem. in this your fluidhas no min-width because this is table structure. but you can give width.
see this example
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
white-space: nowrap;
overflow: hidden;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:
html:
<div id="wrapper">
<div id="board">
<table id="evolve">...</table>
</div>
</div>
css:
#wrapper {
width: 100%;
height: 100%;
}
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
margin: auto;
position: relative;
}
Your desired css code
#board {
display:table-cell;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border:solid 1px black;
}
UPDATE
You will need to alter padding-left depending on wrapper width(if you set it to 100% then it will work)
#wrapper {
height: 100%;
padding-left:36%;
}
#board {
display:table-cell;
width: 265px;
height: 222px;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
}
As soon as i find a better solution i will update it
You can define line-height same as the height of the DIV. Write like this:
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
line-height:222px;
}
#board .evolve {
border: 1px black solid;
margin: auto;
position: relative;
line-height:1.5;
}
Check this http://jsfiddle.net/X4L5A/1/
I'm trying to make a 2x2 grid, which fills up the entire window in an iPhone, with a table.
Currently it looks like this:http://dl.dropbox.com/u/182509/photo.PNG
Note the squshed-uppy-ness of the right column, and the gap at the left.
I cant fix either.
Relevant css:
body { margin: 0; position: absolute; height: 100%; }
.full { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; }
table { border-width: 0px; border-spacing: 0px; border-style: hidden; border-color: gray; border-collapse: collapse; background-color: white; width: 100%; height: 100%; left: 0; top: 0px; margin: 0; padding: 0px; position: absolute; }
td { border-width: 1px; padding: 1px; border-style: solid; border-color: gray; background-color: white; width: 50%; height: 160px; }
and html:
<div id="helpView" class="full">
<table id="help">
<tr>
<td>Hey..</td>
<td>Hi.</td>
</tr>
<tr>
<td>Hello.</td>
<td>Greetings!</td>
</tr>
</table>
</div>
Any help appreciated
Since your td has border set to 1px, it adds to the total width of what we are seeing, so you have to reduce the width of your td. See box model for reference:
http://www.w3.org/TR/CSS2/box.html
or you can set the left of your table to -1 to adjust it to left:
table{left:-1}
it will work since the position is absolute.
You've overcomplicated things.
http://jsfiddle.net/Z3rs5/
You should write simple code, also, do't cram all of the CSS statements in one row, every time you do that, God kills a kitten!