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.

score 0 · Accepted Answer · answered Jul 21 '21 at 08:53

0

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.

answered Jul 21 '21 at 08:53

Caner

92
3

You are welcome. I hope you don't forget to give an upvote :) – Caner Jul 21 '21 at 11:14
similar kind of requirement is there, with different html structure, I tried applying the same logic here, by giving position relative to parent and width 100% to dropdown element, but its taking whole long width, any help would be appreciated http://local.finerock.com/1-2-carat-round-baguette-shape-diamond-cushion-shaped-halo-ring-in-10k-gold-rg-12728.html – NileshPlus91 Jul 21 '21 at 11:17
Well this is not the best way to creating dropdowns as I said before. Anyway. I just checked your project. Seems like that can cause bugs in the future, especially in responsive design. I have prepared a simple example for you that you can use in a much easier way. Please check: https://jsfiddle.net/caneroncel/7y9n4zgh/25/ – Caner Jul 21 '21 at 14:31
Thank you so much for your help, it really made my day. thanks a ton. – NileshPlus91 Jul 23 '21 at 14:18
You are welcome. So, please give an upvote to me. – Caner Jul 26 '21 at 06:06
I tried but Stackoverflow doesn't allow me to upvote because of less reputation count, thats why I accepted the answer and bookmarked this, as soon as I get the required figures I will surely upvote it – NileshPlus91 Jul 26 '21 at 12:19

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

1 Answers1