Colonne Widgets qui saute sur le portail du Forum.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Colonne Widgets qui saute sur le portail du Forum.

Message par Chezoit Mar 19 Oct 2021 - 16:49

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.  Affirmatif

Quelques captures d'écrans.:
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Colonne Widgets qui saute sur le portail du Forum.

Message par Oka.mi Mar 19 Oct 2021 - 22:03

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.
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Colonne Widgets qui saute sur le portail du Forum.

Message par Chezoit Mer 20 Oct 2021 - 23:20

Oka.mi a écrit:...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:

Oka.mi a écrit:....
Malheureusement, je ne peux pas tester de @ media via la console, ...
Je peux vous en communiquer un en mode admin, si besoin.
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Colonne Widgets qui saute sur le portail du Forum.

Message par Oka.mi Mer 20 Oct 2021 - 23:34

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%;
    }
  }
 

Chezoit a écrit: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.


Dernière édition par Oka.mi le Jeu 21 Oct 2021 - 9:19, édité 1 fois (Raison : petite correction du css : j'avais copié la mauvaise version de .colum:first-child !)
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Colonne Widgets qui saute sur le portail du Forum.

Message par Chezoit Jeu 21 Oct 2021 - 1:46

Tout fonctionnement parfaitement sur Ordi & IOS ! cheers
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 !
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Colonne Widgets qui saute sur le portail du Forum.

Message par Oka.mi Jeu 21 Oct 2021 - 9:21

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 !
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum