Defect #3163

Large inline images overflow

Added by Justin Grevich about 9 years ago. Updated about 4 years ago.

Status:ClosedStart date:2009-04-13
Priority:LowDue date:
Assignee:Jean-Philippe Lang% Done:

20%

Category:UI
Target version:2.5.0
Resolution:Fixed Affected version:

Description

attached images that are larger than the current page size are allowed to overflow past the container. Shouldn't we at least use a css rule to stop the overflow?

Is there a simple way around this?

redmine-image_overflow-v0.1.patch Magnifier (565 Bytes) Justin Grevich, 2011-03-07 21:30


Related issues

Duplicated by Redmine - Defect #12244: Preview Layout breaks on large images Closed
Duplicated by Redmine - Defect #16053: add overflow hidden Closed

Associated revisions

Revision 12864
Added by Jean-Philippe Lang about 4 years ago

Prevent inline images to overflow (#3163).

History

#1 Updated by Frank Helk over 7 years ago

+1

#2 Updated by Justin Grevich over 7 years ago

  • Assignee set to Eric Davis
  • % Done changed from 0 to 10

You can set a max-width to all images in #content:


svn diff
Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css    (revision 4358)
+++ public/stylesheets/application.css    (working copy)
@@ -79,6 +79,7 @@
 * html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
 html>body #content { min-height: 600px; } 
 * html body #content { height: 600px; } /* IE */
+#content img { max-width: 100%; }

 #main.nosidebar #sidebar{ display: none; }
 #main.nosidebar #content{ width: auto; border-right: 0; }

Are there other elements than images that may cause overflow?

Apparently IE8 does not implement max-width correctly in some cases: http://reference.sitepoint.com/css/max-width#compatibilitysection

#3 Updated by Eric Davis over 7 years ago

  • Assignee deleted (Eric Davis)

I am stepping down from working on Redmine. If someone else is interesting in working on this issue, feel free to reassign it to them.

Eric Davis

#4 Updated by Etienne Massip about 7 years ago

  • Category set to UI

#5 Updated by Justin Grevich about 7 years ago

Attached is a patch for what I've been using. Let me know how it works.

#6 Updated by Justin Grevich about 7 years ago

  • % Done changed from 10 to 20

I tested this in Win7 x64 using IE 8.0.7601.17514. Apparently max-width works fine as long as the doc-type is not xhtml strict (http://davidnaylor.org/blog/2008/09/ie8-and-max-width/ | http://davidnaylor.org/blog/2009/05/ie8-sorted/). Perhaps even that has been fixed now in later IE8 versions.

Can anyone report this not working?

#7 Updated by Justin Grevich about 7 years ago

http://nfine.net/bugs/ie8bug.html can reproduce the bug with dynamically created images. I tried the same with Redmine's preview and it seems to work correctly.

#8 Updated by Jean-Philippe Lang about 4 years ago

  • Subject changed from attached images are allowed to overflow containers to Large inline images overflow
  • Status changed from New to Closed
  • Assignee changed from Justin Grevich to Jean-Philippe Lang
  • Target version set to 2.5.0
  • Resolution set to Fixed

Fixed in r12864.

#9 Updated by Jean-Philippe Lang about 4 years ago

  • Duplicated by Defect #12244: Preview Layout breaks on large images added

#10 Updated by Jean-Philippe Lang about 4 years ago

#11 Updated by Stefan Tatschner about 4 years ago

Jean-Philippe Lang wrote:

Fixed in r12864.

I'm afraid this fix works only for the wiki and not the issue tracker, see #14021.

div.wiki img {vertical-align:middle; max-width:100%;}

#12 Updated by Jean-Philippe Lang about 4 years ago

Stefan Tatschner wrote:

I'm afraid this fix works only for the wiki and not the issue tracker, see #14021.

No, this fix is not only for the wiki. The patch is not yet applied here.

Also available in: Atom PDF