topic body scrolling problem

[WAS]

I am on my phone a lot and when I try to scroll content the div containing the post content is scrollable and moves behind the outside background of the forums making it hard to read and navigate topics when trying to view images and attachments.

Sorry for this being out of place. There seems to be no web support forums for site and forum issues. As a web developer for 13 years now I have spotted many problems with cross browser support and CSS bugs.

I'm sure there is a web guy, but if not please don't hesitate to ask me and I will provide code fixes. I'm on my phone currently so I can not easily see the source to provide a fix until I get home but this issue should just be a matter of overflow-x being  set to hidden or something besides its inhereted "scroll" value.

[Oshyan]

This is going to be down to the forum theme that we use. It's possible it's caused by some add-on, in which case it's probably fixable, but we try to avoid modifying the core files and theme code for ease of upgrade. If it's easily fixed without affecting anything else negatively, we can give it a shot.

- Oshyan

[WAS]

It's just a CSS issue which does not effect anything with upgrading.

On the inner class, or post class there just need to be one line added. As the content should be contained to the width of the body, no content will be hidden, but will stop scrolling.

Code Select Expand

overflow-x: hidden;

on either the

Code Select Expand

.inner or

Code Select Expand

.post classes in the CSS files for the theme. Not sure which one causes it as the issue is not present on desktop.

[Matt]

I can try that.

Matt

[Matt]

I've added this to class .inner. It's no longer adding scroll bars to wide images on the desktop (I've only tested in Chrome so far) and prevents scrolling on iPhone iOS7. Does this fix the problem you had on your mobile?

I don't know if this is really the ideal choice though. Perhaps we want to use 'auto'?

Matt

[WAS]

I've added this to class .inner. It's no longer adding scroll bars to wide images on the desktop (I've only tested in Chrome so far) and prevents scrolling on iPhone iOS7. Does this fix the problem you had on your mobile?

I don't know if this is really the ideal choice though. Perhaps we want to use 'auto'?

Matt

You can just use "Visible" and all images will just expand outside the the content. But the best way to do this is add a seperate class ".inner img" and set "min-width: 100%" so images are always shown within the constraints of the divs width. Images that are bigger should be provided with a link/thumbnail anyway for convenience of page loads. So that way images will be down-sized to whatever the size of the content box is. So lets say mobile where limit is 1024 width, the image will be constrained with that smaller box. On widescreen, 1920 width, we'd get a much bigger, if not full resolution image.

Code Select Expand


.inner img { min-width: 100%; }


To make sure all images are restrained; inside quotes, and stuff is to facilitate all child classes

Code Select Expand


.inner * img, .inner img { min-width: 100%; }
.inner img.smiley { min-width: auto; }


This shouldn't effect smilies I believe as they usually have a hard coded size, but just in case there is a reset. We could use the not select as follows but that is only in modern browsers. Which is pretty much everyone but not definite.

Code Select Expand


.inner * img:not(.smiley), .inner img:not(.smiley) { min-width: 100%; }


I have a suite called "BFX View" i have made which gathers all images inside content postings that are shown below their natural size. If clicked it will fade in one of those "lightboxes" with the full size image in it to view. I could rewrite it for these forums? It literally is just a jQuery application which requires no HTML/CSS edits. Does it all itself. You just gotta add the HTML link to the script in the global header of the forums, like under where the CSS is loaded.

Btw this did fix my problem with content scrolling away on me while scrolling the page and writing posts xD