Forum Portal

[Fred Rimbert]

What if I told you that the issue is happening with Firefox?
I just tested with Chrome, Safari, and LibreWolf, and everything is fine.

[Chico Gois]

Send me the link to your test so I can run it in Firefox.

[Fred Rimbert]

In this post: viewtopic.php?p=210#p210

[Chico Gois]

Erreur 404 - Page introuvable

[Fred Rimbert]

Oops, I just reactivated the extension. Sorry

[Chico Gois]

Try disabling the left-hand menu where it says "Useful links" and see if that changes anything.

[Chico Gois]

Analysis of the issue with the right-side blocks in the portal

Based on the observed behavior, the extension appears to be generating the structure correctly. Since the same portal works properly on other templates, including paid ones, the issue is probably not in the extension itself.

The most likely cause is that, in the specific environment of demo.caforum.fr, some content, CSS rule, or width configuration is causing the central column to take up too much space. When this happens, the right-side column no longer fits beside it and is pushed downward.

Possible causes

1. Wide content inside the central column

Some content may be forcing the main area to become wider than expected, such as:

• Image without a width limit
• Wide table
• Iframe
• Code inside

  Código: Selecionar todos

  pre

  or

  Código: Selecionar todos

  code

• Very long link
• Technical text without line breaks

This can make the central column grow beyond the expected width and push the right-side column downward.

Recommended CSS:

Código: Selecionar todos

.portal-center,
.portal-center *,
.portal-main,
.portal-main * {
	max-width: 100%;
	box-sizing: border-box;
}

.portal-center img,
.portal-center iframe,
.portal-center video,
.portal-center table {
	max-width: 100%;
	height: auto;
}

.portal-center pre,
.portal-center code,
.portal-center .content {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}

2. Missing

Código: Selecionar todos

min-width: 0

if the layout uses flex[/b]

If the portal layout uses

Código: Selecionar todos

display: flex

, the central column needs:

Código: Selecionar todos

.portal-center {
	min-width: 0;
}

Without this, the browser may prevent the central column from shrinking correctly, especially when there is wide content inside it.

Suggested fix for a flex layout:

Código: Selecionar todos

.portal-wrapper,
.portal-container,
.portal-columns {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.portal-center {
	flex: 1 1 auto;
	min-width: 0;
}

.portal-right {
	flex: 0 0 240px;
	max-width: 240px;
}

3. The style CSS may be interfering with the portal

Even if the extension works correctly on other templates, this specific style may have a rule overriding the expected behavior.

It is worth checking in DevTools whether any rule is affecting classes such as:

Código: Selecionar todos

.portal-right
.portal-column-right
.portal-center
.portal-column-center
.portal-container
.portal-wrapper
.rightside
.sidebar
.panel
.column
.content

Sometimes a generic theme class, such as

Código: Selecionar todos

.content

,

Código: Selecionar todos

.panel

, or

Código: Selecionar todos

.column

, ends up interfering with the portal blocks.

4. The total column width may be larger than the container

It is also important to check whether the real sum of the columns exceeds 100%.

Problematic example:

Código: Selecionar todos

Left column + central column + right column + gap + padding + border > 100%

Even if it looks visually correct, values such as:

Código: Selecionar todos

Center: 75%
Right: 25%
Gap: 20px
Padding: 15px

can exceed the total available width and cause the right-side column to drop below.

A safer configuration would be to use a fixed width for the right-side column:

Código: Selecionar todos

.portal-right {
	flex: 0 0 220px;
	max-width: 220px;
}

or:

Código: Selecionar todos

.portal-right {
	flex: 0 0 240px;
	max-width: 240px;
}

Conclusion

The extension appears to be outputting the correct structure. The issue is probably related to the CSS or to specific content in the environment where the right-side column is dropping down.

The most robust fix would be:

1. Add

   Código: Selecionar todos

   min-width: 0

   to the central column.
2. Limit images, iframes, videos, and tables with

   Código: Selecionar todos

   max-width: 100%

   .
3. Force wrapping on

   Código: Selecionar todos

   pre

   ,

   Código: Selecionar todos

   code

   , long links, and long text.
4. Check whether the style CSS is overriding the portal classes.
5. Confirm that the total width of columns, gaps, and paddings does not exceed the container.