Develop Reference

Handsontable in Handsontable Dropdown Height Adjustment

How to allow fixed height in this dropdown menu? (Column Car)
I have been fiddling endlessly to fix the height issue. I want a fixed height dropdown menu max 300px. I have used AutoRowSize height feature and other height features within the handsontable site, but none seem to have worked.
I have run out of ideas. Any suggestions or alternatives I can try?
I am using Handsontable in Handsontable feature (Found Here).
Fiddle http://jsfiddle.net/72dgoLva/3/
columns: [
{
type: 'handsontable',
handsontable: {
colHeaders: ['Marque', 'Country', 'Parent company'],
autoColumnSize: true,
data: manufacturerData,
getValue: function() {
var selection = this.getSelectedLast();
// Get always manufacture name of clicked row
return this.getSourceDataAtRow(selection[0]).name;
},
}
},
{type: 'numeric'}
]

.handsontableEditor .ht_master {
height: 300px;
overflow-y: auto !important;
width: calc(100% + 2px);
}
.handsontableEditor .ht_clone_top {
transform: none !important;
}
... seems to do the job. Updated fiddle.
I had to use !important to override inline styles placed by HoT on elements, on the fly. To limit the chances of this affecting other instances, prefix selectors with a specific identifier for this instance.

Can't change element's height

I'm trying to resize element by dragging (like so). I wrote a simple directive (will handle ghostbar later):
#Directive({ selector: '[drag-resize]' })
export class DragResizeDirective {
private dragging: boolean;
constructor(el: ElementRef, renderer: Renderer2) {
renderer.listen('window', 'mouseup', (e) => {
if (this.dragging) {
el.nativeElement.style.backgroundColor = 'red'; // Works fine.
el.nativeElement.style.height = `${e.pageY + 2}px`; // Not so much.
this.dragging = false;
}
});
}
#HostListener('mousedown') onMouseDown() {
this.dragging = true;
}
}
The problem is I can't change height of the element. Other styles work fine. I'm using Angular 4.0.3.
Computed attributes:
display: block;
height: 244.781px;
left: 0px;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 655.422px;
width: 1793px;
*renderer.setStyle() doesn't work either.
** Element I'm trying to resize is a grid tile (md-grid-tile from Angular Material).
*** Directive works on other elements.

Edit 2:
I've dug into the md-grid-list implementation. The row height is recalculated everytime that ngAfterContentChecked is triggered (code). This happens after every mouse event and is probably the reason why setting the height has no effect.
From the md-grid-list documentation I can see that you can also pass a rowHeight (e.g. 200px) input parameter to the `md-grid-list. This seems to be cleanest way to set the row height, but will scale all rows to the same size.
If this is not the effect you want to achieve, you can try setting the height in the ngAfterViewChecked lifecycle hook.
Edit:
In case your code is trying to resize a display: inline element, you first have to apply a e.g. display: inline-block to it. Otherwise it will ignore the height value.
The style.height attribute expects numeric values to have a unit (e.g. %, px, rem, em, vh).
This should work:
el.nativeElement.style.height = `${e.pageX + 2}px`;

How to avoid transparent background using cropping plugin

I'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.
here is my code:
<div id="imgWrap" style="max-height:400px;min-height:400px">
<img id="img" src="" /> // Image gets added dynamically
</div>
the javascript
var reader = new FileReader();
reader.onloadend = function () {
var img = $('#imgWrap img');
img.attr('src', reader.result);
img.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.65,
guides: false,
strict: true,
highlight: false,
responsive:true,
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom:true,
rotatable: false,
minCropBoxWidth:105,
minCropBoxHeight:105,
built: function () {
// cropper-container is the element where the image is placed
$('.cropper-container').cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
}
);
},
})
I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens
You can see an example here:
The natural size of the image is 1920x1200
This is what is generated after the image is added:
So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?

I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue
https://github.com/fengyuanchen/cropper
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}

Setting background property of cropper object to false fixes this problem.

You can set option:
aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container

In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with
$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));
and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.

I had a same problem and solution was easy.
Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.
var $area = $('div.crop-area-image'); // jquery object
$area.cropper(options); // init cropper
$area.css({height: '300px'}); // setup css
voala .. thats all!

Unfortunatelly
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
is not enough. This only fixes top and bottom empty space issue.
I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/

Use fillColor option in the getCroppedCanvas method
Also, make sure to use full color name ('#ffffff') not ('#fff')
getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});

You call setCanvasData method on wrong element.
You should call it on the image:
...
img.cropper({
...
built: function () {
img.cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
});
}
});
...

How to set width to dojox/form/CheckedMultiSelect?

I have this following code in dojo which is using dojox/form/CheckedMultiSelect:
var checkedMultiSelect = new CheckedMultiSelect ({
id:"something",
dropDown: true,
multiple: true,
labelText:"something",
store: dataStore,
style : {width:"240px"} // this doesn't work
}, "placeholder");
How do I set a width to this widget?
I use dojo 1.9

Check out this fiddle:
http://jsfiddle.net/phusick/qrSWu/
stolen from this post:
Dojo CheckedMultiSelect text wrap and horizontal scrolling
You have to overwrite some css styles...
.narrow .dojoxCheckedMultiSelectWrapper {
width: 200px;
}

If I am not wrong, then this is what you want to add the following style:
.dojoxCheckedMultiSelectSelect{
width: 240px;
}

Resizing a circle - Where is the bug sitting?

I have the following code, the circle doesn't resize:
HTML
<div onMouseOver="mainOver();" onMouseOut="mainOut();" id="c"></div>
JavaScript / jQuery
function mainIn()
{
$('#c').animate({
border-radius: '100',
webkit-border-radius: '100',
moz-border-radius: '100',
width: '200',
height: '200',
margin-left: '-100',
margin-top: '-100'
});
}
function mainOut()
{
$('#c').animate({
border-radius: '50',
webkit-border-radius: '50',
moz-border-radius: '50',
width: '100',
height: '100',
margin-left: '-50',
margin-top: '-50'
});
}
Example
The problem
The circle does nothing, even when hovered.

you didn't include jQuery in your jsfiddle
Use border-radius:50% to make a square circle in anysize
Use jQuery to bind events, it's easier!
Animation need timing and callback function
Look at fixed code:
$('#c').hover(function(){
$(this).animate({
width: 200,
height:200,
'margin-left':'-100px',
'margin-top':'-100px'
}, 500, function(){});
},function(){
$(this).animate({
width: 100,
height:100,
'margin-left':'-50px',
'margin-top':'-50px'
}, 500, function(){});
});
http://jsfiddle.net/mohsen/9j795/16/

There are several issues in your code:
You're using jQuery, so use it's handlers.
You should instead using the handlers in jQuery, such as .hover() to handle the mouse over and mouse out.
There are no dashes in JavaScript properties
You can't do things like margin-top: "-50px" let alone margin - top: "-50px", instead, you should be using camelCase marginTop: "-50px" or to stringify your properties: "margin-top": "-50px".
Vendor prefixes are not needed
jQuery automatically handles the specific browser correct version. No need to animate -webkit-border-radius and the such.
Example.

Don't add javascript: to onMouseOver and onMouseOut. Just mainOver() and mainOut() is all you need.
EDIT: Also, you wrote mainOver() in one place, and mainIn() in the other.

Quite a few things:
border-radius is interpreted as border - radius. In jQuery, the properties camel case: borderRadius.
Don't do onmouseover, etc. jQuery provides this functionality.
No need to animate -webkit-..., etc. jQuery should take care of this.
See this code for the fixes: http://jsfiddle.net/9j795/7/