TYPO3: 2 news plugins on 1 page get mixed up

Question

I have a page that consists of 2 news plugins (extension key = "news", typo3 version = "6.2.38"). I have created those 2 plugins in the backend. Both news plugins have the same folder as their source of articles. I have assigned "categories" to the articles inside the source folder. Now the the first plugin is supposed to show the articles of category "A" and the second plugin is supposed to show the articles of category "B".

Both plugins activated: If both plugins are activated, all articles ("A" and "B") appear underneath the title of plugin 2. Plugin 1 only shows its title without any articles below it.

Only plugin 2 activated: I only see articles of category "B" as expected.

Only plugin 1 activated: I only see articles of category "A" as expected.

EDIT: Here comes the structure of the resulting HTML. "c1" is the content element of the first plugin and "c2" is the content element of the second plugin.

<div id="c1" class="csc-default">
    <div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Articles of plugin 1:</h2></div>
    <div class="news">
        <div class="news-list-view">
            .
            . one div for each article
            .
        </div>
    </div>
</div>

<div id="c2" class="csc-default">
    <div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Articles of plugin 2:</h2></div>
    <div class="news">
        <div class="news-list-view">
            .
            . one div for each article
            .
        </div>
    </div>
</div>

It looks like everything is in correct order. However, what I see in the browser is (in this order): 1) "Articles of plugin 1:" 2) "Articles of plugin 2:" 3) ALL the articles of BOTH plugins.

When both plugins are active, are then all news records nested in one <div id="c48" class="frame frame-default frame-type-list frame-layout-0">? — bandanh
I have partially stripped the HTML code and edited it into my first post to make that weird behaviour more comprehensible. — user3182532
But if the HTML is correct, then its neither News nor TYPO3. Can you try to open code inspector in your browser and remove all css there? Then you get an ugly white page with raw HTML, is the order correct then? It its correct then, then you got a problem with your css. — bandanh
your conclusion was right: neither news nor typo3. the people who maintained that project before me had set up some javascript which caused that behaviour. — user3182532

Bernd Wilke πφ Bernd Wilke πφ · Accepted Answer · 2018-08-16T08:48:22

if the HTML provided by the server is correct (as your code shows) the display can be influenced by two things:

CSS
Javascript
invalid HTML

possible problems with CSS can result from floats (or positions), which show content out of order in HTML.

with Javascript you can modify the build DOM, so elements are positioned in other order than originaly given.

Browser try to fix broken HTML, this might result in elements boxed inside each other than in line.

All possibilities can be examined with tools like Firebug. compare the DOM-Code with the original server-code (CTRL-U). Differences result from javascript or invalid HTML (e.g. missing closing tag).

CSS tweaks can be found inspecting the CSS of each element for CSS properties.

TYPO3: 2 news plugins on 1 page get mixed up

1 Answers