We are using GridStack Widgets plugin in Vue JS for creating dynamic widgets and it's working fine.
However, on new widgets creation we are setting 'Y' values as widgets.length + 120.
New widget added at the bottom of page with incremented in 'Y' value etc: (121, 122, 123) which is the correct case.
but on page load GridStack sort widgets on the basis of 'Y' value with descended order and all widgets get sorted like: 123, 122, 121 ... and high value of 'Y' came up on top.
I want to revers this sorting option, so last created widgets set on bottom of page as it was on creation time and widgets will be like 121, 122, 123
GridStack.init({
column: 120,
cellHeight: 15,
margin: 5,
});
using above options while in mounted phase.
I've added this key value oneColumnModeSort:'column-reverse' in option but it's not working.
GridStack.init({
column: 120,
cellHeight: 15,
margin: 5,
oneColumnModeSort:'column-reverse',
});
Is there any way, i can change default sorting option in Grid Stack VueJS.
Related
I am working on a react based website and I want to check my location path and optionally have the scrollbar enabled and disabled, since it's a global property on the page and any css imported will be applied globally it doesn't seem to work well.
Essentially on all but one component, I want the scrollbar to be enabled. on that component, users can only scroll via buttons(to only certain areas in the page), I am using react scroll for the same. To disable scrolling via other means I am using the disable-scroll package.
Disable scroll works fine but since I want programmatic scrolling to be enabled I can not set disable scroll to on/true(globally)
These are the settings I've added to disabling user input.
disableScroll.on(
{},
{
authorizedInInputs: [32, 37, 38, 39, 40],
disableKeys: true,
disableScroll: false,
disableWheel: true,
keyboardKeys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
}
);
Any ideas on how to achieve it?
TL;DR: Set scrollbar width to zero on one location and keep default values everywhere else
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;
}
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
jQuery Mobile Rangeslider Widget provides the step attribute to specify increment value.
Is there any way to customize this step value to increment like 0.1 upto 10 then 10 till 100 and so on
Widget value start from 0.1 , 0.2, 0.3,... until 1, then 2, 3,.. until 10, then 20, 30... until 100, then 200, 300... until 1000,...
Any hacks like this one?
Closest solution that I could found is jQuery Simple Slider
How can I arrange some images in a panel with 'hbox' layout and in the same time, keep them aligned with the other fields in the form ?
Common form fields in ExtJs have a margin-bottom of 5px and a height of 22px, so the only way I can think right now is to put the image considering this field defaults. The problem comes when i have multiple lines in my panel, in Internet Explorer especially.
Basically, I want my form to look like this:
What I tried so far (first I created the image directly, not as an item in a container --> the same result):
createImageItem: function(config)
{
return Ext.create('Ext.container.Container', { width: 16, height: 22,
items: [{ xtype: 'image', padding: 3, src: 'resources/images/arrowLeft.png'}],
margin: '0 5 5 5'
});
}
In Chrome looks fine, but in IE the images go up with 1px every row. I don't know why.
Is there any other way to do this? I would be perfect to be a nicer way and don't bother about the pixels and calculations.
Thank you!
I am using ExtJs version 4.0.7
You could use the Ext.isIE property to set the dimensions based on the browser, for example:
margin: Ext.isIE ? '0 5 6 5' : '0 5 5 5' //or whatever the appropriate values are
You'll still have to worry about counting pixels, but at least it will look the same in both browsers.