jQuery having problem read size of SVG icons ()?

Question

See code snippet. Div with H3 to left and absolute div to the right (contaning /svg-icons). This works most of the times, see picture:

rest of the times it looks like this:

If it look like in the second picture, the second I resize the browser it correct itself, but its not correct when loading page.

Does anybody have a clue what to do? I have tried add hard-coded-space (HTML) beside the icons without better results (if there should have been some problem of reading the empty space since there is only icons and no text). It feels like the width is read incorrect at pageload. If I read the consol for the width jQuery is getting (in the times its read incorrecly) its not the width of the menu and I cant derive that width somewhere els.

Site must be compatible with IE8, thats why usage of jQuery for this.

Thanks.

Update

Found a similar question: JQuery .width() returns inconsistent values

If set a setTimeout on 200 on the whole script it corrects itself quick after pageload, so if seems to have something to do with the loading of the page. The CSS and Icons < script src > is placed in top in < head >, before jQuery.

If deleting the -icons and just put plain text in the < li > insteed, the script works fine. So its probably somthing with the loadning of .

Conclusion

Tried tons of different setting in CSS and HTML-markup, without results. Conclusion is some kind of read-problem with -elements in jQuery. When it reads wrong value it seem to get the width without padding (even with outerWidth(true)). Easiest (if icons is kinda same size) is probably just to set backup-value of fixed min-width to the < li >, so if only in < li > then jQuery reads the min-width (+ padding) if not getting the actual width of elements (with padding) at pageload.

function h3_ellipsis(){
    var icon_w = $(".icons").outerWidth(true);
    var menu_w = $(".menu").outerWidth(true);
    
    $(".headline").css("padding-right",icon_w+15);
}

$(window).on("load" ,function(){h3_ellipsis();});
$(window).on('resize', function(){h3_ellipsis();});

div{height: 50px; width: 400px; border: 1px solid red; position: relative;}

h3{line-height: 50px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; margin: 0;}

ul{position: absolute; top: 0; right: 0; list-style: none; padding: 0; margin: 0;}

li{line-height: 50px; float: left; margin: 0 0 0 5px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>




<div class="menu">
    <h3 class="headline">HeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadline</h3>
    
    <ul class="icons">
      <li><a href="#" class=""><i class="fa fa-water"></i></a></li>
      <li><a href="#" class=""><i class="fa fa-water"></i></a></li>
    </ul>
  
</div>

In fact you're using FA **icon fonts** not svg icons. Therefore, jquery can't calculate the correct width until all icon fonts (e.g fa-regular-400) are fully loaded. Besides, I'm afraid fontAwesome 6 doesn'r provide an `.eot` font required for ancient ie8. So you might need to downgrade to FA5.9 — herrstrietzel, Aug 27 '23 at 13:38
Thanks for input. Aha. But I dont understand why jQuery cant calc it when the font-src is loaded before jQuery. I am having Frontawsome 5.15.4. — Vode, Aug 27 '23 at 18:44
Web browsers usually load font files after DOM ready event to avoid unnecessary requests. See also ["When do web-fonts load and can you pre-load them?"](https://stackoverflow.com/questions/13249773/when-do-web-fonts-load-and-can-you-pre-load-them). No idea how ie8 handles this. As a brute force method you could wrap your function in a Jquery ajax call fetching the font file first. However this will force ugly reflows. Giving your icons a generic width like `1em` and adjust the padding accordingly is probably easier. — herrstrietzel, Aug 27 '23 at 18:56
While the first answer you got is the real solution, see if your code would work if you instead use this: http://learn.jquery.com/using-jquery-core/document-ready/. The window is not the actual document, so nothing happens with $(window).on("load" ,function(){h3_ellipsis();}); — AlexSavAlexandrov, Sep 02 '23 at 10:21

score 1 · Answer 1 · answered Aug 26 '23 at 22:22

.menu {
  display: flex; 
  border: 1px solid red;
  justify-content: space-between; 
  padding: 0px 15px;
}

h3 {
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  box-sizing: border-box;
}

.icons {
  list-style: none;
  display: flex;
  gap: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="menu">
    <h3 class="headline">HeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadline</h3>
    
    <ul class="icons">
      <li><a href="#" class=""><i class="fa fa-water"></i></a></li>
      <li><a href="#" class=""><i class="fa fa-water"></i></a></li>
    </ul>
  
</div>

Use like this kind of css and remove js, because this is simple modified design which please don't need to use js to look like this kind of css setting.

I hope your problem is solved. Thank you.

Hi Yash, Thanks for input. Sadly this must have support even for IE8 since alot of users having old none-updated computers. Thanks anyway. — Vode, Aug 26 '23 at 22:33

jQuery having problem read size of SVG icons ()?

1 Answers1

Linked