[MGNLSTK-321] Text Image Paragraph in article renders incorrectly if text is too short Created: 07/Mar/09  Updated: 04/Nov/15  Resolved: 04/Nov/15

Status: Closed
Project: Magnolia Standard Templating Kit (closed)
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Bug Priority: Minor
Reporter: Boris Kraft Assignee: Philipp Bärfuss
Resolution: Won't Do Votes: 1
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified
Environment:

4.0 RC 4


Attachments: JPEG File Text image paragraph overlay issue.jpg     PNG File text-image-link-list-screen-shot-fix.png     PNG File text-image-link-list-screen-shot.png    
Template:
Acceptance criteria:
Empty
Date of First Response:

 Description   

If you create a new article with a text / Image p and a short text, such that the image is left of the text (default), then the following new bar will be to the right of the image, not below; as will the subsequent paragraph once created. For instance, if you create a quote, it will overly the image of the preceding text/image p.

See attached screenshot.

I consider this issue minor as an article will normally have more text and you can work around it by selecting "image above text".



 Comments   
Comment by Matt Dertinger [ 17/Oct/10 ]

Hi,

As this is an issue that is related to how floats are cleared, I would like to suggest using clearfix (http://www.webtoolkit.info/css-clearfix.html) on paragraphs. I think this would solve this issue, as well as other display issues throughout the STK. It would also allow us to get rid of many of the position:relative and overflow:hidden rules in the CSS.

Thoughts?

Thanks,
Matt

Comment by Andreas Weder [ 18/Oct/10 ]

Wouldn't it be enough to just set the "clear" attribute for basically any paragraph?

http://www.w3schools.com/css/pr_class_clear.asp

i.e. e.g. <p style="clear:both">text below the text image paragraph</p>

This requires the next element to start on a new line, not taking over any left-over space from the element above.

Comment by Matt Dertinger [ 19/Oct/10 ]

Hi Andreas,

In the specific example shown in the screenshot above, adding a clear:both rule to styles.css within the .text blockquote selector would be enough. As a starting point, below is an example of the current markup from the demo-project's Article with TOC page (HTML comments added by me).

Text and Image Paragraph in Main, followed by blockquote
<div class="text">
    ...
    <!-- START OF TEXT AND IMAGE PARAGRAPH -->
    <h2 id="jump2">Second Sub-Heading</h2>
    
    <!-- This element is floated left -->
    <dl class="photo">
        <dt><img src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368" alt="A metal lamp hanging from the ceiling" /></dt>
        <dd class="zoom"><a href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368" title="Zoom on this image" rel="showbox">Zoom</a></dd>
        <dd class="caption">A metal lamp hanging from the ceiling</dd>
        <dd class="copyright">Magnolia International AG</dd>
        <dd class="longdesc"><p>A metal lamp hanging from the ceiling in front of a green wall. </p></dd>
    </dl>
    
    <!-- The content of this paragraph has been shortened so that it is not longer than the floated dl.photo element -->
    <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
    <!-- The ul has been removed so that the content is not longer than the floated dl.photo element -->
    <!-- END OF TEXT AND IMAGE PARAGRAPH -->

    <!-- START OF QUOTED TEXT PARAGRAPH -->
    <!-- Currently, no clearing is on this element, the effect shown in the screenshot will be seen.  If we add clear:both to the .text blockquote selector in styles.css than it will be cleared. However, what happens if it is not a blockquote element that comes next? -->
    <blockquote>
        <p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
        <p>
            <cite>A. Miller</cite>
        </p>
    </blockquote>
    <!-- END OF QUOTED TEXT PARAGRAPH -->
    ...
</div>

But we don't always have an element like blockquote as a hook to attach a clear:both rule to. For example, if we move the Link List Paragraph at the end of the page up above the blockquote, we would have the following:

Text and Image Paragraph in Main, followed by Link List
<div class="text">
    ...
    <!-- START OF TEXT AND IMAGE PARAGRAPH -->
    <h2 id="jump2">Second Sub-Heading</h2>
    
    <!-- This element is floated left -->
    <dl class="photo">
        <dt><img src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368" alt="A metal lamp hanging from the ceiling" /></dt>
        <dd class="zoom"><a href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368" title="Zoom on this image" rel="showbox">Zoom</a></dd>
        <dd class="caption">A metal lamp hanging from the ceiling</dd>
        <dd class="copyright">Magnolia International AG</dd>
        <dd class="longdesc"><p>A metal lamp hanging from the ceiling in front of a green wall. </p></dd>
    </dl>
    
    <!-- The content of this paragraph has been shortened so that it is not longer than the floated dl.photo element -->
    <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
    <!-- END OF TEXT AND IMAGE PARAGRAPH -->

    <!-- START OF LINK LIST PARAGRAPH -->
	<div class="links">
	    <h2 id="jump3">Third Sub-Heading - Further Links</h2>
	    <ul>
	        <li>
	            <a href="/demo-project/about/subsection-articles/article.html">Standard Article</a>
	        </li>
	        <li class="download">
                <a href="/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf">Magnolia Flyer 4.0 <em>(PDF, 129 KB)</em></a>
	        </li>
        </ul>
	</div>
	<!-- END OF LINK LIST PARAGRAPH -->

    <!-- START OF QUOTED TEXT PARAGRAPH -->
    <!-- Currently, no clearing is on this element, the effect shown in the screenshot will be seen.  If we add clear:both to the .text blockquote selector in styles.css than it will be cleared. However, what happens if it is not a blockquote element that comes next? -->
    <blockquote>
        <p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
        <p>
            <cite>A. Miller</cite>
        </p>
    </blockquote>
    <!-- END OF QUOTED TEXT PARAGRAPH -->
    ...
</div>

Notice the Link List is now to the right of the image, and appears to be part of the Text and Image paragraph. Admittedly, it doesn't look particularly awful in this case, but was probably not what the author had in mind. If we add some content to the paragraph, we may also notice that the link list items wrap around the image, as shown in this screenshot.

To remedy this situation, and many others like it, what I'm proposing is to contain the Text and Image paragraph in a div element, and then add class clearfix to the container to expand the container around any floated elements. Without the clearfix class, the container div would not enclose any floated child elements. As can be seen in the example image from the original clearfix article.

For other paragraphs that already have a containing element, clearfix can be added to their class attribute to ensure they properly contain any floated child elements.

In the case of the Text and Image paragraph example we've been using, the markup would now look like this:

Text and Image Paragraph in Main, followed by Link List
<div class="text">
    ...
    <!-- START OF TEXT AND IMAGE PARAGRAPH -->
    <div class="clearfix">
        <h2 id="jump2">Second Sub-Heading</h2>
    
        <!-- This element is floated left -->
        <dl class="photo">
            <dt><img src="/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368" alt="A metal lamp hanging from the ceiling" /></dt>
            <dd class="zoom"><a href="/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368" title="Zoom on this image" rel="showbox">Zoom</a></dd>
            <dd class="caption">A metal lamp hanging from the ceiling</dd>
            <dd class="copyright">Magnolia International AG</dd>
            <dd class="longdesc"><p>A metal lamp hanging from the ceiling in front of a green wall. </p></dd>
        </dl>
    
    	<!-- The content of this paragraph has been shortened so that it is not longer than the floated dl.photo element -->
    	<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
    </div>
    <!-- END OF TEXT AND IMAGE PARAGRAPH -->

    <!-- START OF LINK LIST PARAGRAPH -->
    <div class="links">
	<h2 id="jump3">Third Sub-Heading - Further Links</h2>
	<ul>
	    <li>
	        <a href="/demo-project/about/subsection-articles/article.html">Standard Article</a>
	    </li>
	    <li class="download">
                <a href="/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf">Magnolia Flyer 4.0 <em>(PDF, 129 KB)</em></a>
	    </li>
        </ul>
    </div>
    <!-- END OF LINK LIST PARAGRAPH -->

    <!-- START OF QUOTED TEXT PARAGRAPH -->
    <!-- Currently, no clearing is on this element, the effect shown in the screenshot will be seen.  If we add clear:both to the .text blockquote selector in styles.css than it will be cleared. However, what happens if it is not a blockquote element that comes next? -->
    <blockquote>
        <p>Ein Zitat. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
        <p>
            <cite>A. Miller</cite>
        </p>
    </blockquote>
    <!-- END OF QUOTED TEXT PARAGRAPH -->
    ...
</div>

And here's a screenshot of how it would be rendered:

Note: This is just one example. There are other approaches to self-clearing containing elements, such as using overflow:hidden (which is the current STK approach) or overflow:auto but IMHO, the overflow methods introduce some pretty nasty gotchas, especially if you still need to support IE6. In addition, the overflow clearing methods react very strangely when using negative margins. Another issue with the overflow method is that it clips relatively position elements.

Please also note that there's been some improvements made to the clearfix method.

Ok, that was really long, I apologize. I hope that helps explain my thinking a bit.

Thanks,
Matt

Comment by Timo Wirth [ 22/Oct/10 ]

Hey Matt, +

Some thoughts on your ideas

1) My first thought: a class clearfix looks very ugly and feels like 2003

