Topic #4544 (no title)

Image

(Click to enlarge)

#4766 - Non-flow mode box alignment issue

This is a spacer post for a website comment topic. The content this topic relates to: #4766 - Non-flow mode box alignment issue
Automated response: Ratings on gallery media will cause overflow in default grid alignment

When some gallery media as ratings and some doesn't, the grid layout is thrown off.

Technical explanation:
There are two issues:
1) There is margin collapsing on the paragraph to the left, but not on the rating to the right. This makes the rating taller.
2) The stars are still slightly taller than the paragraph to the left in some situations.



This has fixed the layout, still having problems with the Title (which seems to be causing the issue in the image on just 1 entry).
gallery_media_title_cropped max-width set to 100px instead of the default 120px doesn't seem to have any effect. Using the theme tools "Show template edit links" has the entry displaying fine on the preview, so I have no idea why this entry is deformed.
Image

(Click to enlarge)

Ok so I think you've taken off the template-based truncation. Which is fine, because that technique isn't so great anyway. CSS is better.
I can't see any default styles on gallery_media_title_cropped, so I think you put the 100px on then the 120px on.

The issue you seem to be having is it's wrapping. Do this...

.gallery_media_title_cropped {
max-width: 120px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}

This will force it onto one line with a max width, and add a "..." via CSS.
Oh wait, disregard, now I see what you're referring to. I'll post again in a minute.
Ok sorry I see what you were referring to. I was searching the code and didn't see it, but now I do. It basically is doing what I just said, but I think it's not working because I think you changed...

{$TRUNCATE_LEFT,{TITLE},23,0,0}

in GALLERY_VIDEO & GALLERY_IMAGE.tpl

to just {TITLE}

You need to change it to <span>{TITLE}</span>

Otherwise the ".gallery_media_title_cropped>span" CSS rule won't hit it. The TRUNCATE_LEFT is adding a span itself, so you need to put it back in manually.
I hadn't changed anything in that paragraph but replacing that Truncate code with the span fixed the issue. Setting a max-width of 155px has everything looking hunky dory. Thanks.
0 guests and 0 members have recently viewed this.