Collage Thumbmails Clipped Screen Right

JASPC

Hi,

This might have been reported already but I did a search and could not find any relevant threads.

When using "Stretchy" and Collage Layout the thumbnails that are on the right edge of the screen are being clipped. The screen grab below shows this. Look at the images with white frames on the right side of the screen - that makes it very obvious:

http://jsuro.smugmug.com/photos/i-zm4J2CJ/0/X3/i-zm4J2CJ-X3.jpg

This can be resolved temporarily by toggling the browser from full screen to window and back, the initial gallery display will clip regardless of the browser screen mode. Here is a screen grab after the toggle:

http://jsuro.smugmug.com/photos/i-Hfj8DnP/0/X3/i-Hfj8DnP-X3.jpg

in that grab all thumbnails have now been re-sized and are now showing no clipping. This behavior does not happen in "Fixed" Layout mode.

It happens both in Firefox and IE. I remember something similar happening back in the day when Stretchy first came out and Andy was able to fix this with some CSS code. Eventually the bug was fixed and the code was not needed anymore. I'd love to have that code again!!

Best,

Jose

JASPC

Bumping this because I have not seen a fix yet.

beardedgit

Just to confirm that I'm now seeing the same clipping bug in my Stretchy + Collage Landscape galleries in FF, I can't recall noticing it before but then again I'd not looked at it that closely.

beardedgit

Not sussed a fix yet but I've shown it to some friends and they reckon it's something to do with the scoll-bar up the RH edge... if the gallery is so small that it doesn't need a scroll-bar to display it in Collage Landscape mode, there's no clipping.

The consensus of opinion is that when the gallery is first loaded, the image-size calculations are made on the assumption that the available width = the full width of the screen/window, hence a scroll-bar added afterwards clips the RH edge. A resize of that window (which now contains the scroll-bar) forces a recalculation based on a new value for the available width (window minus scroll-bar).

Did that make sense?

If so, I hope it helps.

thenickdude

If that's true, you should be able to solve it by forcing the scrollbar to appear at all times, by adding:

body { overflow-y:scroll; }

To your CSS. Sorry, I'm not able to test that out myself at the moment. My original Montage Thumbnails customisation for Old-SmugMug included code which worked around this problem:

/* Ensure there is a vertical scrollbar on the body, so that laying out images doesn't cause the image 
 * container to shrink horizontally, which would invalidate the layout immediately.
 */
var originalOverflowY = document.body.style["overflow-y"];

if (originalOverflowY != "scroll") {
	document.body.style["overflow-y"] = "scroll";
}

_layoutThumbs(_thumbsContainer, addedImageTags);

if (originalOverflowY != "scroll") {
	document.body.style["overflow-y"] = originalOverflowY;
}

mbonocore

I can't recreate this on my FF Mac. It looks like you guys are on Windows? Can you let me know which windows and your FF version(make sure you have the latest FF) Thanks!

beardedgit

mbonocore wrote: »

I can't recreate this on my FF Mac. It looks like you guys are on Windows? Can you let me know which windows and your FF version(make sure you have the latest FF) Thanks!

XP SP3, FF 23.0.1

Let me know if you want screenshots of the clipping.

thenickdude

Google Chrome, Mac OSX 10.8.4, it reproduces for me:



On this page:

http://jsuro.smugmug.com/Portfolios/Fine-Art/Black-White

When I resize the browser window, it lays out the thumbs again and so stops clipping the images. I'm pretty sure it's caused by the scrollbar appearing after the layout of thumbs has already started, and will be more noticeable on Windows where the scrollbars are much fatter than on Mac.

If I add this CSS to your page:

body {
  overflow-y: scroll;
}

The problem stops appearing.

JASPC

mbonocore wrote: »

I can't recreate this on my FF Mac. It looks like you guys are on Windows? Can you let me know which windows and your FF version(make sure you have the latest FF) Thanks!

Windows 7 - 64, Both Laptop and in Main Comp with Apple Display, Both on FF and IE

FF version is latest, so is IE.

JASPC

mbonocore wrote: »

I can't recreate this on my FF Mac. It looks like you guys are on Windows? Can you let me know which windows and your FF version(make sure you have the latest FF) Thanks!

Lamah wrote: »

If that's true, you should be able to solve it by forcing the scrollbar to appear at all times, by adding:

body { overflow-y:scroll; }

