Member Avatar for Sterotech

Hey everyone.
I've put a twitter feed widget on my site, but the problem with it is that it seldom display with the right width. About 90% of the times that the page loads. It only displays at about 40-50% of it's actual width. I've tried changing the width attribute, as well as the width css property. I tried using percentages(100%) or even pixels to get it right but with no success. I even tried to create a new widget on the twitter site but there's no width property which I can edit. I don't know what else could cause this problem because sometimes it does display perfectly.
Does anyone please have some advice.
Thanks in advance.

  • 3 Contributors
  • 4 Replies
  • 116 Views
  • 38 Minutes Discussion Span
  • Latest Post Latest Post by Sterotech

Dani AI

Generated

Short diagnosis tied to the thread: as reported and as pointed toward the docs, the embedded timeline is injected and sized by Twitter’s widgets.js at initialization. When that initialization runs before the page layout or the timeline’s container has its final width, the widget can end up visually too narrow — and because the script runs asynchronously, the problem appears intermittent.

Practical fixes (apply one or more):

  • Give the widget an explicit pixel width via the data-width attribute on the anchor so widgets.js uses that fixed value.
  • Ensure the widget is initialized only after the container has its final width. A common approach is to set data-width programmatically based on the wrapper’s clientWidth, then call the widgets loader once layout is ready. Example pattern:
function initTwitter() {
  var anchor = document.querySelector('.twitter-timeline');
  var wrap = document.querySelector('.twitter-wrapper'); // your wrapper selector
  if (!anchor || !wrap) return;
  anchor.setAttribute('data-width', Math.max(200, wrap.clientWidth));
  if (window.twttr && twttr.widgets && typeof twttr.widgets.load === 'function') {
    twttr.widgets.load();
  }
}
window.addEventListener('load', initTwitter);
window.addEventListener('resize', function() {
  clearTimeout(window._twResize);
  window._twResize = setTimeout(initTwitter, 200);
});

Quick troubleshooting checklist: verify the parent has a computed width at load (use DevTools). If the timeline sits inside hidden tabs or elements with display:none, initialize it when it becomes visible. For predictable results prefer a fixed pixel data-width; for responsive layouts compute and set that pixel width after layout, then call twttr.widgets.load(). If more diagnosis is needed (page URL and the wrapper CSS rule set), those specifics make the root cause obvious.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

Provide the URL or relevant code so we can look.

Member Avatar for Sterotech

This is the code, it's just placed inside a div element. At the moment there's no width attribute, because no matter how much I try customize the width, it keeps on doing that.

<a class="twitter-timeline"  href=""  data-widget-id="...">Tweets</a>
<script>
    !function(d,s,id) {
        var js,fjs = d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)) {
            js=d.createElement(s);
            js.id=id;
            js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document,"script","twitter-wjs");
</script>
Member Avatar for Sterotech

Thanks, I'll check it out. Hopefully I'll learn something from it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.