jQuery .width() is off on page load

Question

I have had this issue on numerous occasions and need to find a fix because it's causing me all sorts of grief. This problem includes HTML, CSS and JavaScript.

Essentially, I start off with an empty div .enrolledPlayers. I want to add a # amount of .player divs. I grab the width of .enrolledPlayers / 10, I use this determined size as the width and height of the the .player div.

This should give me 10 on a row, and wrap and do another 10 and so on...

Problem i'm having is the .player divs are slightly too large and for that reason wrap too early. I am adding pictures of the problem below. The weird thing is in Chrome when I click 'Toggle device toolbar' twice, it will fix the sizing as demonstrated in the pictures. Is their a reason for this? Or a fix? Thanks.

$(document).ready(function() {
    let divWidth = $('.enrolledPlayers').width() / 10;

    for(var i = 0; i < amount; i++) {
        $('.enrolledPlayers').append('<div class="player" style="width: '+ divWidth +'px; height: '+ divWidth +'px; background: '+ getRandomColor() +';"></div>');
    }
});

This is before I click the 'toggle device toolbar', show's the problem with the wrapping.

This is after I click the 'toggle device toolbar', this show's how it is supposed to look.

It seems all good with the width() method because both screenshot show the same "square" width (82.159px). You are using flexbox right? Have u tried to set a fixed width for your parent div? (ex: 900px) just to test if the same happens. — sandrina-p, Nov 28 '16 at 08:45
Exactly my thought, yes I am using flexbox. I have tried and it works perfectly fine. Problem is I wanted it to be 100% of it's parent div, which I wouldn't expect to have any problems but it seems to. Worst comes to worst, i'll have to deal with a set size. Thanks. — Braeden Dillon, Nov 28 '16 at 08:55
Why would you need to calculate element widths dynamically via script here in the first place, when you are using flexbox? — CBroe, Nov 28 '16 at 09:10
@CBroe I wanted to make them a perfect square, with atleast 10 elements. Would this be easier to do in CSS? — Braeden Dillon, Nov 28 '16 at 09:13
Depends on what you actually needs to those elements for - are they going to hold actual content, or just a background image/color? The padding-bottom hack can be used to get an element to be as high as it is wide. (But if you then want to place actual content into it, you need to use absolute positioning.) — CBroe, Nov 28 '16 at 09:20
When you want to calculate elements widths/heights use: window.onload, rather than document ready: http://stackoverflow.com/questions/4584373/difference-between-window-load-and-document-ready-functions When DOM is ready, it doesn't mean that complete content (including images, for example) is actually loaded, but you need it for calculations.... — sinisake, Nov 28 '16 at 09:28

score 1 · Accepted Answer · answered Nov 28 '16 at 09:19

All sorted, was unnecessary to focus on dynamically calculate the widths, instead I used flex box and used the javascript I provided with min-width and min-height instead of width and height. This method is responsive aswell, thank you.

.enrolledPlayers > .player {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex: 1;
}

jQuery .width() is off on page load

1 Answers1