Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Débutant - Ajustement de la taille d’une popup au contenu

5 réponses
Avatar
DM
Bonjour à tous,

J’ai une popup contenant un élément <select> et des options et je
voudrais qu'à l'ouverture sa taille s’adapte au contenu.

<select name="idAide" multiple="multiple" id="liste">
<option value="1">1</option>
<option value="2">2</option>
</select>

Je pense utiliser la méthode resizeTo(largeur, hauteur) mais je ne sais
pas comment récupérer la largeur du contenu .... avec une instruction
utilisant document.getElementById('liste')

Je ne connais pas du tout Javascript ;-)

Merci d’avance

5 réponses

Avatar
ASM
Bonjour à tous,

J’ai une popup contenant un élément <select> et des options et je
voudrais qu'à l'ouverture sa taille s’adapte au contenu.

<select name="idAide" multiple="multiple" id="liste">
<option value="1">1</option>
<option value="2">2</option>
</select>

Je pense utiliser la méthode resizeTo(largeur, hauteur) mais je ne sais
pas comment récupérer la largeur du contenu .... avec une instruction
utilisant document.getElementById('liste')


Tu veux que quand on déplie la liste ça allonge la fenêtre d'autant ?
Je doute qu'on y arrive facilement :
- au clic sur le select pour lui donner le focus
hop! il déplie la liste dans l'espace disponible
si on demande alors d'agrandir la fenêtre, c'est trop tard
- on peut tenter le mouseover (sans garantie) ?

Pour récupérer la largeur, le mieux est en fait de fixer (en px) celle
du select et des options si possible via css, comme ça on n'a pas à s'en
pré-occuper.
Comme de ttes façons tu as l'air de ne pas t'occuper de l'accessibilité,
ce n'est pas à ça près.

Supposons un popup width00 height%0

<select name="idAide" multiple="multiple" id="liste"
onmouseover="var h = this.options.length*20;
h = (h>200)? 200 : h;
window.resizeTo(300,(+230+h));"
onmouseout="window.resizeTo(300,250);"
onchange=" blabla ... >

en espérant que ça ne file pas le mal de mer ;-)

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
DM
Merci pour ta réponse.
Je souhaite simplement qu'à l'ouverture de la popup, sa largeur soit
égale à celle du champ <select>


Bonjour à tous,

J’ai une popup contenant un élément <select> et des options et je
voudrais qu'à l'ouverture sa taille s’adapte au contenu.

<select name="idAide" multiple="multiple" id="liste">
<option value="1">1</option>
<option value="2">2</option>
</select>

Je pense utiliser la méthode resizeTo(largeur, hauteur) mais je ne
sais pas comment récupérer la largeur du contenu .... avec une
instruction utilisant document.getElementById('liste')



Tu veux que quand on déplie la liste ça allonge la fenêtre d'autant ?
Je doute qu'on y arrive facilement :
- au clic sur le select pour lui donner le focus
hop! il déplie la liste dans l'espace disponible
si on demande alors d'agrandir la fenêtre, c'est trop tard
- on peut tenter le mouseover (sans garantie) ?

Pour récupérer la largeur, le mieux est en fait de fixer (en px) celle
du select et des options si possible via css, comme ça on n'a pas à s'en
pré-occuper.
Comme de ttes façons tu as l'air de ne pas t'occuper de l'accessibilité,
ce n'est pas à ça près.

Supposons un popup width00 height%0

<select name="idAide" multiple="multiple" id="liste"
onmouseover="var h = this.options.length*20;
h = (h>200)? 200 : h;
window.resizeTo(300,(+230+h));"
onmouseout="window.resizeTo(300,250);"
onchange=" blabla ... >

en espérant que ça ne file pas le mal de mer ;-)




Avatar
ASM
Merci pour ta réponse.
Je souhaite simplement qu'à l'ouverture de la popup, sa largeur soit
égale à celle du champ <select>


je sais pas faire
m'etonnerais qu'on y arrive ...

la largeur va varier selon la taille des caractères (que le visiteur
peut choisir lui-même)
Ce choix n'est pas récupérable (à ma connaissance) via JS

il te reste à prévoir ton popup redimensionnable manuellement.

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
DM
Je vais voir ce que je peux faire ;-)
merci

Merci pour ta réponse.
Je souhaite simplement qu'à l'ouverture de la popup, sa largeur soit
égale à celle du champ <select>



je sais pas faire
m'etonnerais qu'on y arrive ...

la largeur va varier selon la taille des caractères (que le visiteur
peut choisir lui-même)
Ce choix n'est pas récupérable (à ma connaissance) via JS

il te reste à prévoir ton popup redimensionnable manuellement.




Avatar
Jean-Marc Molina
DM wrote:
J’ai une popup contenant un élément <select> et des options et je
voudrais qu'à l'ouverture sa taille s’adapte au contenu.

<select name="idAide" multiple="multiple" id="liste">
<option value="1">1</option>
<option value="2">2</option>
</select>

Je pense utiliser la méthode resizeTo(largeur, hauteur) mais je ne
sais pas comment récupérer la largeur du contenu .... avec une
instruction utilisant document.getElementById('liste')


Il vaut mieux utiliser un bloc "div" flottant (CSS), qui se redimensionnera
automatiquement au contenu, plutôt qu'une "popup". Donc plutôt que d'ouvrir
une "popup" il te faut faire apparaît le bloc dans lequel il y a ton
formulaire.