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;
}
Related
you have all seen that explanatory text boxes that appears when the visitor hovers over specific element, I want to add something similar for the table datas on my webpage which explains what these table datas mean. However, I don't want to go through all that creating a new div with text inside, a function that displays that div and onmouseover-onmouseout events that triggers that function(Too complicated to do such a simple thing). Is there any easier and quicker way to do that? Maybe something similar to alt attribute in img tags?
I think you can do the trick with pseudo-elements and data attributes.
[data-test] {
border: 1px solid black;
position: relative;
}
[data-test]:hover::before {
content: attr(data-test);
position: absolute;
left: 5px;
top: calc(100% + 5px);
padding: 5px 10px;
border-radius: 2px;
background: black;
color: white;
font-size: 0.8em;
}
<div data-test="tootip">Hover me</div>
This will be a question that is hard to exmplain but please keep an open mind.
My experiment:
I have a div that contains some content and this div is hidden on load.
So now i have an element that when it is clicked shows the content of the div.
What I want:
I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.
My css skills are nothing to brag about and I honestly dont even know where to start.
Image that might clarify:
How do I do this?
If you don't need to support older browsers you can create a triangle with borders like so:
.nav-item::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
obviously would need moving about to fit where you want it.
If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.
try this
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}
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;
}
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).
<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