Voor mijn website ben ik een formulier aan het maken, waar gebruikers bepaalde informatie in kwijt kunnen. Daar de in te voeren informatie voor de meeste gebruikers op een vastliggend rijtje gegevens gebaseerd is, maak ik gebruik van Ajax om suggesties te geven bij het invoerveld. Stel dat de invoer een plaatsnaam betreft en de A wordt ingetypt, dan komen suggesties als Apeldoorn, Amsterdam, enz... in een lijstje eronder. Je kent het vast wel.
Nu is mijn probleem alleen dat de content die onder dat inputveld staat naar beneden wordt geschoven wanneer het 'menuutje' uitklapt en dat het weer terugspringt als het 'menuutje' terugklapt na een keuze. Terwijl ik eigenlijk wil dat het uitgevouwen gedeelte met keuzes over de rest heen gaat. (Dus dat niet de rest van de pagina steeds heen en weer flippert)
Ik heb al met de css zitten stoeien, maar nog zonder resultaat. absolute, relative, z-index zijn wat termen waar ik op verschillende manieren mee aan het stoeien ben geweest, maar helaas nog zonder resultaat. Kan iemand me (op gang) helpen?
Ter informatie nog even het stukje css over het uitklapgedeelte:
Nu is mijn probleem alleen dat de content die onder dat inputveld staat naar beneden wordt geschoven wanneer het 'menuutje' uitklapt en dat het weer terugspringt als het 'menuutje' terugklapt na een keuze. Terwijl ik eigenlijk wil dat het uitgevouwen gedeelte met keuzes over de rest heen gaat. (Dus dat niet de rest van de pagina steeds heen en weer flippert)
Ik heb al met de css zitten stoeien, maar nog zonder resultaat. absolute, relative, z-index zijn wat termen waar ik op verschillende manieren mee aan het stoeien ben geweest, maar helaas nog zonder resultaat. Kan iemand me (op gang) helpen?
Ter informatie nog even het stukje css over het uitklapgedeelte:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| .suggestionsBox { z-index: 50; position: relative; left: 0px; width: 200px; background-color: #FFFFFF; border: 2px solid #0087B0; color: #0087B0; } .suggestionList { z-index: 50; margin: 0px; padding: 0px; } .suggestionList li{ margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; LIST-STYLE-TYPE: none; } .suggestionList li:hover { background-color: #0087B0; color: #FFFFFF; LIST-STYLE-TYPE: none; } |