Can't define width on new widgets

walthamforestfc · 2012-09-22T11:31:08.000Z

I have implemented a new style widget on my site (this kind: https://twitter.com/settings/widgets/new)

I can edit the height of the widget no problem. However, I cannot edit the width. I have tried using ‘px’ settings, ‘100%’ and ‘auto’, but nothing changes.

Is it possible to make the widget 100% in width?

froginthevalley · 2012-09-25T23:38:00.000Z

No, it is not possible. The minimum width of a timeline is 220px and the maximum is 520px. The minimum height is 350px. More at the [node:10248] documentation page .

walthamforestfc · 2012-10-05T16:23:04.000Z

Well that’s a bit rubbish. Why can’t they be more than 520px?

sparkysburgers · 2012-11-28T00:37:18.000Z

It would be very helpful to be able to customize these values. For example, I wold only like to my latest tweet for space issues but so i cant fit the widget on my page anywhere

benward · 2012-11-28T10:11:20.000Z

The width of the timeline widgets is usually automatically determined based on where you put it in your page—which is why we don’t have a field to set it explicitly, we just look at the width of the container and use that.

If you do want to set an explicit width, just add width=“400” to the part of the embed code (no units, as per other occurrences of width in HTML.)

Oh, and the maximum width is presently set to 520px as that’s the widest a Tweet will ever appear on Twitter. In terms of the text size, legible line length and general proportions, the widget doesn’t stretch out any further. Plausibly we could add some sort of zoom scaling in the future to support larger displays or bigger sizes, and I’m interested to hear use cases or examples where that would be useful. For now though, that’s the reasoning for the present defaults.

mickyhulse · 2012-12-18T19:37:41.000Z

Use case: Responsive websites.

The new widget is frustrating. We have column widths that change depending on the device and/or browser window size. Sometimes a column might start out at 300px wide, jump to 640 and then go back down to 300 again. The widget appears to magically pick the width based on when it first loads and then never changes.

I really like the new widget, but I can’t use it because it’s just not adaptable to a responsive site where the containers change depending on the context.

To be honest, I think it’s kinda funny that you’re forcing some sort of design/typography restrictions on how folks use your new widget. I think most people just want a widget that will fill a gap. I personally don’t care if the line length is a bit too long or short, I just want it to fill a position and have it adapt to my layout (Disqus comments widget comes to mind… they do a great job of not making any assumptions).

I don’t mean to sound like a jerk… Just I really like your new widget!!! It’s so much nicer looking that the previous one (which, btw, let us change the width to 100%).

Thanks for listening.

clarkjam · 2012-12-21T00:37:00.000Z

Using the following format I was able to set the height to less than 350. Imagine it will work for width too. Hopefully they leave it like this as it’s fairly silly to lock in the min heigh at 350 imho.

Tweets by @twitterapi

southdesignde · 2012-12-31T14:57:41.000Z

@mickyhulse is absolutely right. Limiting the width doesn’t seem necessary to me. If you manually change the iFrame width to 100% it still looks very good. Please allow at least the manual override to 100%.

RioMetroAlerts · 2013-01-15T17:43:17.000Z

This is a very poorly thought out one size fits all approach. Was this tested on smartphone browsers of any platform? Width and Height behave very differently depending on browser it appears in. IFrame is not an option for everyone especially with still no or poor HTML5 support by some mainstream browsers (IE8, IE9). Different applications have different needs.

AmateurDIY · 2013-01-16T21:57:07.000Z

Found out how to do it here:
http://www.sitekickr.com/coda/html/specify-twitter-timeline-width.html

mickyhulse · 2013-01-19T00:43:53.000Z

@AmateurDIY and @clarkjam: From my tests, width=“100%” does not work.

It is nice to know you can add width=“300” to get a pixel width, but that’s not so great if your column width changes depending on viewport size and/or device.

I suppose you could use JS to override the size based on events (like a media query change) but it would be nice if this type of functionality was built into the widget itself.

ifeltsweet · 2013-02-06T18:56:38.000Z

I also don’t want to sound like a jerk, but limiting width to 520px is outright weird. I don’t think twitter should be dictating the “proper” column width for web design.

HiACT · 2013-02-07T03:58:25.000Z

Yeah, sorry, I am not happy either about this.
First of all to change the widget at all just caused additional unnecessary work and secondly I don’t see the reason for the restrictions. It was great to be able to simply edit the appearance in html.
Now it’s unusable for me and I had to take the widget off the site.

HonkyTonkStan · 2013-02-07T16:18:00.000Z

I agree @ifeltsweet and @HiACT. I am working on a site with a twitter feed that does not look as attractive as possible. I need closer to 760px width to fill in the space. I also tried setting it 100% in my developer tools in ie and it looked perfect there, but when I made the change to the actual code, it would not work. I guess I could fill in the space with an image or something. Any suggestions? Current site is http://www.coronacigar.com/. Scroll toward the bottom.

bmtrnavsky · 2013-02-26T23:02:58.000Z

I have a blog with 200 px wide sidebars… This is a fairly standard size and now this widget looks terrible. Why did you establish 220 Px wide as a minimum? I KNOW I am not the only person with this issue.

kevinwoodberry · 2013-03-14T11:27:02.000Z

Hello.
You can alter the width beyond 520px using CSS.
Simply add the following css above the <a> tag.

Change 760px to what ever width you require.

If you have more than one widget on the page you may need to use:
#twitter-widget-1{width:760px;}
or
#twitter-widget-2{width:760px;}
etc

Hope this helps.

januszkrawiec · 2013-03-18T17:29:36.000Z

Is this possible to limit the # of tweets?

barryman9000 · 2013-03-28T19:25:49.000Z

@kevinwoodberry - well done!

wnetworknet · 2013-04-04T07:09:17.000Z

wow, thank you SOOO much, you saved my day

LlanishenHS · 2013-04-06T14:27:03.000Z

thanks kevin. unfortunately this fix won’t work with a link made on a moodle label. any ideas how it could work on moodle? cheers