Develop Reference

JQuery UI resizable grid, inconsistent behavior depending on grid value

I need a resizable bar that can go all the way to no bar. Depending on how what I set the grid to, sometimes I can, sometimes I can't. The values I try are multiples of the initial size of the bar.
Here are examples
Working:
https://jsfiddle.net/dg851voo/
$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
handles: 'n',
grid: [0, 60]
});
Not working:
https://jsfiddle.net/xmzj3x54/
$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
handles: 'n',
grid: [0, 20]
});
I need to be able to go all the way to no height for any multiple of the initial bar size.

I was able to get this working horizontally but not vertically. Possibly a bug with jQuery itself? Instead I came up with a slightly hacky solution that should get the job done.
Basically, if your grid size is 20 then the min height seems to be 20px - even if minHeight is set to 0. You put the resizable div in a wrap div, shift the resizable div down 20px, then you set the wrap to be overflow: hidden. Then if you want to retrieve the perceived height of the div you will have to subtract 20 from the actual height. Example below.
var gridY = 20;
$("#resizable").resizable({
handles: 'n',
grid: [0, gridY],
minHeight: gridY,
maxHeight: 120,
resize: function(e, ui){
var actualHeight = ui.size.height;
var perceivedHeight = actualHeight - gridY;
$("p").text(`${perceivedHeight}%`);
// because the height of my div is
// 100 I dont have to convert it to
// percentage, but if it was anything
// other than 100 you would have to
}
});
#resizable-wrap{
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
#resizable {
position: absolute;
top: 0;
left: 25px;
width: 50px;
height: 120px;
background-color: #F3EF7D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>

Can I add a label below a Kendo UI radial gauge?

I am using KendoUI's radial gauge, and I want to add a label right between the 0 tick and the 300 tick. The initalization takes in an object that can have a label attribute but that configures the actual tick label whereas I want to add a new word centered in the middle such as "Pounds", "Miles", etc.
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge
$("#gauge").kendoRadialGauge({
pointer: {
value: 37.4
},
scale: {
startAngle: -30,
endAngle: 210,
minorUnit: 5,
majorUnit: 25,
min: 0,
max: 100,
}
});
Here's a fiddle to try it with: http://jsfiddle.net/sThK3/104/
UPDATE 1/25/2017:
It is certainly possible, but even after reading their code I don't understand where the labels are coming from: http://demos.telerik.com/kendo-ui/radial-gauge/car-dashboard

Unfortunately it appears like your objective may not be feasible in the way you were hoping for.
After looking more closely at telerik's radial gauge example you linked I found an image resource used for this: http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/car-dashboard.png
This image contains the labels you're referring to of {k/mh, x1000 RPM} and the images for the gas/temp on the right.
Floating a label over the gauge may be an alternative? Or building your own background-image that will contain the label you wanted. :(
That would be referred to in your CSS like follows:
#gauge-container {
margin: 0 auto;
overflow: hidden;
width: 614px;
height: 324px;
background: transparent url("../content/dataviz/dashboards/car-dashboard.png") no-repeat 50% 50%;
}
replacing ../content/dataviz/dashboards/car-dashboard.png with your image that has the right label in it for you
I'm going to see if I can figure out how to float a label on this using your jsfiddle example.
EDIT: I got the goods for you now. Looks like by using the appropriate css you can float a label in the middle of your radial.
I accomplished this with the following:
JS:
$("#gauge").append("<label>Test</label>");
CSS:
label {
margin-left: 50%;
margin-right: 50%;
float: center;
}

How do I render a 1px gutter between segments with a very small percentage width?

I am creating a UI control. It is a bar which shows colored areas in relative proportion to each other based on the input. A few of the requirements are that there be a 1px gutter between the colors and that every color must be shown at a minimum of 1px no matter how small the relative width.
The bar looks like this:
The gutters are being placed using a technique described by the pocketgrid documentation:
.threshold-container {
height: 8px;
$threshold-horiz-gutter: 1px;
&.block-group {
margin-left: -$threshold-horiz-gutter;
}
.threshold {
height: 100%;
min-width: 2px;
&.block {
padding-left: $threshold-horiz-gutter;
}
.colored-area {
height: 100%;
width: 100%;
}
}
}
There is a codepen here which provides a working example: http://codepen.io/ghoti143/pen/eZNXVW
The problem I face is that when the relative proportion of any one color is sufficiently small, the last color area wraps to the next line and looks like this:
To replicate this issue, visit the codepen project and enter this as the Threshold Array value:
[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]
In this case, the width style of the LightGreen area is 0.33333%. This equates to 0.495px at a bar width of 150px. However, because of the requirement to always show at least 1px of width for each color, the LightGreen area is consuming 2px of width (1px content + 1px padding).
Thanks for any insights you may have!

You can use the css calc function to subtract out the 1px margins from the width calculations for each section. [For example]http://codepen.io/anon/pen/ZWGNVY
coloredAreas.push({
color: thresholds[i].color,
width: 'calc(' + width + '% - 1px)'
});

When resizing jqxWindow, window body width and height not changing

Here is JSFIDDLE to my problem. As you can see, divs displayed inside window have set width to 100%, and my goal si to foce this divs to automatically resize when I am manually resizing the window.
#container {
width: 100%;
display: table;
table-layout: fixed;
border: 5px solid #ccc
}
I was looking inside this element throught element inspection in chrome and I figured out, that windowBody div doesn't change its width and height and that is the problem. Does anyone know how to achieve what I want?

I have just found out, that the problem was that you cannot declare maxWidth and maxHeight to 100% in jqxWindow declaration. You need to set absolute numbers. In my case worked setting them to max width of the screen.
$('#jqxwindow').jqxWindow({
height: 200,
width: 340,
minHeight: 100,
minWidth: 200,
maxHeight: screen.height,
maxWidth: screen.width,
isModal: true,
autoOpen: true,
resizable: true
});
here is JSFIDDLE

Setting the width of a RichCombo box in CKEditor

I've created a plugin with a RichCombo box. Unfortunately the name of the dropdown is a little too long for the RichCombo and it gets cut off.
Is there a way to force a wider RichCombo? Likewise, is there a way to force a width of the actual dropdown list (ListBox) itself?

The CSS value you seek is .cke_combopanel { width: 150px; }. It can be found within editor.css.

style your page with:
.cke_combo_text {
width: 130px !important;
}
.cke_combopanel {
width: 370px !important;
}

I got it. I added this to the page containing the ckeditor control:
<style>
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
</style>