I was maybe sloppy while searching the HOT documentation, but I haven't found any way to define how the overflow text inside a cell should be displayed.
Is there any way to display the text over the cell width if next cells are empty?
Another thing I also did not found using the documentation is an option to retain column widths and height while pasting copied content. Currently width and height are not copied.
One solution is using the wordWrap option. From the documentation:
wordWrap (Boolean)
When set to true, the text of the cell content is wrapped if it does not fit in the fixed column width.
Since:
0.11.0
Default Value:
true
Related
doc says autofits Changes the width of the columns of the current range to achieve the best fit, based on the current data in the columns. So it's based on the data in the columns.
Now I have an example: input 'aaaaaaaaaaaaa' in A1 and 'aaa' in A2, and I execute ctx.workbook.worksheets.getActiveWorksheet().getRange("A2").format.autofitColumns(); but it autofits according to the A1's content rather than A2's, but what I want is the later one, is there any way to achieve this please?
Thanks, I can repro this issue, I think our behavior API aligned with when double click the resizable button in column, it will resize according to the content of the whole column.
A bug(#3984867) was created to track this issue, Team is investigation on it.
,
I have two tables sit next to each other and display data about two items that are being compared. Each item has a name, a category, and then a description - some descriptions (the third column) are very short (one word) and some are very long (multiple sentences). I need to align the two tables so that the row heights match up perfectly. Here's what I have so far:
Notice how the first row in each table doesn't align because of the difference in heights in the row. Ideally I'd love to solve this with CSS and some kind of overflow property combined with min-height, but I'm not sure where to start. Thanks!
You can place the description text (2nd table) inside a "div" in "td" and
make the "div" css: "overflow:auto; max-height:40%"; and make changes to the width of the table data as required for the both tables.
You can use the height property to give each cell in the table a uniform height.
Setting the overflow-wrap property to break-word will break a long word that does not fit inside the cell (like supercalifragilisticexpialidocious) so it fits. You need to style it as an inline-block so the overflow works properly. If all else fails and there is just too much darn text in a table cell, you could set overflow to hidden to make sure that your users can at least see the content without it spilling over everything, but ideally you should set the height to be large enough for your data. If you need an example, let me know and I can post one.
I have a grid that I want it's width to be always 100 % of the container.
I got his working by setting autowidth: true. Now the problem is that when I hide a column my grid no longer expands to 100% of parent's width.
Here is an example illustrating the issue.
De-comment the line with in the load complete to see both cases.jsfiddle
loadComplete: function(data){
//$(this).hideCol(['number']);
}
This is happening because you're hiding the column after the grid has finished loading, e.g. the total width has already been calculated. If you always want the 'number' column hidden then just add the hidden: true property to it.
Modified fiddle: http://jsfiddle.net/fo3wb58w/
If you want to dynamically hide columns at startup (your question doesn't make this clear) then please take a look at How to adjust the column width of jqgrid AFTER the data is loaded?
I am working with handsontable [JavaScript Spreadsheet
library] and want to toggle settings with a bootstrap-styled-checkbox. The first thing was, to set a specific width and height to the table when the box is checked and to undo this fixed size (so it automatically resizes again) when uncheck the box.
Here is my current code:
$('#mycheckbox').click(function() {
if($('#mycheckbox').prop("checked") == true){
handsontable_table.updateSettings({
width: 725,
height:100
})
}else{
handsontable_table.updateSettings({
// missing :(
//UPDATE:
width: null,
height: null
})
}
});
At first, my handsontable-table is automatically sized to the correct size. When I check the checkbox, the table resizes to the given width and height. But I don't know how to remove this width- and height-settings. I tried to set them to 'false' or 0 or remove these settings with jQuery-.removeProp(), but none of them does what I want. And I can't find something right in the handsontable-docs (or other sites).
I very appreciate your help!
EDIT
I found a solution: You just have to set the width and height to null. See edit above.
But there is something strange going on when I minimize my table and maximize it again - at first, my div below the table slides up to the new bottom of my table, but when it gets big again, the div doesn't move anymore, its overlapping with the table...
However, I still don't know how to remove settings from a handsontable...
As you mentioned in your edit, by updating the value to null it appears to be one way to reset a setting with in Handsontables options. It my experience you do not want to set the height and width to null, but instead update it to a new value.
If you were clearing out a setting like nestedHeaders for example; you would just set the value to null to stop using the nestedHeaders feature. However, that doesn't work for every option.
If you are trying to expand and collapse a handsontable then setting the height and width to null or zero is not going to be the best solution. You should update the parent div to display null using jQuery(handsontable's parent selector).hide() or .show().
I'm using SlickGid 2.0 and I'd like to be able to set the width of each column based on the longest string contained in the column. I'm fine calculating the required width, but I cannot figure out how to set the width of a column outside of faking a drag event. Is there any other way to individually set the widths of columns in SlickGrid?
According to comments in the source code, you can set model[cell].width to adjust the width of individual columns.
See comments here:
http://code.google.com/p/slickgrid/source/browse/trunk/slick.grid.js?r=9