Liste déroulante avec bootstrap et CSS

Version imprimable

28/01/2018, 21h28
Fredy007

Liste déroulante avec bootstrap et CSS
Bonjour,

J'ai crée une liste déroulante, et juste au-dessous des champs type input number, quand je clique sur catégorie, j'obtiens la liste, mais les champs dessous apparaissent sur la liste, si je supprimer la ligne de la source bootstrap, aucun soucis:
Code:

1 2 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Voici la DEMO

Merci a vous

Salut

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.listItems{
  position: absolute;
  display: none;
    width: auto;
    width: 90%;
    height: auto;
    max-height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
    list-style-type: none;
    list-style-position: inside;
    margin: 2px 0px 0px 0px;
    padding: 2px 0px 0px 3px;
    line-height: 1em;
    cursor: pointer;
    background-color: white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 2px 2px 3px 2px #666;
    -webkit-box-shadow: 2px 2px 3px 2px #666;
    box-shadow: 2px 2px 3px 2px #666;
    z-index:1;
}

Ligne 23 en plus: z-index:1;

29/01/2018, 12h37
Fredy007

Bonjour ProgElecT,

En ajoutant la ligne 23, aucun changement n'est effectué.

DEMO
29/01/2018, 14h14
ProgElecT

2 pièce(s) jointe(s)

Re

Depuis ton lien DEMO donc avec z-index:1,
Je pensai que tu voulais ça
Pièce jointe 346465

Et non pas ça (z-index:1 enlevé)
Pièce jointe 346459
29/01/2018, 14h39
Fredy007

2 pièce(s) jointe(s)

Voila, j'ai pris un screenshot avec les champs, le champs superficie en type input number, apparaissait dedans la liste:

DEMO

Pièce jointe 346490
29/01/2018, 15h01
NoSmoking

Bonjour,
il faut tenir compte des z-index de tes <input>, donc augmente le z-index de ta class listItems.
29/01/2018, 18h40
Fredy007

Merci NoSmoking et ProgElecT, ça marche, DEMO