Colonne Widgets qui saute sur le portail du Forum.

[Chezoit]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Bonne question...
Lien du forum : http://www.revopowaaa.com

Description du problème

Bonjour,

Comme noté dans le titre; sur le portail du Forum, j'ai la colonne des Widgets (à droite), qui saute quand on rétrécit la fenêtre du navigateur.

Il faut savoir aussi que j'ai un Script, qui les fait justement sauter exprès sur le forum (pour plus de confort de lecture)

Il y aurait-il un Script pour forcer les Widgets sur le portail du Forum ? Tout en gardant l'action de suppression dans les sujets du forum.

Merci à ceux qui pourraient m'aider.  

Quelques captures d'écrans.:

[Oka.mi]

Bonjour,

Si j'ai bien compris, vous voulez que les widgets s'affichent malgré la réduction de la fenêtre, et ce sur toutes les pages sauf l'affichage d'un sujet ?

Pour comprendre ce qui se passe avec votre portail, en fait, vous avez la colonne de droite qui a une largeur de 100%, or dans le css de base de votre forum, il y a :

Code:

@media (max-width: 900px) {
    .portal .column:first-child {
    display: none;
    }
}

ce qui veut dire que si la largeur de la fenêtre descend en-dessous de 900px, colum:first-child disparaît.
Or le colum:first-child ici c'est le bloc des news, et quand il disparait, la colonne de droite prend 100% de largeur, d'où le fait que ça prenne toute la place et donne l'impression de "sauter".

Malheureusement, je ne peux pas tester de @ media via la console, donc je ne sais pas si ça marchera, mais vous pouvez mettre dans votre css personnalisé :

Code:

@media (max-width: 900px) {
    .portal .column:first-child {
    display: initial !important;
    }
}

pour essayer de corriger ça.

Pour les autres pages, vous pouvez mettre ça pour commencer :

Code:

@media (max-width: 1200px) {
   #content-container #content-main {
   width: 75%;
    }
  #content-container #right {
   display: initial !important;
    }
  }

@media (max-width: 1070px) {
   #content-container #content-main {
   width: 70%;
    }
  }

@media (max-width: 1000px) {
   #content-container #content-main {
   width: 65%;
    }
  }

La colonne est tout de même déplacée en bas du forum au bout d'un moment, mais c'est le principe car il s'adapte à la taille de l'écran. Au moins il ne disparaît plus, et j'ai diminué la limite de largeur avant qu'il ne soit déplacé. Je ne sais pas si c'est ce que vous voulez.

[Chezoit]

...Si j'ai bien compris, vous voulez que les widgets s'affichent malgré la réduction de la fenêtre, et ce sur toutes les pages sauf l'affichage d'un sujet ?
...

Yes, parfaitement.

Avant tout, merci pour votre aide.

J'ai inséré les 2 groupes CSS, que vous m'avez donnés. Ça fonctionne parfaitement sur les Navigateurs ordi.

Par contre sur IOS, les Widgets sont revenus dans les sujets et une distance énorme est apparue entre les colonnes de droite et celle centrale. Je n'ai pas pu tester sur Android.

Captures d'écran:

....
Malheureusement, je ne peux pas tester de @ media via la console, ...

Je peux vous en communiquer un en mode admin, si besoin.

[Oka.mi]

Bonsoir,

Merci pour le retour !
Alors, je vais commencer par vous donner la nouvelle version du JavaScript qui sert actuellement à enlever les widgets sur la page d'affichage d'un sujet :

Code:

$(function() {
  $('#content-container #right').remove();
  $('#content-container #container').css('width', '100%');
  $('#content-container #content-main').attr('style', 'width: 100% !important');
});

Ca règlera le souci de la réapparition des widgets si vous réduisez la fenêtre d'un sujet affiché.

Ensuite, pour corriger la distance entre les colonnes, on va augmenter le % de largeur spécifié par les deux derniers @ media et les regrouper pour que la transition soit plus douce. Ce qui donne comme ajouts CSS (je reprends tout pour que ce soit plus simple à copier-coller pour vous) :

Code:

@media (max-width: 900px) {
    .portal .column:first-child {
    display: initial !important;
    }
}

@media (max-width: 1200px) {
  #content-container #content-main {
  width: 75%;
    }
  #content-container #right {
  display: initial !important;
    }
  }
 
@media (max-width: 1070px), @media (max-width: 1000px) {
  #content-container #content-main {
  width: 72%;
    }
  }
 

Par contre sur IOS, les Widgets sont revenus dans les sujets

Sur ce point je ne suis pas sûre d'avoir compris si vous parlez juste de l'affichage d'un sujet, ou de l'affichage des sujets (dans un sous-forum quoi). Si vous voulez aussi que ça s'applique sur les sous-forums, vous avez l'option à cocher dans la gestion du JavaScript. Le JS que j'ai donné plus haut sert justement à corriger la réapparition des widgets due aux @ media que j'ai ajoutés.

[Chezoit]

Tout fonctionnement parfaitement sur Ordi & IOS !
Il faut que je teste sur Android.

J'ai juste touché :
Sur le Script : ... 'width: 100% !important' je l'ai passé à 'width: 97% !important' (ça déborder un peu)
Sur le CSS : ...width: 72%; je l'ai passé à 76%.

Un grand Merci !

[Oka.mi]

De rien !
Petite précision par rapport à mon précédent post : c'est bien display initial pour le column:first-child, j'ai copié la mauvaise version du code, mais je vois que ça s'affiche bien chez vous donc vous n'avez pas dû reprendre l'erreur.
J'ai quand tenu à corriger la coquille pour les autres qui auront besoin du code !