To your CSS. Sorry, I'm not able to test that out myself at the moment. My original Montage Thumbnails customisation for Old-SmugMug included code which worked around this problem:

/* Ensure there is a vertical scrollbar on the body, so that laying out images doesn't cause the image 
 * container to shrink horizontally, which would invalidate the layout immediately.
 */
var originalOverflowY = document.body.style["overflow-y"];

if (originalOverflowY != "scroll") {
    document.body.style["overflow-y"] = "scroll";
}

_layoutThumbs(_thumbsContainer, addedImageTags);

if (originalOverflowY != "scroll") {
    document.body.style["overflow-y"] = originalOverflowY;
}

That worked THANKS!!

Dead on the money analysis :ivar:ivar:ivar:ivar

Jose
http://www.josesuro.com

beardedgit

Lamah wrote: »

... add this CSS ...:

body {
  overflow-y: scroll;
}

The problem stops appearing.

Thanks, Lamah, you're a genius bow

beardedgit

If this fix works for everyone, and nobody finds any downside, maybe it (or a variation of it) should be tested and considered for inclusion in the next code push?

thenickdude

Well, the downside is that short galleries would still get a scrollbar they don't need, which is untidy. I think a tweak to the JavaScript like was in my old montage code is the best option.

JASPC

I see the same behavior in the "Folders" display page and the same fix above solves the problem.

Jose

http://www.josesuro.com

thenickdude

Bump, it'd be nice to get this bug fixed now that the cause has been identified and a workaround suggested.

mbonocore

Heya Lamah,

I talked to our dev who is in charge of this, and she is on it this week.

lbruby

I've been having this problem too, and until now hadn't found this thread when looking to see if anyone else had seen the problem. Glad to hear it's going to get worked on. The things i was doing to deal with it were rather unpalatable overall. Thank you for the workaround.

Lisa

gcs

images cut off
images are being cut off on the right side of my screen in the horizontal collage layout for my galleries.

This seems to occur when I first open a gallery but is corrected when I change the size of the browser window...from maximized to an arbitrary size or from a sized window to a maximized window. This also happens on several wide images within my homepage slideshow. This occurs in both Chrome and internet Explorer. Is this a bug? Has anyone else seen this problem?

SmugMug support has had this info for weeks, and I am still left without resolution. Release of my updated webpage is on hold until it can be resolved.

-gcs

thenickdude

Yup, discussed here:

http://dgrin.com/showthread.php?t=239289

To fix it, add this to your CSS:

body { 
  overflow-y:scroll;
}

gcs

Lamah,
That works! That's all it took? Weeks of frustration resolved. Thank you so much. You are my personal SmugMug Hero; all you need is some face paint.

BTW, I had previously been to your SmugMug customizations page and found it had some valuable ideas and problem fixes. You were already in my bookmarks. Thanks, again.

-gcs

