Embedded Timeline - Loss of Padding with Transparent Background

[ZeikJT]

https://dev.twitter.com/docs/embedded-timelines

When the embedded timeline is used normally there is left and right padding on the tweet list items that keeps them from being flush to the scrollbar.

However, when you add data-chrome="transparent" to get a transparent background not only does the left padding go away, which is great, but so does the right padding, which is not great. This makes for really ugly tweets that are flush up against the scrollbar.

Is there any fix for this? The normal and dark themes don’t match with the website’s look but there’s no option to customize the background color. Only having it dark, light, or transparent (which would be ideal if it’s didn’t have the padding issue). I know I could use the restful apis and build a custom solution but the whole reason for this embed to exist is to make that kind of thing unnecessary (plus this kind of embed has very different restrictions and rate limits that I quite prefer).

[ScottFuse]

I just ran into the same problem. I’m surprised that this is the only post about it. Somebody please fix this, or give us more control over the widget. It’s incredibly frustrating.

[charlielabs]

Same problem here, anyway to fix this ?

[ZeikJT]

Someone filed this as a bug: https://dev.twitter.com/issues/1007

[benward]

Hi guys. We put a release out last week that fixes that should fix the right-hand padding issue. We also added support for hiding the scrollbar if you wish (using data-chrome=“noscrollbar”.

[charlielabs]

Great, Thanks!

[ZeikJT]

I just tested it again, still not padded properly but the noscrollbar argument works properly. Unfortunately, hiding the scrollbar isn’t a great solution because the chosen height might be cutting off a tweet right down the middle.

Even the example in the above bug file still has the problem (tested in both Chrome and Firefox).

[benward]

Ah, you’re right. I apologise. I did write a fix, but apparently it didn’t go out in that same bundle as I’d thought. I’ll find out where it went and get it deployed for real.

[benward]

Now the fix for that should be out. Currently propagating through caches, but you should see a few pixels of spacing between text and scrollbar shortly. Sorry for the mix-up.

Ben

[technologytales]

While the tweet text now has a right margin between it and the right scrollbar, the same cannot be said for the time value. This still is flush against the scrollbar when the transparent background option is set. The effect can be seen in the sidebar of http://technologytales.com/ and the Load More button is similarly affected. The margin needs to be extended beyond the tweet text to both of these.

[likeninja]

How has this not been fixed yet?

[djcatapano]

This issue is definitely NOT fixed yet. Please help.

[8TH4N]

For the life of me, I cannot figure out how removing a background color could possibly affect something like padding and yet, that is EXACTLY what having a transparent background does with this Embedded Timeline business.

Even with quirky CSS, there is no way to accidentally trigger a padding collapse by simply changing a background color to transparent.

HOWEVER, given that the Timeline border (you know, the border that’s around the entire Timeline) goes missing when you’re in Transparent mode, too, and leaves behind only bottom borders for each Tweet within the Timeline…

In giving the developers the benefit of the doubt that these additional changes were NOT intentional (though I will point out that changing a background color to transparent will NOT affect borders, either), I would suggest that because of the missing borders around the Timeline itself, the SIDE MARGINS/PADDINGS COLLAPSED IN on themselves.

However, a Suggestion in Case the Collapsing of Margins/Paddings Was In Fact Intentional:

PLEASE don’t assume what your userbase wants in terms of customization.

A background is a BACKGROUND. BORDERS are borders (I did NOT like to see my Timeline border and my margins/padding go missing). MARGINS are margins. PADDING is padding.

Trying to jam multiple changes into one change (eg: making the background transparent while at the same time deleting the Timeline border and the changing of the margin/padding on the Timeline) not only limits the customization possible (again, I did NOT want to see my Timeline border removed OR the padding/margins removed by choosing a transparent background) but also makes an assumption that Twitter ‘knows’ what its userbase wants when in fact, it doesn’t.

All that aside, the Timeline is sleek-looking… which I LIKE A LOT, but I would really appreciate a few more customization options. Or rather, have customization options that MAKE SENSE.

As an afterthought, I can see the rationale; the idea was probably to make the Timeline blend in more when embedded on people’s websites. But what doesn’t make sense is to attach that whole notion onto ONE singly-labeled option without any explanation or further description.

I’m not just ‘making my background transparent’ when I select Transparent as an option. I’m ALSO - and without knowing - selecting to get rid of my Timeline border AND selecting to delete my margins/padding that was otherwise a part of the Timeline… two additional option changes that I otherwise have zero say-so in.

All that said, thanks for listening to my thoughts.

[8TH4N]

Addendum to my previous post:

I tried leaving the background color on and removed all borders and the padding/margins remained the same. I am now leaning towards the probability that the removing of padding/margins when selecting the transparent option was a development decision as was the removal of the border around the Timeline itself.

[8TH4N]

… My second comment posted before my first - whooops!

[niall]

[niall]

[niall]