Defect #34473
closed
  
Displaying the table of content on the right causes wrong position
 
        
        Added by César DJ Caësar 9114 almost 5 years ago.
        Updated over 1 year ago.
        
  
  
  
  Description
  
  Hi everyone,
I installed the latest version of Redmine and I started to try the wiki.
I wrote a simple page with titles ans subtitles, and at the very beginning of the page I put:
{{>toc}}
	to get the table of content on the top right corner.
	Actually as you can see the result is quite disturbing because I would have expected to get the TOC under "Modifier Surveiller".
	I think it may be a UI bug.
   
 
  
  Files
  
 
  
  
    
    
    
    
       - File 34473.png 34473.png added
- Status changed from New to Confirmed
- Affected version changed from 4.1.1 to 3.4.13
I have confirmed the issue with Redmine 3.4, 4.0, and 4.1. It occurs when "{{>toc}}" is placed at the first line.
	You can avoid the issue by placing "{{>toc}}" after the first heading instead of the first line.
	
 
   
  
  
    
    
    
    
    This can be solved by using the clear css properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 2d82fba7d..8ab85f269 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1405,8 +1405,10 @@ div.wiki ul.toc {
 }
 * html div.wiki ul.toc { width: 50%; } /* IE6 doesn't autosize div */
-div.wiki ul.toc.right { float: right; margin-left: 12px; margin-right: 0; width: auto; }
-div.wiki ul.toc.left  { float: left; margin-right: 12px; margin-left: 0; width: auto; }
+div.wiki ul.toc.right { float: right; margin-left: 12px; margin-right: 0; width: auto; clear: right
+;}
+div.wiki ul.toc.left  { float: left; margin-right: 12px; margin-left: 0; width: auto; clear: left
+  ; }
 div.wiki ul.toc ul { margin: 0; padding: 0; }
 div.wiki ul.toc li {list-style-type:none; margin: 0; font-size:12px;}
 div.wiki ul.toc>li:first-child {margin-bottom: .5em; color: #777;}
Toc after CSS changes.
	
		
			| {{toc}} | {{<toc}} | {{>toc}} | 
		
			|  |  |  | 
	
 
   
  
  
    
    
    
    
       - Target version set to 6.0.0
Setting the target version to 6.0.0.
 
   
  
  
    
    
    
    
       - Category changed from UI to Text formatting
 
   
  
  
    
    
    
    
       - Status changed from Confirmed to Closed
- Assignee set to Go MAEDA
- Resolution set to Fixed
Committed the fix in r22885. Thank you.
 
   
  
 
  
  
  
 
Also available in:  Atom
  PDF