web-dev-qa-db-fra.com

Positionnement Angular UI bootstrap Datepicker

J'ai un "petit" problème avec le datpicker angularjs ui. Je dois indiquer en quelque sorte, si une entrée avec un attachement de datepicker, devrait afficher la fenêtre contextuelle dans le coin inférieur gauche de l'entrée (par défaut)

enter image description here

ou si je le veux dans le coin inférieur droit de l'entrée à la place. En effet, dans une page que je crée, mon entrée est vraiment proche du côté droit de la page, et lorsque j'attache le sélecteur de date, cela se produit (le sélecteur de date est coupé et maintenant un défilement horizontal apparaît):

enter image description here

mais le fait est que j'ai besoin du sélecteur de date dans les deux positions (selon le cas lié aux images).

Quelqu'un sait comment résoudre ce problème? J'ai essayé de changer l'attribut left qui est en ligne dans le modèle de popup datepicker, mais c'est toujours une valeur fixe et je pensais que ce n'était pas la vraie option.

Merci

angularjsdatepickerangular-ui-bootstrap
21
abottoni

Si vous voulez implémenter une solution générale, c'est quelque chose qui ne peut pas être réalisé simplement en modifiant le modèle de datepicker-popup.

Vous devez modifier la fonction updatePosition à l'intérieur de la directive, afin que scope.position.left équivaut à quelque chose comme ceci:

 scope.position.left += scope.position.width - $position.position(popupEl).width;

Mais encore une fois, vous devez être sûr que vous "lisez" la largeur de la popuEl après qu'elle soit visible, sinon vous obtiendrez zéro. De plus, si vous passez à un autre mode (sélection du mois ou de l'année), la position n'est pas mise à jour bien que la largeur du popup puisse changer.

Je veux juste dire que cette fonctionnalité n'est pas un changement d'une ou deux lignes, et il est probablement préférable d'ouvrir une demande pour cela dans https://github.com/angular-ui/bootstrap/issues?state= open Quelqu'un pourrait vouloir approfondir cette question!

3
bekos

https://github.com/angular-ui/bootstrap/issues/1012

Hack laid:

<div class="hackyhack">
  <input datepicker-popup="...">
</div>

CSS magique:

.hackyhack {
  position: relative;
}
.hackyhack .dropdown-menu {
   left: auto !important;
   right: 0px;
 }
22
lincolnge

Désormais, les dernières versions angular-ui 1.2.0 et suivantes ont popup-placement option dans les paramètres uib-datepicker-popup.

Un résumé rapide de la documentation.

popup-placement (Par défaut: auto en bas à gauche, Config: 'placement') - Passer 'auto' séparé par un espace avant le placement permettra positionnement automatique, par exemple: "auto en bas à gauche". La fenêtre contextuelle tentera de positionner sa position dans l'ancêtre déroulant le plus proche. Accepte:

top - popup en haut, centré horizontalement sur l'élément d'entrée.

en haut à gauche - popup en haut, bord gauche aligné avec l'élément d'entrée bord gauche.

en haut à droite - popup en haut, bord droit aligné avec l'élément d'entrée bord droit.

bottom - popup en bas, centré horizontalement sur l'élément d'entrée.

en bas à gauche - popup en bas, bord gauche aligné avec l'élément d'entrée bord gauche.

en bas à droite - popup en bas, bord droit aligné avec l'élément d'entrée bord droit.

gauche - popup à gauche, centré verticalement sur l'élément d'entrée.

gauche en haut - popup à gauche, bord supérieur aligné avec l'élément d'entrée bord supérieur.

en bas à gauche - popup à gauche, bord inférieur aligné avec l'élément d'entrée bord inférieur.

droite - popup à droite, centré verticalement sur l'élément d'entrée.

en haut à droite - popup à droite, bord supérieur aligné avec l'élément d'entrée bord supérieur.

en bas à droite - popup à droite, bord inférieur aligné avec l'élément d'entrée Bord inférieur.

Dans votre cas, je pense que bottom-right marchera.

jouer avec ce plunker pour plus de détails.

7
vinesh

Cette solution CSS peut être plus simple que de modifier/pirater vos fichiers angular .js:

Enveloppez votre datepicker dans un div, puis remplacez le CSS de marge de la classe .dropdown-menu du datepicker:

<div id="adjust-left">
   <your-datepicker-here/>
<div>

Ensuite, dans le CSS:

#adjust-left .dropdown-menu{
    /* Original value: margin: 2px 0 0; */
    margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */
}
5
ForCripeSake

Oui, j'ai piraté mon fichier angular-ui.0.7.0.tpls.js comme décrit ci-dessus et cela a plutôt bien fonctionné:

function updatePosition() {
    scope.position = appendToBody ? $position.offset(element) : $position.position(element);
    scope.position.top = scope.position.top + element.prop('offsetHeight');

    var padding = 20; //min distance away from right side
    var width = popupEl.outerWidth(true);
    var widthOver =  $('body').outerWidth(true) - (scope.position.left + width + padding);

    if(widthOver < 0) {
        scope.position.left = scope.position.left + widthOver;
    }
}
3
John David Five