Defect #3163: Large inline images overflow - Redmine

Defect #3163

Large inline images overflow

Added by Justin Grevich almost 11 years ago. Updated about 6 years ago.

Status:

Closed

Start date:

2009-04-13

Priority:

Low

Due date:

Assignee:

Jean-Philippe Lang

% Done:

20%

Category:

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 (565 Bytes) Justin Grevich, 2011-03-07 21:30

Related issues

Associated revisions

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

Prevent inline images to overflow (#3163).

History

#1 Updated by Frank Helk over 9 years ago

#2 Updated by Justin Grevich over 9 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 9 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 9 years ago

Category set to UI

#5 Updated by Justin Grevich about 9 years ago

File redmine-image_overflow-v0.1.patch added
Assignee set to Justin Grevich

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

#6 Updated by Justin Grevich about 9 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 9 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 6 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 6 years ago

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

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

Duplicated by Defect #16053: add overflow hidden added

#11 Updated by Anonymous about 6 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 6 years ago

Stefan Tatschner wrote: