CSS problem while using "Show title on hover" when your gallery collection contains galleries with and without media [#1048086]

Hello,

After using drag-and-drop to change the order in which the galleries are displayed, my "All Galleries" page currently looks like below, with G representing an actual gallery and - representing an empty space the size of a gallery thumbnail.

G G G G G
- - - G G
G G G G G
- G G G G
- - - G G
G G G G G

I can't seem to be able to remove the gaps. When moving a gallery with the mouse cursor, and before dropping, the gallery page looks proper with no gaps, but as soon as I drop it, the gaps appear. Quite odd. Does anyone experience the same or have a solution?

Best regards,
Ao

Comment	File	Size	Author
#8	media_gallery-fix-gallery-media-floating-1048086-8.patch	1.18 KB	Moloc

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Aonoa CreditAttribution: Aonoa commented 2 February 2011 at 00:07

It seems to be related to the title below the gallery. There are galleries without media on this page, and the galleries that contain media are the ones that are above the empty spaces. In addition, if I set "All Galleries" to show title on hover, the empty spaces disappear.

Best regards,
Ao

Comment #2

Aonoa CreditAttribution: Aonoa commented 2 February 2011 at 00:28

I do not know if this is a good fix, but here is what worked for me.

In media_gallery.css, changing line 169 from:

169 line-height: 1.5em;

169 line-height: 1.4em;

Fixed it for me, now I can have the title showing below the galleries and there are no empty spaces due to the titles. The border between rows was also an indication of the title being the culprit, as it was uneven between galleries containing media and empty galleries without media.

Best regards,
Ao

Comment #3

Aonoa CreditAttribution: Aonoa commented 2 February 2011 at 21:02

Title:

Re-ordering galleries by drag and drop causes odd open spaces between galleries

» CSS problem while using "Show title on hover" when your gallery collection contains galleries with and without media

Adding in some video in one gallery, making the text below it expand further made my previous fix useless.
I added the line at 171, still in media_gallery.css:

167 .meta-wrapper:active {
168   font-size: 0.8462em;
169   line-height: 1.5em;
170   min-height: 3em;
171   height: 4em;
172   vertical-align: top;
173 }

Best regards,
Ao

Comment #4

Aonoa CreditAttribution: Aonoa commented 2 February 2011 at 21:03

Component:

User interface

» Code

Comment #5

lsolesen CreditAttribution: lsolesen commented 27 May 2012 at 04:55

Status:

Active

» Postponed (maintainer needs more info)

@Aonoa Is this still an issue in beta7? Could you supply a patch, if that is still the case?

Comment #6

Aonoa CreditAttribution: Aonoa commented 29 May 2012 at 22:08

Yes, this is still an issue for me in beta7. I have no time to make a proper patch at the moment, but creating a new line #171 in media_gallery.css with height: 4em; fixes it for me. Exactly as I previously mentioned in post #3 above.

Best regards,
Aonoa

Comment #7

Moloc CreditAttribution: Moloc commented 30 May 2012 at 21:46

Version:	7.x-1.0-beta3	» 7.x-1.0-beta7
Status:	Postponed (maintainer needs more info)	» Active

There are two issues.
1) Drag&Drop: After dropping, the galleries look like in #0. The reason is, that there is a javascript error and therefore some media_gallery javascript code is no longer executed. To fix this, apply patch in #1228094: Gallery rearranging is not stored.

2) There is a problem, when the title is shown below. To problem lies in the font-size.
The font-size is defined for the .meta-wrapper with 0.8462em, and the .meta-title with 12px.
It seems to work in Opera, Chrome and Safari, but not in IE and Firefox. On my System (Bartik theme), the font-size is 14px and multiplicated with 0.8462 is about 11.8px. So the title is to large and the gap is generated.
(Tested just images and not videos, as mentioned in #3).