2) Second thought: if the class is in you cannot remove it

3) to have a div class="text-block" for a text / image paragraph can be very handy. we did this in some projects

4) thoughts on clearing / containing floats in general

what possibilies do we have? pro & cons

a) float everthing
easy
you cannot use magin auto anymore

b) overflow: hidden
solid and easy
easy to maintain
the overflow is hidden: you cannot move elements outside. It's not possible to use
box-shadow anymore

c) :after
very modern
often used as a bundle at the beginning of css to save code
not visible in firebug

Comment by Matt Dertinger [ 22/Oct/10 ]

Hi Timo, +

1) My first thought: a class clearfix looks very ugly and feels like 2003

I agree it looks very ugly. But historically speaking it was 2004

2) Second thought: if the class is in you cannot remove it

Yes, unless its assigned within a divClass property in the Paragraph Definition's parameters. But that's not pretty.

3) to have a div class="text-block" for a text / image paragraph can be very handy. we did this in some projects

Agreed, this would solve most issues.

4) thoughts on clearing / containing floats in general

what possibilies do we have? pro & cons

a) float everthing
easy
you cannot use magin auto anymore

I'm not a fan of this approach, I really like margin:0 auto;

b) overflow: hidden
solid and easy
easy to maintain
the overflow is hidden: you cannot move elements outside. It's not possible to use
box-shadow anymore

I'm really liking box-shadow, be ashamed not to use it. Also, negative margins are useful sometimes.

I admit, it is a clean approach, at least as far as mark-up is concerned.

c) :after
very modern
often used as a bundle at the beginning of css to save code
not visible in firebug

Go on! You've peaked my interests.
What can be done for those of us who still need to support IE6?

Thanks so much for your thoughts on this. I really appreciate discussing them with you.

Thanks,
Matt.

Comment by Michael Mühlebach [ 04/Nov/15 ]

Given the thousands of other issues we have open that are more highly requested, we won't be able to address this issue in the foreseeable future. Instead we will focus on issues with a higher impact, and more votes.
Thanks for taking the time to raise this issue. As you are no doubt aware this issue has been on our backlog for some time now with very little movement.
I'm going to close this to set expectations so the issue doesn't stay open for years with few updates. If the issue is still relevant please feel free to reopen it or create a new issue.

Generated at Mon Feb 12 07:25:52 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.