How to write custom css for twitter share widget button
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&ref_src=twsrc%5Etfw&text=career&tw_p=tweetbutton&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.
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>
-
05:30
-
04:00
-
00:00
-
10:30
-
9:10
-
07:40
Firebase Cloud Functions: PubSub, "res.on is not a function"
-
04:00
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
-
9:20
-
7:40
- search for elements in a list 110615 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 105868 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98317 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 95795 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 92014 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 61490 visits
- Adding methods to es6 child class 22092 visits
