I want table content to align center for horizontal and vertical. I've done for that. But I need help to fix some code. Check out this JSFiddle and example code below: http://jsfiddle.net/yiedpozi/a8ZLJ/
CSS example code:
div.container {
width: 500px;
height: 200px;
}
table {
width: 500px;
height: 300px;
table-layout: fixed;
}
td, tr {
border: 1px solid red;
}
td {
text-align: center;
vertical-align: middle;
padding: 20px;
}
span.description {
display: none;
}
JS example code:
$('td').hover(
function () {
$(this).find('span.description').css({
'display': 'block'
});
},
function () {
$(this).find('span.description').css({
'display': 'none'
});
}
);
You can see, if hover, it will show description, but height of table row will increase. I want it to be fix, so, before hover, title will center, when hover, all content will center, but not affect table content height. How can I do this?
Try setting a height in td, to a value which can hold both default and hover content.
td {
text-align: center;
vertical-align: middle;
padding: 20px;
height: 120px;
}
JSFiddle
Update the following css classes:
td {
text-align: center;
vertical-align: middle;
padding: 20px;
height:100px;
}
span.description {
display: none;
height:80px;
overflow:auto;
}
look at the updated JSFillde
You need to add a div tag inside each with class on div.
Just like that.
<td>
<div class="setHeight">
<span class="title">This Is Title</span>
<span class="description">Here is description. Here is description. Here is description. Here is description. Here is description.</span>
</div>
</td>
You can add setHeight class as well.
div .setHeight{
width:auto;
height:100px;
}
http://jsfiddle.net/CodeAstro/a8ZLJ/2/
Related
I want all 100% height elements to expand when the size of the body expands.
In the example pressing the button will add a red div - the two columns adjacent should stretch to account for this. In the end all columns should reach the bottom completely, one with blue then red, the other two just blue.
I'm looking into flex, and it doesn't seem like this would work, but any suggestions are appreciated.
In any case best solution is CSS, but if this is impossible pure JS is also fine.
span = document.getElementsByTagName("span")[0];
function addelem() {
span.appendChild(document.createElement('div'));
};
html, body{
height: 100%;
}
span {
display: inline-block;
background-color: blue;
width: 30px;
height: 100%;
vertical-align: top;
}
div {
background-color: red;
width: 30px;
height: 30px;
}
<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>
This is what I expect the frame to look like at the bottom after button is pressed and scrolled down:
EDIT
I changed the snippet so the button appends the div to an existing child and causes overflow, as per the comments below suggest.
An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.
In a container with flex-direction: row, the cross axis is vertical, so items will expand to full height.
In your demo code, the divs (red) are being added as children of a span column (blue). These divs are being added to the end, forcing the column to grow.
In a row-direction flex container, with no heights specified that would override align-items: stretch, the other columns will follow suit.
span = document.getElementsByTagName("span")[0];
function addelem() {
span.appendChild(document.createElement('div'));
};
body {
display: flex;
min-height: 100vh;
}
body > span {
width: 30px;
margin-right: 5px;
background-color: blue;
display: flex;
flex-direction: column;
}
body > span:first-child span {
flex: 0 0 100vh;
}
div {
background-color: red;
width: 30px;
height: 30px;
}
button {
margin-bottom: auto;
}
<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>
You should use Flexbox twice, once in the outer container, and once in the container containing the appended child elements.
Here is your modified code:
span = document.getElementsByTagName("span")[0];
function addelem() {
span.appendChild(document.createElement('div'));
};
html, body{
height: 100%;
/* new */
display: flex;
}
/* new */
body > span{margin-right: 4px;}
span {
/*display: inline-block;*/
background-color: blue;
width: 30px;
height: 100%;
vertical-align: top;
/* new */
display: flex;
flex-flow: column;
align-items: flex-end;
}
div {
background-color: red;
width: 30px;
height: 30px;
/* new */
flex: 1 0 auto;
}
<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>
I have this HTML:
<div>
<span></span>
<textarea></textarea>
</div>
The Span can take up one or more lines (depends on the text it has and size of the Div). I want the Textarea to take all of the height left in div.
Please no jQuery.
https://jsfiddle.net/ntme8Lt4/
The CSS/style tag for that would just be max-height:100%; and width:100%;
This would hold the div's size constant if it is set to a percentage of its parent container or a constant value like 900px.
Since the size of span is not known, just leave it unspecified so it auto-sizes to content.
There's a circular issue here - the height of the div is (normally) determined by the size of its components. You need something to break the circle and determine the height of either the div or the text area.
You can use offsetHeight to get the heights of the different elements, and from there it is just a calculation of the container - span element to find the remaining.
document.querySelector('textarea').style.height = (document.querySelector('div').offsetHeight-document.querySelector('span').offsetHeight)+'px'
http://jsfiddle.net/rhbritton/4eck8dua/1/
If you're just wanting to use pure CSS and without the needs of tables etc you could try this approach.
HTML:
<div>
<span>
Hello<br>
Hello<br>
Hello
</span>
<textarea></textarea>
</div>
CSS:
div {
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid red;
}
span {
width: 100%;
display: block;
background-color: red;
}
textarea {
width: 100%;
height: 100%;
background-color: blue;
}
JSFiddle
Let me know if this works for you.
You can use clientWidth and clientHeight if your willing to use pure JS:
Here is the fiddle
function test()
{
var div = document.getElementById("testDiv");
var span = document.getElementById("testSpan");
var textArea = document.getElementById("testTextArea");
var height = div.clientHeight - span.clientHeight;
textArea.style.height = (height - 5) + "px";
textArea.style.width = (div.clientWidth - 5) + "px";
}
test();
Reference
you can use flex
div
{
display: flex;
flex-direction: column; /*layout top to bottom*/
height: 300px;
width: 400px;
border: 1px solid red;
}
span
{
display: block;
background-color: red;
}
textarea
{
background-color: blue;
height: 100%;
width: 100%;
flex-grow: 1; /*take up remaining space in flex container*/
}
}
https://jsfiddle.net/ntme8Lt4/13/
Thanks to the "possible duplicate" I came up with this solution:
<div>
<span>Hello<br>World</span>
<b><textarea></textarea></b>
</div>
div
{
height: 300px;
width: 400px;
border: 1px solid red;
display: table;
}
span
{
display: block;
background-color: red;
}
b
{
height: 100%;
width: 100%;
display: table-row;
}
textarea
{
height: 100%;
width: 100%;
background-color: blue;
}
https://jsfiddle.net/c42go079/
let's say I have number of columns of different width e.g.:
| 100 | 200 | 55 | 450 | empty space
And now I need to adjust the width of every column the way that the entire row fits in its container, and takes 100%.
I could of course set .row { max-width: 100% } and set the widest column to 100%, but I want to make it the way so every column takes available space proportionally. Any ideas?
You can use both display: table and display: table-cell.
As an example:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
}
div {
width: 100%;
min-width: 100;
display: table;
}
div > div {
min-width: auto;
width: auto;
display: table-cell;
border-right: 1px solid #000;
text-align: center;
}
div > div:first-of-type {
border-left: 1px solid #000;
}
<div>
<div>ABCDE</div>
<div>FG</div>
<div>HIJKLM</div>
<div>N</div>
<div>OPQ</div>
<div>RSTUVWX</div>
<div>YZ</div>
</div>
Demo
You can also use percentages in your widths defining. (If you know the proportion of every element.)
div {
float: left;
}
#container {
width: 100%;
}
#e1 {
width: 30%;
}
#e2 {
width: 50%;
}
#e3 {
width: 20%;
}
<div id="container">
<div id="e1">XX</div>
<div id="e2">XX</div>
<div id="e3">XX</div>
</div>
Make sure your box-sizing is set correctly in CSS (box-sizing: border-box;), otherwise paddings and borders will overflow the width. :)
I have created a inline-table on a DIV which I have made resizable.
Basically, it allows someone to resize the table-cell's using jQuery.
If you exapand the inline-table and then resize the table-cell, how can I prevent the .spacer table-cell from expanding and shrinking in the centre? I would like the left position of the table-cell to remain on the left and only allow the right size to be expanding or shrunk?
I hope that makes sense! jsfiddle example here (please expand the outer div first and then resize the inner spacer div): http://jsfiddle.net/GT5Pc/
CSS:
.draggableElementContainer {
width:300px;
border:#000 dashed 1px;
display:inline-table;
white-space:nowrap;
}
label {
width: fit-content;
max-width: fit-content;
min-width: fit-content;
}
.spacer {
border: #000 dashed 1px;
display: table-cell;
white-space: nowrap;
text-align: left;
width: 100%;
}
HTML:
<div class="draggableElementContainer">
<label>Test</label>
<div class="spacer">
</div>
<input type="input" id="test" />
</div>
jQuery:
$("div").resizable();
Add fixed table-layout to your .draggableElementContainer selector:
.draggableElementContainer {
...
table-layout: fixed;
}
JSFiddle demo.
I am trying to center these images vertically inside of the table without having to edit the picture so that they are the same size. Tried a few things... I know whenever I want to center something horizontally I use margin-left: auto; margin-right: auto; So I thought maybe the same would apply here, but with top and bottom, but no dice.
EDIT: Here is another idea... would it be possible to set up a javascript to run as the page is opened to position all of the text spans as low as the lowest span in that row?
Just a thought... let me know what you think
Any help would be much appreciated.
Here is the fiddle: http://jsfiddle.net/58u4g/1/
Thanks in advance
CSS vertical alignment is different across all browsers - especially if you want to keep the text in the same cell.
I recommend creating a fixed height block for the images to go in, and using a vertical align hack to get the image vertically centered within that div (I know, hacks are bad).
JSFiddle: http://jsfiddle.net/58u4g/8/
Vertical align hack: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Relevant CSS:
.valign {
width: 100%;
display: block;
display: table;
height: 100%;
#position: relative;
overflow: hidden;
}
.valign > span {
display: block;
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.valign> span > span {
display: block;
#position: relative;
#top: -50%;
}
#posiflex_directory td .image {
height: 160px;
display: block;
}
I'd do it differently for the sake of separating elements to have better control over them, even though my fiddle is not clean and is a mash of your sample plus the bits I through in :)
<table id="posiflex_directory">
<tr class="theimgs">
<td>
<a href="../posiflex/tx_overview.aspx" id="posiTXIcon">
<span class="valigner"></span>
<img height="125" src="https://www.metsales.com/MetropolitanSales/microsite/posiflex/images/home_icons/tx-4200.png" width="200"/>
</a>
</td>
<td>
<a href="../posiflex/cd_overview.aspx" id="posiCDIcon">
<span class="valigner"></span>
<img height="103" src="https://www.metsales.com/MetropolitanSales/microsite/posiflex/images/home_icons/CR6300.png" width="200"/>
</a>
</td>
</tr>
<tr>
<td class="imgtext"><span>TX Fan-Free Series</span></td>
<td class="imgtext"><span>Cash Drawers</span></td>
</tr>
</table>
#posiflex_directory {
text-align: center;
}
#posiflex_directory a {
color: inherit;
position: relative;
}
#posiflex_directory td {
border: solid 1px;
}
#posiflex_directory .theimgs {
width: 215px;
height: 225px;
padding: 5px;
border: solid 1px;
}
#posiflex_directory span {
left: 0;
right: 0;
top:100%;
bottom: 5px;
text-decoration: underline;
font-weight: bold;
}
img {
border: solid 1px;
}
.valigner {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.imgtext{
height:40px;
}