1

I have been using twitter widget in my library management system. I want to make the twitter widget's height dynamic since it's height is fixed and can be set in its configuration before the widget is created.

How will I do that through css?

This is the widget code, I got from twitter:

<a class="twitter-timeline"  href="https://twitter.com/vhakhikhang" data-widget-id="520463403060432896">Tweets by @vhakhikhang</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

1 Answers1

0

This isn't done through CSS but you can specify a height directly in the widget HTML:

<a height="450" class="twitter-timeline" href="https://twitter.com/vhakhikhang" data-widget-id="520463403060432896">Tweets by @vhakhikhang</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

This will then override the height specified during the widget setup. There is a minimum height of 200px. See the documentation for more info.

This is not truly dynamic however. If you are not sure of the height of the parent element you would need to use JavaScript to measure this and then output the anchor tag as above but with the retrieved height value.

Community
  • 1
  • 1
͢bts
  • 695
  • 8
  • 32