The auto-resizing behaviour is a bit unusual in handsontable. I just want to have fixed row height for all my rows that don't expand unless you click into it, or manually drag it down, like in excel. I also want to manually set that height to the same height for all the rows and not have it calculated based off of the tallest row.
I've tried:
Adding 'height' => 50 to my columns, adding manualRowResize: true, and adding in fixed heights for a few rows with manualRowResize: [50, 50, 50], but when my data spans multiple rows (for example, when rendered in html), it doesn't stay at a fixed height.
Handsontable - Resizing rows and columns
Maybe rowHeights is what you want.
var
container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(200, 10),
rowHeaders: true,
colHeaders: true,
colWidths: [55, 80, 80, 80, 80, 80, 80],
rowHeights: [50, 40, 100], // <-- this one sets fixed row height
manualColumnResize: true,
manualRowResize: true
});
Related
I am building a webpage which includes a Gridstack grid. I initialise it like this:
<script type="text/javascript">
var grid = GridStack.init({
acceptWidgets: false, // Accept widgets from other grids or from outside.
alwaysShowResizeHandle: true, // Should resize handle be visible at all times or only at hover.
animate: false, // ???
auto: true, // Should Gridstack automaticaly initialize it's items?
cellHeight: "155px", // One cell height.
column: 48, // Number of columns to which to snap to.
disableDrag: false, // Eanble or disable dragging.
disableOneColumnMode: true, // Disable "one-column" mode when width equals minimal width.
disableResize: false, // Enable or disable resizing.
draggable: true, // ???
dragOut: true, // Prevent dragging items outside of their parent element.
float: true, // Enable floating tiles.
handle: '.grid-stack-item-content', // Select draggable handle class.
handleClass: 'grid-stack-item-content', // Select draggable handle class (override).
itemClass: 'grid-stack-item', // Choose class, which will be treated as a tile.
maxRow: 12, // Maximum rows where zero means unlimited.
minRow: 1, // Minimum rows to prevent empty grid from colapsing.
minWidth: 768, // Constant width which determines, when "one-column" mode is triggered.
oneColumnDomSort: false, // ???
placeholderClass: 'grid-stack-placeholder', // Select placeholder class.
placeholderText: '', // Text inside a placeholder.
resizable: { // Should resize handle be visible at all times or only at hover (override).
autoHide: false,
handles: 'n, nw, w, sw, s, se, e, ne'
},
removeable: false, // Enables removing of tiles if they are dragged outside of the grid.
removeTimeout: 2000, // Time in "ms" before tiles dragged out of the grid are removed.
row: 48, // Fixed number of rows where zero means unlimited.
rtl: false, // Right to left mode.
staticGrid: false, // Prevent any kind of resizing or drag & drop functionalities.
verticalMargin: 20, // Vertical gap between tiles.
});
</script>
And then I dynamicaly create a widget i.e. tile, using:
<!-- Gridstack: Example of adding a tile i.e. widget -->
<script>
grid.addWidget(`
<div>
<div class="grid-stack-item-content">
<p>...</p>
</div>
</div>`,
0,0,1,1,true,1,48,1,48,"ID");
</script>
This creates the widget in Chromium, Firefox, Edge. But not in IE11. Does anyone know what could I be doing wrong? It looks like I am doing all by the manual...
This is the console log in IE11:
And if I click on the error I get this line, where there seems to be no weird characters:
First :
I have a problem with a dynamic modal-dialog with a diagram in it.
The code is pretty easy:
https://jsfiddle.net/c2abnhja/1/
As you can see, no diagram is in the created div container. But if you resize your window, the diagram is drawn correctly with the correct size of the modal-dialog. [Also it doesn't matter if I trigger the resize event in manual : https://jsfiddle.net/ywaoec3d/1/ ]
And in second:
If I set a size to the modal dialog of bootstrap, like here:
https://jsfiddle.net/aqs5fhha/1/
the diagram never get the correct height of the modal-content... but the documentation of c3.js says :
size.height
The desired height of the chart element.
If this option is not specified, the height of the chart will be
calculated by the size of the parent element it's appended to.
Any idea why the diagram is not drawn correctly?
Thanks in advance
I was able to fix your problem using this :
$('#myModal').on('shown.bs.modal', function() {
var chart = c3.generate({
bindto: '#diagramAppend',
data: {
x: 'x',
columns: [
['x', 30, 50, 100, 230, 300, 310],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 450]
]
}
});
});
Basically what is happening is that you try to generate your graph on a div with 0 width. Waiting the event shown.bs.modal allow you to have a width at this point.
Updated JSFiddle
I am using JarvisWidget library to create widgets, in which i create a table using handsontable library. but the table exceeds the widhth of the widget. I want to put a scrollbar. I tried in css wdith:100%; and then overflow-x:scroll. but it didn't working.
That how its coming. But i want to put a scrollbar and and show the whole table inside the widget
here is my table code:
<section class="col-md-12">
<div id="table_example" class="handsontable"></div>
</section>
var container = document.getElementById('table_example');
var hot = new Handsontable(container, {
data: handsOnData,
renderAllRows: true,
fixedRowsTop: 0,
colHeaders: true,
rowHeaders: true,
formulas: true,
comments: true,
manualRowResize: true,
manualColumnResize: true
});
Finally got it..
windowWidth = ($("#wid-id-1").width())-100; //retrieve specific div width
windowHeight = $(window).height(); //retrieve current window height
$("#table_example").css('width',windowWidth);
$("#table_example").css('height',windowHeight);
wid-id-1is the id under which the section is written. or the we can say the parent div of the table. And add style="overflow:hidden" to the table
Fiddle here.
Description of problem:
I'm attempting to make this image scale into view (centered), and then give the appearance that it's "bouncing" away from the screen briefly after reaching its maximum size of 100%. Unfortunately, it is moving down and to the right with each new effect chain. Why?
Note that the effect I'm attempting to achieve is completely different from the bounce effect.
Try 'scale': 'box' option for scale effect.
scale (default: "both")
Type: String
Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.
As yours box div doesn't actually have any content, probably, that's the reason of unwanted shifts...
Yours fiddle with modification.
Another fiddle variant.
Upd.
As you can see in second fiddle, you can use separate function for each animation phase (effect). So, just in outermost phase pick current box size, and in each next phase calc scale percentage with honored current/initial box size, like following:
var box = $('.box');
box.data('size', {'w': box.width(), 'h': box.height()});
box.show(scale_effect(box, 100, 250, function () {
box.stop().effect(scale_effect(box, 80, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
box.stop().effect(scale_effect(box, 90, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
}));
}));
}));
}));
}));
function scale_effect(box, percent, duration, complete) {
box = $(box);
var size = box.data('size');
var absolutePercent = percent * size.w / box.width();
console.log(absolutePercent);
return {
'effect': "scale",
'percent': absolutePercent,
'scale': 'box',
'duration': duration,
'queue': false,
'complete': complete
};
}
See the fiddle for preview.
And here's some nifty variant with following syntax:
$('.box').bouncedScale([
{'percent': 100, 'duration': 250},
{'percent': 80, 'duration': 100},
{'percent': 100, 'duration': 100},
{'percent': 90, 'duration': 100},
{'percent': 100, 'duration': 100},
]);
I have a simple network diagram. It contains of circle elements and lines connecting them. Now sometimes there could be quite a lot of those circles and they go 'behind' the screen (see the image attached).
The image doesnt cut off the edges, its the edge of my screen :)
Its a force diagram (code used can be found in this fiddle ). Setting the width = 400;
height = 500; or changing these two variables doesn't really help.
What variable am I missing here. Id like them not to go 'behind' the screen or is it just how it should behave ?
Thanks,
Neil
DEMO
map.set('C1', {
fixed: true,
x: 100,
y: height / 2
});
problem is that your 'C1' is fixed at 100 in x axis change it to 200 or 250 according to your need
map.set('C1', {
fixed: true,
x: 250,
y: height / 2
});
OR
you can change fixed: false, to achieve the same DEMO2
map.set('C1', {
fixed: false,
x: 100,
y: height / 2
});
OR
set C1 width half DEMO3
map.set('C1', {
fixed: true,
x: width/2,
y: height / 2
});