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
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 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.
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
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);
Browsers have default padding for HTML page.
For example my FF sets 8px margin of body element by default.
I can calculate default width padding for HTML page using
jQuery(window).width() - jQuery('body').innerWidth();
due to body element spans all available browser viewport width.
Also I have other browser which sets different values for width and height padding.
Could you propose way to calculate height padding?
Previous code will not work due to body inner height will return actual page content height and will not span all available height.
Do you really need to calculate the padding? The padding is defined in an element's css setting for padding and margin.
You can get these easily in jQuery:
// Select the body element.
var bodyElement = $('body');
// Get the paddings
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right');
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom');
// Get the margins
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right');
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom');
You can remove the default user-agent (i.e. the browser's) settings by defining in your css file:
body {
margin: 0;
padding: 0;
}
Bypass the problem and use a CSS reset.
With a good reset, you will not have to calculate these as they will be set by yourself.