Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.The current CSS we use for captions in Drupal 8 is not responsive:
.caption {
display: table;
}
.caption > * {
display: block;
max-width: 100%;
}
.caption > figcaption {
display: table-caption;
caption-side: bottom;
max-width: none;
}
Although we have a max-width: 100% on child elements within a caption (which is a <figure> element in the markup), the parent element itself does not seem to be responsive.
There are a number of browser issues related to using display: table and tables themselves:
- Firefox max-width: 100%; doesn't work inside tables or display: table
- Mozilla dev center indicates that max-width doesn't work in pretty much any browsers on tables themselves (though I'm not sure that affects
display: table).
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | css-caption-2568597-6.patch | 1.03 KB | tarekdj |
| #6 | after-safari-5-win7.png | 208.47 KB | tarekdj |
| #6 | after-FF-40-win7.png | 164.05 KB | tarekdj |
| #6 | after-chrome-45-win7.png | 177.57 KB | tarekdj |
| #6 | before-chrome-45-win7.png | 186.84 KB | tarekdj |
Comments
Comment #2
quicksketchThe reason we have this unusual CSS arrangement in the first place was because it was the only known way of centering an element without having a parent element that had
text-align: center. Because in Drupal we don't have a reliable parent in our current filtering, we used this table-based CSS instead.From the research I've done, it really seems like the only way to fix this is to use
display: inline-blockon the<figure>element and add a wrapper that has hastext-align: centerset on it in CSS. Then the inline-block element can easily be set to usemax-width: 100%, and then the whole figure and image within it becomes responsive.Comment #3
wim leersThat's unfortunate :(
Thank you very much for sharing this research!
Comment #4
quicksketchWell, we successfully made figures and images responsive in Backdrop, but now our caption text overflows the image width. :P
No kidding! This turns out to be a sort of tough nut to crack. I can't believe a responsive figure and caption would be so hard. We're working on solving this later issue at https://github.com/backdrop/backdrop-issues/issues/1200
Comment #5
wim leersThanks for pointing me there, just commented: https://github.com/backdrop/backdrop-issues/issues/1200#issuecomment-146... — basically, I can't reproduce the problem? (Or am probably overlooking something.)
Comment #6
tarekdj commentedI noticed that
<figure>is not responsive at all on FF 40 (Win 7). Attached a quick fix. Works for different browsers on Win 7 but needs tests for other plateformsComment #7
wim leersHm… interesting. It definitely used to be the case that that
display: table-captionwas absolutely essential for this to work at all. It seems that's no longer the case?Comment #8
tarekdj commented@Wim Leers: It may be essential for
<table>caption (http://www.w3schools.com/tags/tag_caption.asp). I don't know if it's the case for<figure>Comment #9
wim leersW3Schools… you might as well stab me. :P
See #2014895-17: Image captions & alignment (for inline images) and #2014895-21: Image captions & alignment (for inline images), where this was introduced. It's copied from http://stackoverflow.com/a/13363408/80305. Apparently since then, somebody has reported the same problem there: http://stackoverflow.com/questions/10264463/can-a-figcaption-be-restrict... — but a solution was also posted there.
But AFAICT simply adding
height: auto;already fixes it? See http://codepen.io/anon/pen/pjrYaN + https://github.com/backdrop/backdrop-issues/issues/1200#issuecomment-147...Comment #10
tarekdj commentedhehe shame on me :)!
I noticed the
height: auto;workaround but it works only for chrome (At least for me, it is broken on Firefox 40 - Windows 7)Comment #11
wim leersDamn, you're right. That's also what @quicksketch originally reported in the first place: https://bugzilla.mozilla.org/show_bug.cgi?id=975632.
Comment #12
wim leersSeems related work is being done at #2398459: Clean up "captions" component in Bartik.
Comment #14
wim leersI wonder if we can use flexbox to solve this? 80% of the global audience supports it unprefixed according to http://caniuse.com/flexbox.
So then we can continue to rely on the existing CSS as a fallback, but solve it for modern browsers (i.e. the 80%).
Comment #15
piatachki commentedThank you for patch. Before images with caption show with original width and i must use width = 700px. Now CSS .img {width: 100%, heigth: auto} is working. Why this patch not included at 8.1.x?
Comment #16
wim leers#15: because it only fixes it in the case of a captioned image, not in the case of captioned blockquotes, code examples, etc.
Also, quoting @quicksketch from the Backdrop issue: https://github.com/backdrop/backdrop-issues/issues/1200#issuecomment-212...
So… it looks like once Firefox 47 is rolled out, this problem will finally disappear automatically :)
Comment #17
wim leersFirefox 47 has been rolled out. Does that mean we can close this?
(Cross-posted to https://github.com/backdrop/backdrop-issues/issues/1200#issuecomment-226....)
Comment #18
joginderpcYes i could also say that we can close this as i tested this and updating status.
Comment #19
wim leersCool! :)
Let's first await feedback from the Backdrop team before really marking this fixed.
Comment #20
wim leersMoving to "needs review", because core committers can't actually commit anything here.
Comment #22
quicksketchI've confirmed that the problem seems to have "resolved itself" in the latest Firefox versions. Over in Backdrop-land we need to revert back to the table-CSS approach, but the latest D8 still uses the original approach (which is now working in Firefox).
So I think this can be closed, no changes necessary here.