gcsundra.smugmug.com
(This is currently still displaying as my legacy page. I'll have to get the upgrade unveiled soon.)

mbonocore

Merging the two threads. This is in our CSS Sorceress' hands though, so should be fixed soon

migreen

Me too . . and Heroes not helpful !
RANT

I have this same problem on several computers, all Win7, confirmed on both Chrome and IE on each computer.

I've been seeking help on this from the Heroes for several days, and it was clear that the Hero in question (Kevin Wilson) knew nothing about the fact that others had reported the problem. I was told to empty cache, check zoom, etc (none of which worked). Its an embarassment to me because I'm now in the active marketing period for two events, and perceptive viewers can easily see the problem.

I insisted (had to insist a second time) on escalation, was finally told that it has been escalated. Heard nothing for 24 hours; but as I was writing this, just got an email that the escalating people had it and were working on it. No acknowledgment that they've known about it for two weeks.

And finally . . a major reason that we're all going thru this upgrade is to avoid css. A solution that requires css to fix a programming error is a lousy solution, at least for me.

If you can't tell, I'm disgusted. I've had some very good assistance from the Heroes, and some mediocre, but this is the worst yet.

beardedgit

migreen wrote: »

RANT

I have this same problem on several computers, all Win7, confirmed on both Chrome and IE on each computer.

I've been seeking help on this from the Heroes for several days, and it was clear that the Hero in question (Kevin Wilson) knew nothing about the fact that others had reported the problem. I was told to empty cache, check zoom, etc (none of which worked). Its an embarassment to me because I'm now in the active marketing period for two events, and perceptive viewers can easily see the problem.

I insisted (had to insist a second time) on escalation, was finally told that it has been escalated. Heard nothing for 24 hours; but as I was writing this, just got an email that the escalating people had it and were working on it. No acknowledgment that they've known about it for two weeks.

And finally . . a major reason that we're all going thru this upgrade is to avoid css. A solution that requires css to fix a programming error is a lousy solution, at least for me.

If you can't tell, I'm disgusted. I've had some very good assistance from the Heroes, and some mediocre, but this is the worst yet.

They've known about it for more than two weeks, try over five weeks!
That's more days than the number of code-characters that they'd need to use to fix this bug

beardedgit

mbonocore wrote: »

Merging the two threads. This is in our CSS Sorceress' hands though, so should be fixed soon

Michael, can you please explain the delay regarding this matter? The longer it's left unfixed, the more folk are going to find the bug, get frustrated by it, and then start more threads on here to add to the clutter which makes your job more difficult.

Lamah's been kind enough to supply two sections of code - one for a quick&dirty fix and the other for a more elegant solution. Why couldn't SM apply the quick&dirty fix when it was provided, to give more time to work on something more robust?

In short, SM has been handed one problem and has been helped out by the provision of two solutions, and still we see no resultant action.

There's little point in us reporting the bugs if SM is going to treat with indifference our efforts to get them fixed.

migreen

Another three days, no response . . my clients are making negative observations about this. Do I have to re-iterate to the developers that this reflects badly on me (and on all of us who are experiencing the problem)? Not fixed, no acknowledgment, Heroes have lapsed into silence. Thin skins? Emperor has no clothes ???????

thenickdude

migreen wrote: »

Another three days, no response . . my clients are making negative observations about this.

Just add the CSS fix on the previous page to your theme's CSS. It fixes the problem.

mbonocore

beardedgit wrote: »

Michael, can you please explain the delay regarding this matter? The longer it's left unfixed, the more folk are going to find the bug, get frustrated by it, and then start more threads on here to add to the clutter which makes your job more difficult.

Lamah's been kind enough to supply two sections of code - one for a quick&dirty fix and the other for a more elegant solution. Why couldn't SM apply the quick&dirty fix when it was provided, to give more time to work on something more robust?

In short, SM has been handed one problem and has been helped out by the provision of two solutions, and still we see no resultant action.

There's little point in us reporting the bugs if SM is going to treat with indifference our efforts to get them fixed.

Bearded,

This is still in the queue to be fixed. We have alot of issues....I submit with my importance, but don't prioritize. I will update you as soon as it is fixed.

migreen

Lamah wrote: »

Just add the CSS fix on the previous page to your theme's CSS. It fixes the problem.

Many thanks to Lamah for the CSS fix, which works for me as well as evidently for others.

But I hope that the Sorcerers and others keep in mind that this is NOT a great solution in the long (or medium) run. Will the official fix, if it ever happens, somehow be confounded by the CSS code which I've now had to add? As I recall, a lot of custom CSS was lost or distorted by the change to new SM. I don't know enough about css (nor do I want to) to answer these questions for myself. So . . I'm concerned that the use of CSS, especially with the underlying code being continualy tweaked to get rid of what appear to be many bugs, will introduce instability. Its a butt-saving necessity now, but I don't want to continue to need it.

And lest we forget, the following is from official SM materials:

Advanced Customization via HTML and CSS is still there for those of you who love it, but it’s really, truly optional now

I'm not one of those who love it, and its unfortunately not optional.

thenickdude

Adding that CSS to your page is equivalent to just having something so tall on your page to cause a vertical scrollbar to appear, so there shouldn't be any compatibility issues going forwards.

migreen

Thanks, Lamah, for the clarification, and especially for the css fix !

BTW, I checked out your website . . some interesting customizations, and also some great photographs! I like your site design as well . ..

beardedgit

Just thought that I'd mention that I've noticed that despite having Lamah's CSS installed for fixing the edges, I'm still getting cut-off right-edges under certain circumstances...

The code works properly in that when a Collage Landscape gallery is opened, the right-edges are fine. Open an image in Lightbox and then close it and the right-edges are still fine. But open an image in Lightbox, then make it full-screen, exit full-screen and then close Lightbox, and the right-edges are cut off as if the fix wasn't in place. A reload is needed to repair the edges.

Does anybody else see this?

FWIW: XP SP3, Firefox 24