Project

General

Profile

Actions

Defect #3163

closed

Large inline images overflow

Added by Justin Grevich over 15 years ago. Updated almost 11 years ago.

Status:
Closed
Priority:
Low
Category:
UI
Target version:
Start date:
2009-04-13
Due date:
% Done:

20%

Estimated time:
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?


Files

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

Related issues

Has duplicate Redmine - Defect #12244: Preview Layout breaks on large imagesClosed

Actions
Has duplicate Redmine - Defect #16053: add overflow hiddenClosed

Actions
Actions #1

Updated by Frank Helk about 14 years ago

+1

Actions #2

Updated by Justin Grevich about 14 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

Actions #3

Updated by Eric Davis about 14 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

Actions #4

Updated by Etienne Massip almost 14 years ago

  • Category set to UI
Actions #5

Updated by Justin Grevich almost 14 years ago

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

Actions #6

Updated by Justin Grevich almost 14 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?

Actions #7

Updated by Justin Grevich almost 14 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.

Actions #8

Updated by Jean-Philippe Lang almost 11 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.

Actions #9

Updated by Jean-Philippe Lang almost 11 years ago

  • Has duplicate Defect #12244: Preview Layout breaks on large images added
Actions #10

Updated by Jean-Philippe Lang almost 11 years ago

Actions #11

Updated by Anonymous almost 11 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%;}

Actions #12

Updated by Jean-Philippe Lang almost 11 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.

Actions

Also available in: Atom PDF