Largeur du panneau jQuery Mobile

Dans le nouveau jQuery mobile, il existe une nouvelle option de panneau. J’ai implémenté ceci et cela fonctionne, mais j’aimerais personnaliser la largeur du panneau. La largeur standard est de 272 pixels, ce qui est un peu trop pour moi. J’ai essayé d’utiliser le

.ui-panel{width:150px;} 

Sélecteur CSS, mais cela redimensionne simplement le contenu du panneau. Le panneau lui-même rest visible et rest de la même largeur. En utilisant les inspecteurs de Firefox et Chrome, je n’ai pas pu trouver le responsable correct de ce panneau. Quelqu’un pourrait-il m’aider à trouver un moyen de redimensionner le panneau de manière correcte?

Je l’ai compris! Ce n’est pas si complexe, vraiment. J’utilise moi-même simplement structure.css, mais si vous utilisez d’autres fichiers CSS, il se peut que vous deviez en personnaliser davantage. En tous cas…

En utilisant votre éditeur préféré, faites une recherche et un remplacement pour “17em” et remplacez-le par la valeur que vous souhaitez réellement. Il existe un style pour les panneaux de gauche et un style pour les panneaux de droite. Je ne voudrais pas précipiter tout ce processus car il pourrait y avoir un “17em” sans lien ici ou là. Cela prend juste une minute …

C’est une réponse simple mais je suis content de moi-même: p

J’ai eu le même problème moi-même et j’ai suivi le conseil de tylerl de remplacer 17em par la largeur dont j’avais besoin. Ce qui a bien fonctionné, à part le fait que j’utilisais Google cdn pour charger le css, je ne pouvais donc pas le changer directement et en général, je ne suis pas un grand partisan du changement de code de bibliothèque.

Donc, en jouant avec ça un peu, je suis arrivé avec ce code pour redéfinir les CSS par défaut de jquery mobile https://gist.github.com/geekdevs/5433246

Vous pouvez configurer la largeur des barres latérale gauche et droite séparément. Il s’agit d’un code MOINS, mais le simple fait de remplacer @ left-sidebar-width et @ right-sidebar-width par la largeur dont vous avez besoin fera que cela fonctionnera également pour CSS simple.

Ils montrent comment changer la largeur du panneau dans cette démonstration: http://jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html

Je ne voulais pas apporter de modifications au fichier css de la bibliothèque, j’ai donc essayé les correctifs ci-dessus, mais aucun d’entre eux ne fonctionnait avec jquery mobile 1.4.1.

J’ai dû append un peu plus de style pour le faire fonctionner.

Voici mon css modifié. (remplacez 10em et 15 em par vos tailles gauche et droite respectivement)

 .ui-panel { width: 10em; } .ui-panel.ui-panel-position-right { width: 15em; } .ui-panel.ui-panel-closed { width: 0; } .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push { -webkit-transform: translate3d(-10em, 0, 0); -moz-transform: translate3d(-10em, 0, 0); transform: translate3d(-10em, 0, 0) } .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push { -webkit-transform: translate3d(15em, 0, 0); -moz-transform: translate3d(15em, 0, 0); transform: translate3d(15em, 0, 0) } .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(10em, 0, 0); -moz-transform: translate3d(10em, 0, 0); transform: translate3d(10em, 0, 0) } .ui-panel-animate.ui-panel-page-content-position-left{ -webkit-transform: translate3d(10em, 0, 0); -moz-transform: translate3d(10em, 0, 0); transform: translate3d(10em, 0, 0); } .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(-15em, 0, 0); -moz-transform: translate3d(-15em, 0, 0); transform: translate3d(-15em, 0, 0) } 

Si vous ne souhaitez pas modifier globalement la taille, ajoutez-le à votre css personnalisé en ajoutant des ID si nécessaire, en modifiant 23em à la largeur souhaitée:

Note: Ceci est seulement pour le côté gauche.

 .ui-panel { width: 23em; } .ui-panel-position-left { left: -23em; } /* positioning: content wrap, fixed toolbars and dismiss */ /* panel left open */ .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open { left: 23em; right: -23em; } /* animated: panel left open (for reveal and push) */ .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(23em,0,0); -moz-transform: translate3d(23em,0,0); transform: translate3d(23em,0,0); } 

Je pense que vous avez fait une faute de frappe. Essayer

 .ui-panel { width: 150px; } 

ou si vous publiez cela en ligne, peut-être

  

Bien sûr, si nouveau que je suis, je peux me tromper.