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
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:
I'm using gridstack.js (v0.2.6) library for my dashboard view in web application. I tried to implement a possibility to let user change the grid width. Almost everything seems to be working, but I encountered a problem with maxWidth of widgets. Setting widget's maxWidth to bigger value than number of grid columns seems to be crashing resizing of widget. For example, when I set gridWidth = 3 and widget's maxWidth = 5, I can resize widget to max ~1.3 * column width instead of 3 columns.
I provide the most important parts of code:
HTML
<div class="grid-stack grid-stack-3">
</div>
Javascript
Initialization:
var $dashboard = $('.grid-stack');
var columnsNumber = 3;
function initGridStack() {
$dashboard[0].className = "grid-stack grid-stack-" + columnsNumber;
var options = {
cell_height: 200,
vertical_margin: 10,
animate: true,
width: columnsNumber,
draggable: {
handle: '.widget-header',
}
};
$dashboard.gridstack(options);
Adding widget:
// ...
$widget = createWidgetElement()
$dashboard.data('gridstack').addWidget($widget, x, y, width, height, autoposition, minWidth, maxWidth, minHeight, maxHeight);
Question
Has anybody had a similar problem and has any idea how can I handle this? I'll be grateful for any help.
I'm trying to render a report via PhantomJS 2.1.1 where the HTML page contains a chart generated by Chart.js. I have full control over that page. The resulting PDF should be a printable A4. As you can see in the screenshot down below, the chart is very blurry.
Is there any way I can make either Chart.js or PhantomJS render the chart/page at a higher DPI so that the drawn canvas appears nice and sharp?
PhantomJS:
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
border: '2cm'
});
Chart.js:
var lineChart = new Chart(ctx).Line(data, {
animation: false,
responsive: true,
pointDot: false,
scaleShowLabels: true,
showScale: true,
showTooltips: false,
bezierCurve : false,
scaleShowVerticalLines: false
});
Add viewportSize and zoomFactor in your phantomjs page:
await page.property('viewportSize', { height: 1600, width: 3600 });
await page.property('zoomFactor', 4);
and add in your html head template
<script>
window.devicePixelRatio = 4;
</script>
Try setting the zoom factor using a higher DPI for paper in relation to screen DPI:
page.zoomFactor = 300 / 96; // or use / 72
Must be set after page size is defined.
You could also check out this answer:
Poor quality of png images drawn into html canvas
For Phantom 2, I rendered the charts with a large canvas to get the resolution up and then converted it into a png finally destroying and removing the old canvas and replacing them with an image with responsive CSS classes. Adjusting the knobes on the canvas width and height in addition to Chart.js options will get you a perfect render. We were able to get our rendering speed up with the approach (alternative to SVG renders) and the file size down.
HTML:
<div class="container">
<!-- generated images -->
<img id="someIdImage" class="img-responsive"></img>
<!-- temporary canvas -->
<canvas id="someId" width="2000" height="600"></canvas>
</div>
Javascript:
/**
* _plot() plot with Chart.js
*
* #param {Function} callback
*/
function _plot(callback) {
var config = {}; // some Chart.js config
var id = 'someId';
var el = document.querySelector('#' + id);
var el2d = el.getContext('2d');
// plot instance
var instance = new Chart(el2d, config);
// generate and append image
document.querySelector('#' + id + 'Image').setAttribute('src', el.toDataURL('image/png'));
// destroy instance
instance.destroy();
el.parentElement.removeChild(el);
// callback
if (callback) {
callback();
}
}
Chart.js now has the parameter "devicePixelRatio". This allows you to increase the resolution directly in Chart.js. (normal 96dpi. target 300dpi; 300/96 = 3.125)
options:{
devicePixelRatio: 3
}
Documentation: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html
I can confirm that the #DevTrong response is working with Phantomjs 2.1.1
the only difference is that i set in my settings file:
page.viewportSize = { width: 3600, height: 1600 };
page.zoomFactor = 4;
Note: Its very important to set in you html this part:
<//script>
window.devicePixelRatio = 4;
<//script> (fix the script tag)
I am creating layout with ExtJs components and need to add widgets dynamically at run time. The code adds three containers to viewport, top, left and center tab panel. The tab panel further contains two tabs (Ex.panel.Panel) and the second tab contains an html Editor.
Code:
Ext.onReady(function () {
var vp = Ext.create("Ext.container.Viewport", {
layout: 'border'
});
var top = Ext.create("Ext.container.Container", {
renderTo: 'top',
height: 70,
region: 'north'
});
var left = Ext.create("Ext.panel.Panel", {
renderTo: 'left',
title: 'Menu',
split: true,
collapsible: true,
width: 270,
region: 'west'
});
var center = Ext.create("Ext.tab.Panel", {
renderTo: 'center',
region: 'center',
});
vp.add(top);
vp.add(left);
vp.add(center);
var tab1 = Ext.create("Ext.panel.Panel", {
renderTo: "tab1",
layout: "fit",
title: "Tab-1"
});
var tab2 = Ext.create("Ext.panel.Panel", {
renderTo: "tab2",
layout: "fit",
title: "Tab-2: Editor"
});
center.add(tab1);
center.add(tab2);
var editor = Ext.create("Ext.form.HtmlEditor", {
renderTo: "editor"
});
tab2.add(editor);
//center.doLayout();
});
The problem is that the editor is not displayed within second tab instead it displays on top. However when I click on second tab then it automatically corrects the layout and display html editor at correct position. But still the html editor does not allow to type.
Furthermore, I have observed that the documentation does not include examples of creating layout at run time, all examples demonstrate design time creation of layouts.
I also tried TabPanel.doLayout() method after adding tabs and html editor but still it does not correct the display issue. Please share if there is any idea on how to add components dynamically in ExtJs.
JS Fiddle
http://jsfiddle.net/uZGxS/
I have found the solution to the tab issues. While adding new tab to tab panel if we set it active then the child components will render correctly. In this case now the html editor layout renders and displays at correct position.
center.add(tab1);
center.setActiveTab(tab1);
center.add(tab2);
center.setActiveTab(tab2);
JSFIDDLE:
http://jsfiddle.net/uZGxS/1/
I have a problem when apply an Ext.ComboBox over an existing html select item, even if the existing content makes the html select about 20px (by it's content non static width is set), the Ext.ComboBox will resize to a sort of default, large, width value.
There's a way to auto resize the Ext.ComboBox based on the existing items and no using the default width?
Even if I know which best tool Ext is, this issue will let my colleagues to discard Extjs.
Thanks in advance
You can't technically make a combo "auto width" -- Ext actually converts the <select> into a regular <input> behind the scenes, and <input> elements have to have a width/size specified. However, you can trick Ext into sizing the combo based on the existing <select> which should give you the same end result. Here's an example from the Ext combo demo page, where I have modified the width config value:
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'state',
width: Ext.fly('state').getWidth(),
forceSelection:true
});
The obvious caveat would be that if you subsequently modify the list after it's rendered, the combo will not resize itself automatically and you'd have to figure out a way to resize it yourself.
Use this code:
Ext.ux.ResizableComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent: function(){
Ext.ux.ResizableComboBox.superclass.initComponent.call(this);
this.on('render', this.resizeToFitContent, this);
},
resizeToFitContent: function(){
if (!this.elMetrics){
this.elMetrics = Ext.util.TextMetrics.createInstance(this.getEl());
}
var m = this.elMetrics, width = 0, el = this.el, s = this.getSize();
this.store.each(function (r) {
var text = r.get(this.displayField);
width = Math.max(width, m.getWidth(text));
}, this);
if (el) {
width += el.getBorderWidth('lr');
width += el.getPadding('lr');
}
if (this.trigger) {
width += this.trigger.getWidth();
}
s.width = width;
this.setSize(s);
this.store.on({
'datachange': this.resizeToFitContent,
'add': this.resizeToFitContent,
'remove': this.resizeToFitContent,
'load': this.resizeToFitContent,
'update': this.resizeToFitContent,
buffer: 10,
scope: this
});
}
});Ext.reg('resizable-combo', Ext.ux.ResizableComboBox);
In addition to what bmoeskau suggests, you can use an xtemplate for your combo's items. This will give you the ability to change the look of the item. You can wrap text, add images, etc.
add a listener to the afterrender event and set the width if the list (the div that drops down ) to auto e.g.
afterrender: function(combo){
combo.list.setSize('auto', 0);
combo.innerList.setSize('auto', 0);
}
The reason I am using afterrender and not render is because if you set lazyInit to false it will set the list width, so in afterrender you override that setWidth
I'm pretty sure you can get ExtJs to render whatever html items you need to, in the way you want them to be rendered.
here's some code from the Examples/Form/Combos.js file:
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'state',
width:20, //<-- set this config value!
forceSelection:true
});
in the code that you're using to transform the combo, just specify a width for the ExtJs combo.