Application mobile, position absolute et scrollbar
Bonjour,
Mon application marche très bien sur navigateur standard, mais je découvre les joies des navigateurs mobiles…
Le principe : un tableau dont la première colonne est figée, et c'est ça mon vrai problème. Le reste peut être rempli avec des valeurs numériques.
Il me suffirait que ça marche sur un seul navigateur mobile android.
- Opera mini est éliminé parce qu'il me propose le clavier texte, et il refuse fermement de faire défiler le tableau.
- Firefox: quand je rentre une valeur, la colonne figée va se promener je ne sais pas où.
- Reste le navigateur standard d'android, qui me propose bien le clavier numérique et qui fait bien défiler le tableau, mais TOUT le tableau, même la première colonne. C'est pareil sous dolphin.
Comment faire que cette colonne soit figée aussi dans les affichages mobiles?
Voici mon code css, beaucoup de copié-collé…:
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| /* ………… Je n'ai pas copié le début, valable seulement pour les affichages standards */
@media (max-width: 640px) {
* {
box-sizing: border-box;
}
/*Ici je n'ai pas copié la partie concernant le menu*/
/* Le conteneur de la table, pour les ascenseurs */
#divtable{
position:relative;
margin-left: auto;
margin-right: auto;
/*min-height:260px;
height:260px;/*pour IE qui comprend rien, et qui ne reconnait pas min-height,
mais qui comprend mal height*/
min-width:200px;
width:90%;/*pour IE qui comprend rien*/
overflow-x:scroll;/*pour activer les scrollbarres*/
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */
color:black;
}
/* La table */
table.style1 {
border-width:1px;
border-style:solid;
border-color:black;
border-collapse:collapse;
padding:0;
}
td, th {
border-collapse:collapse;
border: 1px solid black;
padding:0;
}
/* Figer les deux premières colonnes */
.col_2{
position:absolute;
z-index:3;
margin-left:-2px;
height:20px;
border-collapse:collapse;
border: 1px solid black;
width: 120px;
}
/* Libérer à partir de la col3 */
.col_3{
margin-left:125px;
border-style: hidden;
padding-left:120px;
}
} |
Merci pour vos indications. J'aimerais ne pas faire une version spéciale mobiles…
