Jquery calculate correct container size

Question

In regards to an earlier question of mine here and the answer here I posted this new question since this is more Javascript related.

Checkout my fiddle here

I want to create a dropdown menu with CSS flex. I'm struggeling to get the container div to be as wide as the columns. With below code the calculation of the last item in the list to completely left is wrong. It looks like it's calculating the distance to the previous column.

So what I have is

<div class="cats">
    <ul>
        <li class="item sub">
            <a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
            <div class="subnav">
                <ul class="flex-wrap">
                    <li class="subitem title">
                        <a title="Borstvoeding" href="#" class="title">something</a>
                    </li>
                    <li class="subitem">
                        <a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a>
                    </li>
                    <li class="subitem">
                        <a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
                    <li class="subitem title">
                        <a title="Borstvoeding" href="#" class="title">something</a>
                    </li>
                <ul>
            </div>
        </li>
    </ul>
</div>

.cats .subnav {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  display: none;
  margin: 0;
  padding: 30px;
  position: absolute;
  text-align: left;
  z-index: 99;
}
.cats .item.sub:hover .subnav {
  display: block;
}




.subnav .wrap{
            display:inline-flex;
            flex-flow : column wrap;
            align-content : flex-start;
            height : 350px;
            background : blue;
        }
.subitem{
    width : 150px;
    height:100px;
    background : red;
    margin : 20px;
}

$(document).ready(function() {
    $('.flex-wrap').each(function(index) {
        var lastChild = $(this).children().last();
        var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
        $(this).width(newWidth);
    });
});

When using it in this way it looks like it's calculating the distance to the previous column. So something like 200px instead of 600px. Can this be caused by positioning or am I doing something wrong I'am completely overlooking now?

Louys Patrice Bessette · Accepted Answer · 2016-07-05T17:03:39.020

0

EDITED

The width of all li elements can't be obtained, since they are at display:none;.

I've made something with your Fiddle...
You will be able to continue styling from this. ;)

edited Jul 05 '16 at 17:03

answered Jul 05 '16 at 14:50

Louys Patrice Bessette

33,375
6
36
64

Tried that but that gives the same result! – Meules Jul 05 '16 at 14:56
I just saw that your `.subitem` is defined to `width:150px` + `margin:20px`... Which alway will return an outerWidth of 190px. Try to remove the width definition if you want larger `li`s. – Louys Patrice Bessette Jul 05 '16 at 15:06
Ok, I may be completely lost here. I saw your Fiddle. Do you want to adjust the width of `flex-wrap` based on its last `subitem` ? **OR** adjust it to the same width of another `flex-wrap` (which has more or less `li` items)? – Louys Patrice Bessette Jul 05 '16 at 15:25
I updated your [Fiddle](http://jsfiddle.net/Bes7weB/w2dy0h27/)... Is that what you want ? – Louys Patrice Bessette Jul 05 '16 at 15:42
Well that fiddle is actually not mine :) My fiddle is listed at thetop of this post. The set up is a bit different and I think that's why it doesn't work – Meules Jul 05 '16 at 16:07
Jeeezss added the wrong fiddle. Correct one is now listed – Meules Jul 05 '16 at 16:13
I just updated and cleaned my [Fiddle](http://jsfiddle.net/Bes7weB/L1k2v700/)... ;) – Louys Patrice Bessette Jul 05 '16 at 17:46
Excellent!! So the problem is that `display:none;` avoids the script to calculate the correct size?! You've made my day! – Meules Jul 05 '16 at 17:53
Yes... This was the problem. ;) If you had console.logged your calculation variables... You'd seen it always returned zero... Messing all calculations. ;) – Louys Patrice Bessette Jul 05 '16 at 17:55

Jquery calculate correct container size

1 Answers1