Archive

Archive for the ‘Web en général’ Category

Input type= »date » (HTML5) : problème avec Chrome 25 et bootstrap

mars 1, 2013 2 commentaires

Je partage juste ce lien au cas où certains développeurs tombent sur ce problème

http://stackoverflow.com/questions/15070600/why-has-the-behavior-of-input-type-date-changed

Problème

Dans la version 24 de Chrome (et probablement certaines versions antérieures qui supportent le Html5), le champ <input type= »date » …/> affiche par défaut un calendrier (picker). Comme nous montre la copie d’écran suivant (sur w3cschools)

datepicker

 

Bizarrement, dans la version 25, lorsqu’on combine les CSS avec bootstrap, le picker disparaît. Par élimination, en regardant le fichier bootstrap.css (la dernière version à ce jour sur le http://twitter.github.com/bootstrap), on peut constater que le style responsable de la disparition du picker est : « display:inline-block », qui est ajouté pour tous les champs input. Le problème, c’est qu’on ne peut pas, par css, supprimer ce style, on ne peut que lui assigner une autre valeur. Et en tâtonnant sur toutes les valeurs possibles de display, cela ne change absolument rien !

Solution (trouvée sur le lien stackoverflow cité en haut)

Ajouter un hack spécial au webkit de chrome dans le fichier css du site ou de l’application :

input[type= »date »]::-webkit-calendar-picker-indicator{
display:inline-block;
margin-top:2%;
float:right;
}
input[type= »date »]::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
}

Ce hack signifie juste :

– faites flotter mon picker vers le haut

– faites disparaître le spinner qui gène l’affichage du picker.

Et voilà voilà !

 

 

Publicités
Catégories :Web en général