Étiquette : dropdown

[jQuery][CSS][Internet Explorer] Bug de détection de la pseudo-classe :hover ou de l’événement mouseover sur une bordure CSS

Problème:

Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.

Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).

Solution:

Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.

La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.

Le code CSS généré est le suivant:

Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :

Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure:

[Bootstrap][Foundation] Bug du composant Dropdown sur iPad et iPhone

Problème: les composants Dropdown de Bootstrap et Foundation ne s’activent pas sur iPad et iPhone alors qu’ils fonctionnent sur n’importe quel périphérique sous Android.

Solution: il s’agit juste d’un problème de markup. Il faut obligatoirement utiliser l’élément <button type="button">Mon dropdown qui fonctionne sur les mobiles d'Apple</button> et surtout pas l’élément <a> (même avec un attribut role="button".

Moralité: Apple, c’est de la grosse daubasse.

[jQuery] Simuler un élément Select à partir d’une liste HTML

select-ul

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

  1. Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
  2. Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
  3. Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

[jQuery] Centrer horizontalement la partie déroulée d’un menu sur un libellé dont la largeur peut varier

horizontally_centered_dropdown

TODO : gérer les limites droite/gauche de la page.

Markup HTML :

Code jQuery :

[Bootstrap] Caler sur les limites droite d’une page la partie déroulée d’un menu horizontal lui même aligné à droite

Il peut arriver qu’une charte prévoit un menu géant horizontal qui soit aligné sur les limites droite de la page et déroulant (dropdown menu Bootstrap).

bootstrap-drodown_menu-align_right-01

Attention : la classe .right-stack n’existe pas dans Bootstrap. Elle se réfère à une <div> qui englobe l’ensemble du menu horizontal. Sa présence est importante au bon fonctionnement de cette astuce.

[Bootstrap] Changer l’aspect (couleurs de fond, de texte et de bordure) d’un bouton dropdown lorsqu’on clique sur tout autre élément dans la page.

Les Buttons dropdowns dans la doc officielle de Bootstrap : http://getbootstrap.com/components/#btn-dropdowns.

Structure HTML; notez bien les emplacements des classes .open et .dropdown-toggle :

Problème :

pbm-btn-dropdown

Le navigateur ne tient pas compte de mes surcharges CSS. Ce sont les styles standards de .btn-default qui prennent le pas sur la ré-écriture.

Remarque : le code ci-dessous utilise le caractère & comme alias de la classe .btn-default. Il s’agit d’une version LESS des styles Bootstrap.

Solution :

Le code CSS fourni avec Bootstrap est erroné : en regard du markup HTML énoncé plus haut, la classe .open n’existe pas dans la chaîne .open > .dropdown-toggle& (ou .open > .dropdown-toggle.btn-default). Le chemin correct serait &.dropdown-toggle.

[Bootstrap] Navbar et dropdown : un menu déroulant qui pousse le contenu au lieu de s’afficher par dessus.

Ce type de comportement peut-être utilisé dans le cadre d’une adaptation pour supports mobiles d’un site desktop.

bootstrap-dropdown-customisation

Code pour un comportement standard

Code standard de Bootstrap, comme vu dans la doc officielle. Le sous menu s’ouvre par-dessus le contenu. La partie .navbar-header et la partie .collapse sont solidaires (imbriquées dans la même <nav class="navbar" />).

Code pour un sous-menu qui va pousser le contenu

Le sous menu pousse le contenu vers le bas. On désolidarise la partie .navbar-header de la partie .collapse.
Attention : l’attribut data-target=".js-navbar-collapse" de <button class="navbar-toggle" /> doit avoir le même libellé que la classe sur le <div class="collapse" />.

[Magento] Résoudre le conflit de dropdown entre Bootstrap 3 et PrototypeJS

Source : Resolve the conflict between Bootstrap 3 and PrototypeJS
.

Composants Bootstrap affectés :

  • Collapsible components useful for building accordion and navigation.
  • Dropdown menus : quand le menu se ferme, il disparaît entièrement.
  • Modal dialogs
  • Tootips

Solution sans chargement des librairies JavaScript via CMD :

Source : http://jsfiddle.net/dgervalle/hhBc6/.

Solution avec chargement des librairies JavaScript via CMD :

Source : http://jsfiddle.net/dgervalle/e8Apv/.