Develop Reference

Why does my HTML table become half it's size when I add 'display: block;' to it's CSS?

CSS:
.TFtable{
width:100%;
border-collapse:collapse;
overflow-y: scroll;
height: 500px;
display: block;
}
.TFtable td{
padding:7px;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr{
background: #242526;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd){
background: #242526;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even){
background: #343434;
}
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
Please note that my table is inside a container--wrap, which is inside another container--wrap.
My table, inside the container wrap, halfs itself on a desktop screen and there is just a black space on the right of it.
What's happening?
HTML
<div class="container--wrap">
<table class="TFtable">
...
</table>
</div>
However, when I remove the display: block;, the height:500px; and overflow-y: scroll does nothing.
What's wrong here?
Also: how can I check whether the user is using a mobile screen or not, and make it so the font in the table is smaller if they are?

Try adding a 100% width property in each container:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
width: 100%;
}
About the mobile screen, you need to use media queries. It's a long topic, so I let you a link to some documentation about it:
https://developer.mozilla.org/es/docs/CSS/Media_queries

How to make text flow to next line up, and hide the top?

I'm working on the display portion of a calculator. I have a div, with two divs, each with text, inside it.
<div>
<div>I'm text</div>
<div>I'm text</div>
</div>
The user can use buttons to add text to the divs. I want the top div to be a maximum of two lines and vertically-aligned to the bottom. When it exceeds this length, the overflow should be out of the top and hidden. I.e. the overflow should show the bottom part of the excessive text, and hide the top part.
I have searched similar questions relating to hiding images or links and tried their solutions. These generally revolve around using the following properties: position, width, height, bottom, overflow, vertical-align, word-wrap. I've understood most of these, but haven't been able to get them to work. One solution I haven't been able to successfully attempt appears to try and use some combination of the above with an additional nested div.
At this point, I've got the height & width controlled. The top div will only display two lines of text. I also have the overflow working. When it's too long, it is hidden.
The problem is that the bottom is hidden, instead of the top.
This is what it looks like. Notice the twos aren't visible, they're hidden:
This is what I want. Notice the twos are visible:
Here's relevant HTML & CSS, and below that is the link to a codepen if you need more information:
HTML (trouble div is #memory):
<div id=calculator>
<div id=displaybox>
<div id=memory>
0
</div>
<div id=display>0</div>
</div>
</div>
CSS:
#calculator {
border-style: solid;
height: 325px;
width: 260px;
margin:auto;
margin-top:10px;
border-radius:8px;
background-color: #494949;
font-family: 'Audiowide';
}
#displaybox {
border-style:solid;
border-width:3px;
width:227.5px;
margin-left:12px;
margin-right:auto;
border-radius: 8px;
text-align:right;
margin-top:20px;
padding-right:12px;
padding-left:3px;
font-size:30px;
background-color:#D4D7A1;
height: 75px;
}
#memory {
font-size:15px;
padding-right:3px;
line-height: 15px;
margin-top:5px;
padding-left:12px;
color:#767676;
margin-bottom:-7px;
word-wrap: break-word;
height:30px;
width:207px;
overflow:hidden;
vertical-align: top !important;
}
Codepen: https://codepen.io/ethan-vernon/pen/WyQqzM"https://codepen.io/ethan-vernon/pen/WyQqzM

This change to the #memory block did it:
Added display: flex and flex-flow: column-reverse
#memory{
font-size: 15px;
padding-right: 3px;
line-height: 15px;
margin-top: 5px;
padding-left: 12px;
color: #767676;
margin-bottom: -7px;
word-wrap: break-word;
height: 30px;
width: 207px;
overflow: hidden;
display: flex;
flex-flow: column-reverse;
}

I have not found an answer yet still for CSS/HTML solution. However, I turned to jQuery/JavaScript and have solved my problem by calling the below function after each update to the #memory div.
function heightCheck(str) {
console.log(str.substr(1));
console.log('memory: ' + $("#memory").height());
while ($("#memory").height()>30) {
str=str.substr(1);
$("#memory").text(str);
console.log(str);
console.log($("#memory").height());
}
}

Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.

Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn

You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle

Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.

Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle

Handsontable - Change row height

I want to change the height of the rows in mi handsontable. I already change the widht of the columns (colWidths: [75,75,75]), but i cant find the way to do the same with rows.
Thanks!

you can use this. but remember you must mark the "white-space:nowrap " as !important to override the handsontable property
.handsontable td, .handsontable tr, .handsontable th
{
max-width: 20px;
min-width: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
}

I had the same issue, and you need to modify in one place, the css file, or you can overwrite the style in your html:
in the handsontable css file search for the style .handsontable td :
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 22px; /*change to the desired height value*/
empty-cells: show;
line-height: 21px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
/* preserve new line character in cell */
}
Just change the "height" value to the one you want inside the css, or you just add the following line in the style section of your html document:
.handsontable td { height: <desired height>px;}
Additionally I would make the changes mentioned by RustyBadRobot in file jquery.handsontable.js, this could be used in some other calculation, but so far the change in css seems to be enough.
Please note that this is working with handsontable version 0.11.3, not sure if this is also true for other versions.

The problem with that Chachi-inactive is the height gets dynamically set on one of the holder divs
<div class="wtHolder ht_master" style="position: relative; height: 27px;">
You can find and edit the below code in the main handsontable.js
columnWidth: 50,
rowHeight: function (row) {
return 50;
},
defaultRowHeight: 50,
selections: null,
hideBorderOnMouseDownOver: false,
This needs to be updated if you have elements below the handsontable table.

I don't know of any parameter similar to colWidths that you can use to specify individual row heights, but you can use CSS to specify a height for all td and th elements.
For example:
.handsontable th,
.handsontable td {
line-height: 50px;
}

Cut text in table

<table id="tab">
<tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr>
<tr><td class="sub">lllll</td><td class="sub">wwwww</td></tr>
</table>
#tab td {
border: 1px solid green;
max-width: 40px;
}
$(".sub").each(function(){
var o = $(this).html();
$(this).html(o.substring(0, 2))
})
LIVE EXAMPLE: https://jsfiddle.net/UTYLf/1/
i would like max-width for TD - 40px. i would like cut overflow text. I made substring but this is not usefriendly.
mm != ll and jj != ww etc. mm and ll has 2 chars, but mm takes more space than a ll.
In my example i would like have in table same as in this example: https://jsfiddle.net/Eb6WN/
what I must use instead of substr()?
I can use HTML, CSS, JavaScript (jQuery) and PHP

In these types of situations I use overflow: hidden as well as adding a title for each cell to display the complete text:
#tab td {
border: 1px solid green;
max-width: 40px;
overflow: hidden;
}
$(".sub").each(function(){
$(this).attr("title", $(this).text()).css("cursor", "help");
})
https://jsfiddle.net/hunter/UTYLf/4/

This (text-overflow: ellipsis; white-space: nowrap; overflow: hidden;) should sort you out, I think...

You could try adding the text-overflow property to your first CSS class.
#tab td {
border: 1px solid green;
max-width: 40px;
text-overflow: ellipsis;
}
Some documentation about text-overflow can be found here.

Why don't you use overflow: hidden; for this?

There is also a jQuery plugin that allows to have this multiline
http://plugins.jquery.com/plugin-tags/ellipsis