28172 sujets

CSS et mise en forme, CSS3

Scrollbar

Bonjour à tous
J'ai une page quia l'aspect suivant:
upload/1579165874-48769-album-button.png
La barre de scroll permet de trouver le bouton désiré parmi une trentaine de boutons
Pour permettre de modifier les informations liées à un bouton j'aimerais pouvoir afficher une boîte de dialogue selon le modèle suivant, dans lequel la boîte de dialogue s'attache au bouton
upload/1579166120-48769-album-button2.png
Cela ne semble pas possible: si on affiche la barre de scroll, la zone scrollable est en pratique en overflowX:hidden, même si j'écris explicitement overflowX:visible
upload/1579166449-48769-album-button3.png
Par contre si je supprime overflowY:scroll ça affiche bien la totalité de la boîte de dialogue.
upload/1579167975-48769-album-button4.png
Connaissez vous un moyen de contourner ce problème? (à part changer la présentation de la page, bien entendu)
Merci de votre aide
Modifié par PapyJP (16 Jan 2020 - 10:46)
Modérateur
Salut,

Non aucune solution à ma connaissance, mise a part sortir la boite de dialogue et la positionner en dehors de la colonne lais bonne chance pour la coller au bouton depuis l'extérieur. C'est généralement la solution utilisée dans les framework (du moins dans Material).

On a beaucoup buté sur ce soucis et on a fini par utiliser le système de positionnement de material pour placer nos tooltips.

Sinon (mais ca demande une petite modif) tu peux imaginer que la colonne fait 100% de l'écran en largeur, avec une padding right équivalent au contenu. Le contenu viendrait par dessus la colonne (au dessus du padding du coup). Et la boite de dialogue pourrait etre positionné par dessus le contenu (si ni la colonne ni le contenu a un contexte de formatage plus fort)... Et encore pas sur que ça fonctionne c’est un bricolage que j'ai en tête mais faudrait tester...

Sinon faire en sorte que la boite de dialogue ne dépasse pas de la colonne. Ou faire une message fixe au centre de l'écran en dehors de la colonne...

Après si jamais quelqu'un a une solution.... je suis curieux de la connaitre !

Bonne journée
Jean-Pierre-Bruneau a écrit :
Salut,toi ! ,moi je te guiderais vers plus élégant avec du Flex sans doute,
chaque bouton qui en a besoins en dévoile 2/3/xx au passage non ? Smiley cligne

Tout dépend de la hauteur de l'écran.
Un défilement est un défilement, je ne vois pas ce que Flex pourrait y changer, mais il est vrai que je ne comprends pas grand chose à cette techno. Comme toujours la doc décrit les paramètres mais pas dans quel cas on s'en sert; il faudrait trouver des exemples similaires.
Si personne n'a de meilleure solution, je mettrai la boîte dialogue en position:fixed, mais ce comportement m'intrigue, je n'imaginais pas que la présence de la scrollbar verticale limitait la largeur de la balise.
_laurent a écrit :
Après si jamais quelqu'un a une solution.... je suis curieux de la connaitre!

Me too! Smiley cligne
Ce n'est pas les solutions alternatives qui manquent, y compris gérer en JS ce que le CSS ne fait pas, ce dont j'ai l'habitude.
J'ai été très surpris de découvrir ça hier soir, je pensais que c'était un problème de z-index, j'y ai passé des heures avant de faire l'essai ce matin de supprimer la scrollbar pour voir.
Je pense que mettre la boîte de dialogue en fixed est la solution la moins compliquée.
Non, j'ai besoin que <nav> puisse scroller pour trouver le bon bouton et que la zone de droite puisse également scroller pour parcourir le contenu.
Dans la version originelle (1999) il s'agissait de 2 <frame>, mais bien entendu je n'avais pas utilisé de boîtes de dialogue en dehors du bouton: la boîte de dialogue se superposait au bouton. En refaisant la page ces derniers temps, j'ai pensé mettre la boîte de dialogue au dehors, mais c'est là que j'ai trouvé le problème (pas grave, mais agaçant comme tout ce qu'on n'arrive pas à faire).
Salut Papy.

Est-il possible de tester tout cela qqpart avec une url ? ou un codepen/jsfiddle ou autre ?

là de tête c'est un peu hard.
Modifié par JENCAL (16 Jan 2020 - 14:19)
JENCAL a écrit :
Salut Papy.

Est-il possible de tester tout cela qqpart avec une url ? ou un codepen/jsfiddle ou autre ?

là de tête c'est un peu hard.

C’est une page d’administration avec un aspect réservé. Je peux essayer de faire une maquette accessible mais ça va me prendre du temps.
Jean-Pierre-Bruneau a écrit :
en 30 secondes tu copie colles dans tes.htm c'est complet ! et aucun javascript ou autre .....

Je peux essayer
Quelque chose qui pourrait marcher:
1) mettre la boîte de dialogue en position:relative sans fournir de top
Elle s'affiche alors juste au dessous du bouton
2) interdire le scroll tant que la boîte est active, ce qui interdit que le bouton change de place alors que la boîte de dialogue reste en place
3) ne pas oublier de rendre le scroll possible à la fermeture de la boîte
Qu'en pensez vous?
euh... mettre le scroll on/off ne semble pas facile à réaliser
quelqu'un a-t-il une expérience dans ce domaine?
A propos (comme on dit quand ça n'a rien à voir) j'ai profité de ce que je refaisais cette page pour me mettre aux flexbox. C'est effectivement très riche, puissant et relativement facile d'emploi.
Merci à Raphaël et son bouquin ! https://goetter.fr/livres/flexbox/
Modifié par PapyJP (17 Jan 2020 - 13:09)
Sujet clos
Aller à