I need an inline textarea inside a kendo grid to allow the user to edit a string value. I want to use a textarea because the value can be quite long. I am using a custom editor to achieve this like mentioned here: http://www.telerik.com/forums/how-to-change-input-to-textarea-in-popup-editor
I am setting the width and height of the textarea to be the same as the container's
$('<textarea data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '" style="width: ' + container.width() + 'px;height:' + container.height() + 'px" />')
This doesn't seem to work. When I inspect the height of the textarea element in my developer tools before I click on the cell to edit, it shows as 35px and after as 47px. This causes the rest of the grid to move down.
http://dojo.telerik.com/#unicorn2/eCAkU
That happens because you can't just use the container's height as height of an element inside itself, in that case. The row has other spacing properties like padding, for instance. In a simple and quick shot I came through this:
$('<textarea data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '" style="width: ' + (container.width() - 10) + 'px;height:' + (container.height() - 12) + 'px" />').appendTo(container);
Demo.
Just by decreasing a little the container's dimensions it fits the row height very nice. The only problem is with break lines, because when the editor callback is called, the content of the container is reset and the row's height becomes like if was a single line. Then the container.height() returns a single line height.
Related
I have select element and I want to change the width and height of the element using value.lenght my code look like this :
width: `${(8*newValue.length) + 100}px`,
height: ,
when width is more then 300px then height+50px
It depends on use cases. You can control it using bootstrap grid system like row and col
I think you can do like this.
style={(8*newValue.length) + 100>300?{width: `${(8*newValue.length) + 100}px`,height:`${height + 50}px`}:{width: `${(8*newValue.length) + 100}px`,height:`${height}px`}}
I am trying to create a dynamic layout of divs (100% wide top to bottom) that can be opened and closed and I don't want the content to extend beyond the bottom of the page so when the open/closed state changes I run code like this:
// BUG: maxHeight exists in the DOM but apparently cannot be programatically set
e.style.maxHeight = h;
alert('Element ' + e.id + ' was set to have a maxHeight of ' + h + ' but actually has a maxHeight of ' + e.style.maxHeight + '.');
The alert always shows no change to the max-height regardless of its initial value. This happens to be on divs. All elements have a display style of block. The debugger is showing no exceptions. Happens on Chrome, IE and Firefox. Setting max-height via a style string is no problem.
I am not doing any fancy CSS such as float, position, or border-box stuff either.
Other related answers I have seen here would seem to say this should work.
Like all dimension values in JS (height,width,top,bottom,etc.), the value(h in this case) must have a unit defined for this to work:
e.style.maxHeight = h + "px";
JSFiddle Demo
I have severals span in my html layout, to each i would like to append a canvas-element with jquery. I tried this with a for-each-loop:
$.each($('span'), function(index,element){
element.append('<canvas width="' + element.width + '" height="' + element.heigth + '"></canvas>');
var context = $(element).find('canvas').first().getContext('2d');
context.drawImage($('img').first(), 0,0);
});
But somehow a canvas is only appended to the first span in the layout! Why? Thanks!
JSFIDDLE: http://jsfiddle.net/aXNYx/
Try giving this fiddle a try.
http://jsfiddle.net/p55T2/1/
width and height are functions to be called.
you misspelled height as heigth
first() doesn't appear to be working, you might want to research why.
Chrome doesn't seem to honor the .width() setting that I set on a table. IE10 does.
I get the width of the table after the page is done loading: 425px.
Then I remove the row with the widest content, which makes the table repaint and the table's width shrinks: 185px.
Then, I set the table's width to the original value, 425px. But if I check the width of the table after the set, it is off (by 2px in my experiments): 423px.
Is this a known bug?
Am I using the wrong get/set?
It seems that it has to do with the table border (1px border X2 = 2px), but do I need to do calculations to account for the border when setting the width?
I have a jsfiddle that replicates the problem:
http://jsfiddle.net/slolife/zLyQ2/
var orgWidth = $('table').width();
alert('Original width = ' + orgWidth);
$('table').width(orgWidth);
alert('Width after setting width to ' + orgWidth + ' = ' + $('table').width());
$('#two').remove();
alert('Width after remove = ' + $('table').width());
It's all about the box model.
add
table{
box-sizing: border-box;
}
The link is a very interesting read but basically you force calculation including borders and padding which is not compatible with w3c spec.
updated jsFiddle
var ProdWidth = Math.abs(parseInt(Product.css('width')))
+ Math.abs(parseInt(Product.css('marginLeft')))
+ Math.abs(parseInt(Product.css('marginRight')))
+ Math.abs(parseInt(Product.css('paddingLeft')))
+ Math.abs(parseInt(Product.css('paddingRight')));
This works for coming up with the total width of an element including padding and margins, but its stupid. How should I be doing it?
Check out the outerWidth() property. It gets the width of the element and its padding, border, etc.
Setting its first argument to true will include the margins.
var ProdWidth = Product.outerWidth(true);