CODEWITHSUNDEEP
javascripthtmlcssiframetwitter
Becky
Becky

Reputation: 2275

Changing the width of an iframe

I am having such a difficult trying to change the width of a twitter timeline iframe. I have looked through the developer tools inspect an element and changed the width on multiple elements, but nothing seems to be working.

I have tried changing:

.SandboxRoot, env-wide {
    width: 30%;
}
.timeline-Widget {
    width: 30%;
}
.twitter-timeline, .twitter-timeline-rendered {

    width: 30%;
}

#twitter-widget-0 {

    width: 30%;
}

Here is a fiddle: https://jsfiddle.net/9pnxL6fb/. If you need to see it live to inspect, just let me know.

Why can I not change the width based on the elements I am using?

Upvotes: 0

Views: 560

Answers (6)

Javier Gonzalez
Javier Gonzalez

Reputation: 311

<div id="blue">
<div class="twitter-iframe">
<a class="twitter-timeline"
</div>
</div>

CSS Code

#blue  {
    width: 100%;
}

.twitter-iframe {
    width: 30%;
}

Upvotes: 1

BrightShadow
BrightShadow

Reputation: 463

It is rather a hacking than a web mastering :-)

Normally there is no possibility to manipulate iframe content from a parent document. This is protected due to security reasons, to not inject any suspicious JavaScript code etc. I was looking at you code generating the post. The code requests a twitter API to get the complete post generation JavaScript file and puts it into your DOM.

The only way would be the Twitter post API, but it is limited... (Twitter Widget Javascript)

Upvotes: 0

omarjmh
omarjmh

Reputation: 13896

One of the ways you can get this to work is by using jQuery with some changes to the CSS as follows: The other answers are semi correct, you can override with code below, just changing the css might not work in a different environment.

$(window).on('load', function() {
    $('iframe[id^=twitter-widget-]').each(function () {
        var head = $(this).contents().find('head');
        if (head.length) {
            head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
    }
        $('#twitter-widget-0').append($('<div class=timeline>'));
    })
});

CSS:

iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}

Working fiddle:

https://jsfiddle.net/48dy23ep/1/

Upvotes: 0

Il No
Il No

Reputation: 126

you need to target the iframe inside the #blue div

#blue iframe {width:30%!important;}

Upvotes: 2

Husain Ahmmed
Husain Ahmmed

Reputation: 351

Try to use !important . I hope it will help.

#blue {
   width: 30% !important;
 }

Upvotes: 1

dogwoodtree-dot-net
dogwoodtree-dot-net

Reputation: 274

If the dimensions are hardcoded by default as served by Twitter, you won't be able to override it with just CSS. Instead, override by changing the attributes supplied in your js. Twitter widget documentation

Upvotes: 0

Related Questions