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

Question

On the page: http://local.finerock.com/engagement-rings/halo-engagement-rings.html

I am using flexbox to display product filters, and used a small jquery to set child element width equal to its sibling, the code is like:

$(window).load(function(){
            if($(window).width() >= 900){
                $('.filter-options-content').width($('.filter-options-title').innerWidth());
            }
        });

still its taking longer width than actual, see screenshot. enter image description here

I have used all options, width, outerWidth & innerWidth, still the results are same.

Answer 1

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.