What Is Difference Between Width, Innerwidth and Outerwidth, Height, Innerheight and Outerheight in Jquery

What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery

Did you see these examples? Looks similar to your question.

Working with widths and heights

jQuery - Dimensions

jQuery: height, width, inner and outer

width , innerwidth , outwerwidth, all returns higher value than actual

For my opinion, this is not the best way to creating dropdown items.

However, here is some fixing tips for you.

At first, don't give child elements width or height values with js.

CSS

custom.css:185

.block.filter .block-content.filter-content .filter-options-item {
    margin: 0 15px !important;
    flex: 1;
    max-width: 15% !important;
    position: relative; /* add line */
}

custom.css:210

.block.filter .block-content.filter-content .filter-options-item .filter-options-content, .catalog-product-view .product-options-wrapper .swatch-attribute .swatch-attribute-options {
    position: absolute;
    border: 1px solid #e8d4c1;
    padding: 10px;
    background: #ffffff;
    width: 100%; /* add line */
}

theme.css:6544

.page-layout-1column .block.filter .block-content.filter-content .block-filter-content {
    padding: 20px;
    max-height: calc(100% - 50px);
    overflow-y: auto; /* remove line */
}

Result:

I hope this solves your problem.

CSS - box model width

Please check width(); specifications. It returns the width without margin, padding and border.

If you want to include padding and border you have to use .outerWidth() and if you want to include margin too you have to use .outerWidth(true).

Hope this helps

jquery innerWidth / outerWidth and javascript clientWidth / offsetWidth gives wrong values on chrome

<a> is an inline element. As such it doesn't use the box model. Think of it as "slippery". I'm not sure why it would work with a different font weight.

You probably want to measure the innerWidth of the first block-level parent of the <a>.

Something like:

$('<a>').closest('div').innerWidth();

Alternately, you could make it a block using css, then your existing js should work:

a { display: inline-block; }

jQuery width, outerWidth(), innerWidth() returning incorrect data

The various width commands don't work for hidden elements (display: none).

If you use css to set a width, jquery will return that. Otherwise you'll get no, or meaningless, results.

The classic solution is to position the element off the screen, check the width, then hide it and put it back. (You can probably find a jquery plugin that will do that in one command.)

Sometimes there are ways of restructuring the html and/or css so you avoid this.

Sometimes you can fix the size right after showing the element.

You can also try setting the visibility to hidden, so the element gets a size, but is invisible. Depending on the your design this might work.

.css(‘width’) and .css(‘height’) versus .width() and .height()

var elH = someElement.height();           // 200

.height() returns a Number, while

var elH = someElement.css("height");      // "200px"

above jQuery accesses the element's style property like JS would in:

var height = someDOMelement.style.height; // "200px"

returning a String value in px.

---

Related Topics