JQuery .width() returns inconsistent values

Question

I try to get the width of a specific element with JQuery. Sometimes, .width() returns the right value, sometimes one that is too little (this happens random on a few page loads)

So most of the time I get the right value when I load my page, but sometimes something gets messed up.

I thought, that my code firing too early (when css is not loaded or something similar) might cause this, but even after I started to use $(window).bind("load", function(){ ... code goes here ...}), the situation hasn't really changed.

My code:

$(document).ready(function () {

    $(".section-content .feature-details").each(function (index, object) {
        var featureDetails = $(object);
        featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
        console.log(featureDetails.find(".details-navigation").width());
    });

EDIT: (If I do a setTimeout, everything works fine, so this problem has to be related to some form of async loading, which isn't "fast enough" - right?) The exact code I use:

JavaScript:

$(document).ready(function () {

    // setTimeout(function () {
        $(".section-content .feature-details").each(function (index, object) {
            var featureDetails = $(object);
            featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
            console.log(featureDetails.find(".details-navigation").width());
        });

    // }, 100);

});

HTML:

<div class="feature columns columns-justify-fullwidth columns-vertical-align-center">
                    <div class="feature-details">
                        <div class="details-navigation">
                            <ul>
                                <li><a href="#" class="color-grey-light"><div>Web</div></a></li>
                                <li class="active"><a href="#" class="color-grey-light"><div>Desktop</div></a></li>
                                <li><a href="#" class="color-grey-light"><div>Mobile</div></a></li>
                                <li><a href="#" class="color-grey-light"><div>Datenbanken</div></a></li>
                            </ul>
                        </div>
                        <div class="details-content">
                            <p>
                                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
                                <br/>
                                <br/> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                            </p>
                        </div>
                    </div>
                    <div class="showcase"></div>
                </div>

CSS:

.columns {
    display: flex;
}
.columns-justify-fullwidth {
    justify-content: space-between;
}

.columns-vertical-align-center {
    align-items: center;
}

.feature-details .details-navigation {
    display: inline-block;
}

.feature-details .details-navigation ul {
    display: inline-block;
    height: 50px;
    border-bottom: 2px solid #aaa;
}

.feature-details .details-navigation li {
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.feature-details .details-navigation li:not(:last-child) {
    margin-right: 18px;
}

.feature-details .details-navigation ul a {
    display: table;
    height: 100%;
    font-size: 16px;
}

.feature-details .details-navigation ul a > div {
    display: table-cell;
    padding-bottom: 12px;
    vertical-align: bottom;
}

/*
.feature-details .details-navigation ul li:hover {
    border-bottom: 2px solid #222;
}
*/

.feature-details .details-navigation ul li:hover a {
    color: #222;
}

.feature-details .details-navigation li.active {
    border-bottom: 2px solid #222;
}

.feature-details .details-content {
    margin-top: 16px;
}

.feature .showcase {
    width: 450px;
    height: 450px;
    background-color: #f7f7f7;
}

You can read more here: [Diffrence between document ready and window load](https://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load) — psd, Aug 22 '18 at 16:19
This doesn't produce any different results for me. Is there more going on in the page? Maybe your content is being affected by other things. — William Prevett, Aug 22 '18 at 16:33
@WilliamPrevett I updated my code: now it should be the exact same as in my project — AGuyAskingQuestions, Aug 22 '18 at 16:43
There is no section-content in that html. I went ahead and applied that class to the body. I am getting consistent width in the console still. — William Prevett, Aug 22 '18 at 16:54
Did you find a solution to this? Having same problem. https://stackoverflow.com/questions/76984960/jquery-having-problem-read-size-of-svg-icons-i — Vode, Aug 27 '23 at 09:33

Akrion · Answer 1 · 2018-08-22T16:48:58.453

0

Try using jQuery $( document ).ready and see if the results are more consistent. I am not able to get any inconsistent widths.

$(document).ready(function() {
  $(".feature-details").each(function(index, object) {
    var featureDetails = $(object);
    featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
    console.log(featureDetails.find(".details-navigation").width());
  })
})

edited Aug 22 '18 at 16:48

answered Aug 22 '18 at 15:58

Akrion

18,117
1
34
54

Okey, I just updated my code to the exact one I have my problem with, do you get the problem with this one? – AGuyAskingQuestions Aug 22 '18 at 16:44
With the code above I always get consistent widths. Are you saying you do not? – Akrion Aug 22 '18 at 16:45
Hmm, I just tried to check it myself by setting everything up in a JSFiddle, but there I also don't have any problems getting consistent values. strange... – AGuyAskingQuestions Aug 22 '18 at 16:54

JQuery .width() returns inconsistent values

1 Answers1

Linked