We Keep Coding

Highstock: How to disable rangeSelector responsive rule for breaking line between elements?

I'm trying to develop a very compact chart that displays both buttons and inputSelect from rangeSelector on the same line. Also I have a controller to show/hide stocktools gui interface (this is the source of bug).
Showing gui generates an animation that moves buttons to the right, since the distance between both elements are greater than the responsive rule condition (I suppose) they stay on the same line, but when I click to hide the gui an animation triggers and forces inputSelect to break a line.
I have tried to use a parameter chart:{animation:false}, but for some reason I get the inverse problem. When I click to show the gui interface inputSelect breaks a line and when I hide it back it goes back for the same line.
Here is a live demo.
I was wondering if I could acces that responsive rule and disable it, but I couldn't find it anywhere in API docs. Also I have tried to use default parameters from rangeSelector API but it seems they can't help with that gui animation being triggered.
Any solution for that outcome is valid, I just think this is viable one.
Update
I found this forum thread https://www.highcharts.com/forum/viewtopic.php?t=41142. This is a viable workaround, I tried to implement it to make both input goes to the right and buttons to the left, this way it would be harder for their condition of break line to be met.
Here is the workaround:
chart: {
events: {
load: function(){
let marginRight;
let marginLeft;
let marginLeft;
let this = chart;
marginRight = chart.marginRight - chart.spacing[1];
marginLeft = chart.plotLeft + chart.spacing[3];
chart.update({
rangeSelector: {
inputPosition: {
align: "right",
x: marginRight,
},
buttonPosition: {
align: "left",
x: marginLeft,
}
}
});
}
},
It only worked for the marginRight for some reason chart object doesn't have marginLeft property, I was wondering if is there any other way to calculate axis title and labels width to pass as this x offset.

C3.js Tooltips not Showing any text

I am using version 0.7.1 of C3.js and I have created a donut chart with the following code:
var chart = c3.generate({
data: {
columns: [
['Critical', 100],
['High', 200],
['Informational', 300],
['Medium', 400],
['Low', 500],
],
type : 'donut',
},
donut: {
title: "Finding Severities"
},
tooltip: {
format: {
value: function (value, ratio, id, index) { return value + " " + id + " Findings"; }
}
}
});
Everything works perfectly fine except for the tooltips which show up with blank boxes instead of the values I am trying to print. Even if I remove my custom tooltip format, the default tooltip still will not show up.
I have not modified the css and js files for C3.js and when I run this same code on their website (https://c3js.org/samples/chart_donut.html), it works perfectly fine.
Here is what shows up when I try to view the tooltip on my site:
And here is what I want to show up (which is what is supposed to happen if you run this code on https://c3js.org/samples/chart_donut.html) :

Not a full answer, but too big to fit in a comment:
Something, somewhere, is setting the css color style for your table cell elements to 'white' (or '#fff'). c3.css itself doesn't have a rule for this property, so this will be getting set in another css file you load in or it might be the default for whatever browser you are using.
The c3 demo page uses another css file, foundation.css, that sets it to '#222'. (And I can recreate your problem by changing that css file's value for that rule/property combo to 'white'). The jsfiddle linked above uses the browser default which for me in chrome is '#000'.
So add this css rule and I'm 90% sure the problem goes away:
.c3-tooltip td {
color: #222;
}

how to adjust jspanel(jquery panel) size in jquery and asp.net

We are using jspanels in our project as tool bar and whenever we click toolicons,jspanels will come as a popup and will display controls like textboxes for inputting data and gridview for displaying data.In normal way whenever we enter data in textboxes,after saving data it will be displayed in gridview.Jspanel will be adjusted to accommodate gridview.Now the problem i am facing is, i am minimizing jspanel by using jspanel.minimize() for certain times after that i will use jspanel.normalize() in order to move to the previous position.After that when ever i display results in gridview jspanel is not adjusting its size rather gridview is going inside jspanel, and i have to drag the corner of jspanel in order to display gridview.How can i avoid this issue rather dragging the panel.Here is the code i used for jspanel
var jteamNetworkPanel = null;
function searchByPanel() {
document.getElementById("divtDetails").style.visibility = "";
var content = document.getElementById("divtDetails").outerHTML;
$(document).ready(function () {
jteamNetworkPanel = $.jsPanel({
draggable: {
containment: "#tDiv"
},
selector: '#tDiv',
content: content,
size: { width: 'auto', height: 'auto' },
title: "Test",
position: { top: 50, left: "center" },
theme: 'warning'
});
});
}

Meanwhile jsPanel version 3 is released and I would suggest switching to version 3 for at least two reasons concerning your issue:
minimize() works different and has no more negative side effects I
know of
using "auto" with panel size is also improved and works a lot better
But v3 doesn't work with browsers older than IE11 and you need to check the docs since some options and methods are renamed.
http://jspanel.de/

Way to create empty space in gridster js

I am doing project in jquery to display the bus map as rows and columns. For that I am using gridster.js to display the seat arrangement. I am having the piece of following code
$(".gridster ul", xxxMapContainerST).each(function(){
var gridster =$(this).gridster({
widget_margins : [ 1, 1 ],
widget_base_dimensions : [ 30, 30 ],
draggable : false,
avoid_overlapped_widgets : false,
extra_rows : 0,
extra_cols : 0,
resize:false
}).data('gridster').disable();
});
Here the problem arise is when I want to display empty seats i.e not a cornered seats. The empty seat position was filled by the adjacent seats (filled by vertically down position seats). It causes severe misalignment. I have googled . No obvious solution found. Anyone kindly do some remedy for this problem.
Below link raises the same question, yet no answer found
Make gridster.js tiles stick in specific grid positions (snap to grid)

I was going thru something like same. May be I am answering it way too late!
But the demo link you have mentioned here is using a better 'version' of Gridster.
E.g. , the package I have downloaded from gridster's official page is v0.5.6 - 2014-09-25
and the one which consists of demo is - v0.6.10 - 2015-05-31
If you still want to upgrade your app
Following are the download links for CSS and JS
JS : http://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.js
CSS : http://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.css

jqgrid autowidth and shrinkToFit not fitting exaclty

I have created a page which loads many grids into the page when the page loads. The idea is that all the grids need to adjust the width to fit the width of the page when the page loads. This works perfectly for the 1 grid that is visible when the page loads, using these options:
shrinkToFit: true,
autowidth: true,
Notice that the columns fit perfectly, and no horizontal scroll bar shows up. All the other grids that load in hidden areas of the screen, using the same options above, do not load correctly:
I tried to fix this issue by using a method to manually set the width, using the setGridWidth, setting the width of the hidden grids to the width of the 1st grid, which is the right width. Using this method, the width of the hidden grid is correct, but then the shrinkToFit option is not setting the width of the columns correctly, see here:
While the grid looks almost correct, you can see the column widths do not fit correctly so the horizontal scroll bar shows up. This becomes an even bigger problem when I get the grid which loads many subgrids. It becomes a mess:
The horizontal scroll bars take up too much space, and I wish the shrinkToFit would work correctly, it would be really neat and clean.
I hope I explained the problem well enough, does anyone know how I can get the shrinkToFit option to work correctly even for these grids which get loaded in hidden areas of the page? Thanks!
EDIT
Here is the code for the definition of the subgrids. You can see I use setGridWidth at the end:
...
subGrid: true,
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
// load the subgrid data only once
// and the just show/hide
"reloadOnExpand" : true,
// select the row when the expand column is clicked
"selectOnExpand" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
var po_num = jQuery('#po_list').jqGrid ('getCell', row_id, 'po_num');
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"/phpAJAX/Master/master_grid_v1.php",
datatype: "xml",
shrinkToFit: true,
autowidth: true,
mtype: 'POST',
postData:{
arg1:'pos',
po_num:po_num
},
colNames:[
'Row ID',
...
],
colModel:[
{width:20,name:'row_id', index:'row_id',editable:false,hidden:true},
...
],
loadonce:true,
pager: pager_id,
sortname: 'row_id',
sortorder: "asc",
height: '100%'
}).setGridWidth($("#inv_list").width()*.95);
}