Embedded twitter timeline overflow issue in browser on iPhone

Question

I am working on my personal website and want to show my tweets collection from my twitter profile using the embedded code that twitter provides. The embedded code works just fine on pc (see second screenshot) but on iPhone it overflows the parent container. I have even tried to to put it in a div and give a fixed width size but it didn't work.

I thought the problem is in the safari browser in the iPhone so I tested it on the chrome browser (in iPhone) but the issue presists. So I think this is an iOS/iPhone issue.

I have tried to look for answers in the twitter community dev and I found a thread ( see here ) mentioning the same issue but no solution was provided.

(See below pc screen shot which works just fine as expected)

(See below iPhone screen shot with issue)

See below code

<div class="container-fluid row m-0 pr-0 pl-0">
    <div class="col-md-8 pl-0 pr-0">
      <app-nav-section-display></app-nav-section-display>
    </div>
    <div class="col-md-4 mt-2 pr-0">
        <a class="twitter-timeline " data-partner="tweetdeck" href="https://twitter.com/paramvirsingh_k/timelines/1056538294912212993?ref_src=twsrc%5Etfw">Curated Tweets - Curated tweets by paramvirsingh_k</a>
    </div>
  </div>

Note: <app-nav-section-display></app-nav-section-display> is the component selector (Angular 6) which displays here the text that is with light green background.

Answer 1

I have solved this issue and managed to get the desired behaviour. I am answering so that it can help the community in future.

You have to use attributes data-height and data-width that twitter API provides. Now because I wanted it to be responsive I did not want to use fixed size so I tried giving value of data-width as 100% expecting that it will auto adjust the parent container width but it didn't.

So I had to manipulate data-width attribute to adjust to the parent container's size somehow. I did it by getting the nativeElement corresponding to this twitter element and dynamically setting the attribute data-width attribute which you could fetch from width of the container using the same way but this time for container div's nativeElement. This is done in typescript in Angular 6. See below type script of the component containing the twitter tag:-

import {AfterViewInit, Component, ViewChild, ElementRef, HostListener} from '@angular/core';

@Component({
  selector: 'app-content-container',
  templateUrl: './content-container.component.html',
  styleUrls: ['./content-container.component.css']
})
export class ContentContainerComponent implements AfterViewInit {

  @ViewChild('twitterBarContainingDiv')
  twitterBarContainingDiv: ElementRef;
  @ViewChild('twitterBar')
  twitterBar: ElementRef;
  constructor() { }

  ngAfterViewInit() {
    this.adjustTwitterBarWidth();
  }
  @HostListener('window: resize')
  public onResize(): void {
    this.adjustTwitterBarWidth();
  }
  public adjustTwitterBarWidth(): void {
    // console.log('twitterBarContainingDiv width:' + this.twitterBar.nativeElement.getAttribute('data-width'));
    this.twitterBar.nativeElement.setAttribute('data-width', this.twitterBarContainingDiv.nativeElement.clientWidth);
    console.log('twitterBar width:' + this.twitterBar.nativeElement.getAttribute('data-width'));
  }
}

See below the html code for the corresponding component:-

<div class="pr-2 pl-2">
  <app-name-header></app-name-header>
  <app-primary-nav></app-primary-nav>

  <div class="container-fluid row m-0 pr-0 pl-0">
    <div class="col-md-9 pl-0 pr-0">
      <app-nav-section-display></app-nav-section-display>
    </div>
    <div #twitterBarContainingDiv class="col-md-3 mt-2 pr-0 pl-0" >
      <a #twitterBar class="twitter-timeline"  data-height="800"  data-chrome="" data-partner="tweetdeck" href="https://twitter.com/paramvirsingh_k/timelines/1056538294912212993?ref_src=twsrc%5Etfw">Curated Tweets - Curated tweets by paramvirsingh_k</a>
    </div>
  </div>
</div>