Placer une classe .dontCloseDropdown
sur chaque élément cliquable présent dans le Dropdown qui ne doit pas refermer ce dernier.
1 2 3 |
$('.dontCloseDropdown').on('click', function(e) { e.stopPropagation(); }); |
Placer une classe .dontCloseDropdown
sur chaque élément cliquable présent dans le Dropdown qui ne doit pas refermer ce dernier.
1 2 3 |
$('.dontCloseDropdown').on('click', function(e) { e.stopPropagation(); }); |
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.
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
:
1 2 3 4 5 6 7 8 9 |
<div class="input-group-btn open"> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" aria-expanded="true"> Choisir <span class="caret"></span> </button> <ul role="menu" class="dropdown-menu"> <li><a href="#">Par défaut</a></li> [...] </ul> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
:hover, &:focus, &.focus, &:active, &.active, .open > .dropdown-toggle& { text-decoration: none !important; color: @color !important; background-color: @background !important; border-color: @border !important; box-shadow: none; } |
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
.
1 2 3 4 5 6 7 8 9 10 11 12 |
&:hover, &:focus, &.focus, &:active, &.active, &.dropdown-toggle { text-decoration: none !important; color: @color !important; background-color: @background !important; border-color: @border !important; box-shadow: none; } |
Source : Resolve the conflict between Bootstrap 3 and PrototypeJS
.
Source : http://jsfiddle.net/dgervalle/hhBc6/.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
jQuery.noConflict(); if (Prototype.BrowserFeatures.ElementExtensions) { var disablePrototypeJS = function (method, pluginsToDisable) { var handler = function (event) { event.target[method] = undefined; setTimeout(function () { delete event.target[method]; }, 0); }; pluginsToDisable.each(function (plugin) { jQuery(window).on(method + '.bs.' + plugin, handler); }); }, pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip']; disablePrototypeJS('show', pluginsToDisable); disablePrototypeJS('hide', pluginsToDisable); } jQuery(document).ready(function ($) { $('.bs-example-tooltips').children().each(function () { $(this).tooltip(); }); }); |
Source : http://jsfiddle.net/dgervalle/e8Apv/.
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 |
require.config({ baseUrl: '/', paths: { 'jquery': "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min", 'bootstrap': "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min" }, shim: { 'bootstrap': ['jquery'] }, map: { '*': { 'jquery': 'jQueryNoConflict' }, 'jQueryNoConflict': { 'jquery': 'jquery' } } }); define('jQueryNoConflict', ['jquery'], function ($) { return $.noConflict(); }); if (Prototype.BrowserFeatures.ElementExtensions) { require(['jquery', 'bootstrap'], function ($) { // Fix incompatibilities between BootStrap and Prototype var disablePrototypeJS = function (method, pluginsToDisable) { var handler = function (event) { event.target[method] = undefined; setTimeout(function () { delete event.target[method]; }, 0); }; pluginsToDisable.each(function (plugin) { $(window).on(method + '.bs.' + plugin, handler); }); }, pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip']; disablePrototypeJS('show', pluginsToDisable); disablePrototypeJS('hide', pluginsToDisable); }); } require(['jquery', 'bootstrap'], function($) { $(document).ready(function () { $('.bs-example-tooltips').children().each(function () { $(this).tooltip(); }); }); }); |
© 2021 devfrontend.info
Theme by Anders Norén — Up ↑