How to write custom css for twitter share widget button

397
July 17, 2017, at 7:33 PM

Hi i have used social sharing buttons to share my post in facebook, twitter, Linkedin and google all are working fine except twitter.Twitter is not displaying in mozilla firefox.It is showing as overflow:hidden how to remove this and add as overflow :visible for widget.

<div class="twitteraccount" style="width: 100px;overflow: visible !important;"><a href="https://twitter.com/share" class="twitter-share-button" data-show-count="true">Tweet</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></div>

Here it is hiding because of

<div id="widget">
<div class="btn-o" data-scribe="component:button" style="width: 0px;"><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.staging.website.com%2Fcareer&amp;ref_src=twsrc%5Etfw&amp;text=career&amp;tw_p=tweetbutton&amp;url=http%3A%2F%2Fwww.staging.website.com%2Fcareer" class="btn" id="b"><i></i><span class="label" id="l">Tweet</span></a></div>

Here the widget css is displaying as "overflow:hidden" how to write css for this to display twitter button.

As i have written

#widget{
  overflow:visible !important;
}
.btn-o{
 width:60px !important;
}

but also it is not accepting.

Answer 1

As I mentioned in the comments, the Twitter script creates an iframe with the button inside it. You can't influence the content of this iframe from within your own css, so it's no surprise that this didn't work.

You also commented that the button is inside a container that is initially hidden using display: none. I've done a couple of tests and managed to confirm that this is indeed causing the button to remain hidden in Firefox.

I've tried a couple of things and found a solution that 'hides' the container using width: 0; height: 0; overflow: hidden;. Then when you want to show the button you change the width and height of the container to auto.

$('#showButton').on('click', function() { 
  var $toggle = $('#toggleMe'); 
  if ($toggle.width()==0) { 
    $toggle.css({ 
      'width': 'auto', 
      'height': 'auto' 
    }); 
  } 
  else { 
    $toggle.css({ 
      'width': 0, 
      'height': 0 
    }); 
  } 
});
#toggleMe { 
  width: 0; 
  height: 0; 
  overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="toggleMe"> 
  <div class="twitteraccount" style="width: 100px;overflow: visible !important;"> 
    <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="true">Tweet</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> 
  </div> 
</div> 
<button id="showButton">toggle Twitter button</button>

Rent Charter Buses Company
READ ALSO
After compiling in a webpack with deferred loading (System.import) styles from css files are not applied. Why do not styles apply?

After compiling in a webpack with deferred loading (System.import) styles from css files are not applied. Why do not styles apply?

After compiling in a webpack with deferred loading (Systemimport) styles from css files are not applied

276
How can I make css design responsive? [on hold]

How can I make css design responsive? [on hold]

I have an HTML page that is displayed correctly for one screen resolution, but not for other resolutionsHow can I make the CSS of this page responsive for all resolutions?

217
Vertical list order with unknown items number

Vertical list order with unknown items number

I am having a list of categories eg

287
Remove sticky header after scrolling to some point

Remove sticky header after scrolling to some point

I want to remove the sticky css from the header after it reaches 300px from top but with css I am unable to do so and I have 0 jquery knowledge

285