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;
}
Related
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
When one column has a long value, without spaces, the table breaks out of any container with a set width (or percentage). Currently, I'm needing a table with 50% width, and the long value breaks the table out of the 50% width container.
This jsFiddle simplifies my issue, with a width of 70%, and any custom CSS I've used overriding typical DataTables.net CSS (besides visual styling).
http://jsfiddle.net/mswieboda/8qVh4/
HTML:
<div class="container">
<table class="grid"></table>
</div>
CSS:
.dataTable {
width: 100% !important;
margin: 0;
}
.dataTables_wrapper {
position: relative;
}
.dataTables_scrollHeadInner {
width: 100% !important;
}
.container {
position: relative;
width: 70%;
border: 1px solid #f0f;
}
.container .grid {
position: relative;
overflow-x: hidden;
}
Note: I realize I shouldn't use !important, but that's an issue for another day.
Please see the jsFiddle for the specific JS, and DataTables.net options I'm using.
I'd like to cut off/truncate the long value with ellipses using CSS. I probably need something like:
.dataTable tbody td {
text-overflow: ellipsis;
overflow: hidden;
}
The only solution that's worked for me is to have a div in the td and setting a max-width/width on the div, but I don't want to set a fixed width, since I want it to be figured out from DataTables.net options, using the sWidth option.
I've done some research, but haven't come up with any solid solutions yet. Does anyone have a solution for this?
Add this CSS. The CSS must be applied before the table is renderd.
table { table-layout: fixed; }
td {
overflow: hidden;
text-overflow: ellipsis;
}
jsfiddle
If you don't really need to show ellipses, you can force a line break inside the td.
table { table-layout: fixed; }
td { word-wrap:break-word; }
I'm using a SlickGrid data table and some of my cells have very long text entries (1000 characters or more).
By default, SlickGrid only shows some of the text, and abbreviates the rest using an ellipsis.
This works well, except that I'd like to show the full text on mouseover, or have some other way to expand the cell to show the full entry.
Is this possible with SlickGrid, and if so how?
Just use this plugin:
https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.autotooltips.js
Register it like this and you are done!
mygrid.registerPlugin(new Slick.AutoTooltips());
By default, SlickGrid disables word wrap. Given that you have your cell height set correctly, you'd be able to see all of your cell's text by editing slick.grid.css like this:
.slick-cell, .slick-headerrow-column {
position: absolute;
border: 1px solid transparent;
border-right: 1px dotted silver;
border-bottom-color: silver;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
vertical-align: middle;
z-index: 1;
padding: 1px 2px 2px 1px;
margin: 0;
/*white-space: nowrap;*/
cursor: default;
}
My question is, why "text-overflow:ellipsis;" doesnt work for me?
I have table on my page and i want to shorten some text inside cell(td).
As you can see i have no width parameter in css. I get this value from json and then I set it with jquery. Maybe this is the problem? If so, how can i solve it?
#myTable2 td{
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:47px;
border-top: solid 1px #ebebeb;
border-spacing:none;
cellpadding: 0;
cellspacing: 0;
font-family:arial;
font-size: 8pt;
color: #3D3D3D;
padding: 4px;
}
I test it in Chrome 19, newest Firefox and IE9..
Thanks
You need a width of the table and table-layout:fixed;
http://jsfiddle.net/CagPK/
#myTable2 td{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
#myTable2
{
table-layout:fixed;
width: 100px;
}
text-overflow works with display: block elements, while table cells are display: table-cell elements. Enclosing your text in a <div> should work (fiddle sets the width when you click on the text).
I'm trying to provide menu with CSS and javascript. I would like to place a table at the bottom right of the screen and have it expand up. Currently, the table always expands down or tries to cram itself into the footer element containing the table. How do you force a table to expand up? The overflow style doesn't seem to provide the desired functionality.
Thanks!
Try this in your CSS.
table.bottomRight {
position:absolute;
bottom:0px;
right:0px;
}
Do you mean like this?
table {
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -250px;
width: 500px;
}
table th {
background-color: #eee;
border-bottom: 1px #ccc solid;
height: 25px;
line-height: 25px;
}
table th, table td {
padding: 10px;
}
table tbody {
display: none;
}
And javascript for demonstration purposes:
$('#test-button').bind('click', function() {
var tableBody = $('table tbody');
tableBody.toggle();
});
Example: http://jsfiddle.net/8SvCm/
Thanks for all the feedback. The solution I found is documented here:
http://www.bennadel.com/blog/1740-Building-A-Fixed-Position-Bottom-Menu-Bar-ala-FaceBook-.htm
It uses jQuery and a combination of nested divs and CSS to achieve the menu. Very cool!