l'INTERFACE utilisateur de jQuery inline Datepicker de redimensionnement automatique de conteneur parent

Je suis à l'aide de la réactivité du système de grille de twitter bootstrap avec jquery ui datepicker.
J'ai un inline datepicker à l'intérieur d'une 'ligne', 'spanX structure comme suit:

<div class="row">      
<div class="span3 widget">      
<div id="datepicker"></div>
</div>
...
</div>

jQuery('#datepicker').datepicker({
inline: true,
    ...
})

La manière suggérée pour le redimensionnement le composant est en substituant la taille de police.
Cependant, ce n'est pas très utile si je veux garder le Datepicker de la taille dépend de la taille de la spanX conteneur parent alors que la fenêtre est de taille ou de différentes résolutions.

Est-il une manière élégante garder le inline Datepicker à 100% de la largeur,de la hauteur du conteneur parent?

InformationsquelleAutor olokki | 2012-09-25
  1. 3

    essayer quelque chose comme cela:

    function datepResize() {

    //Get width of parent container
    var width = jQuery("#calendar").width(); //attr('clientWidth');
    if (width == null || width < 1){
        //For IE, revert to offsetWidth if necessary
        width = jQuery("#calendar").attr('offsetWidth');
    }
    width = width - 2; //Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        //Only resize if new width exceeds a minimal threshold
        //Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery("div ui-datepicker").width()) > 5)
    {
        if (width < 166){
            jQuery("div.ui-datepicker").css({'font-size': '8px'});
            jQuery(".ui-datepicker td .ui-state-default").css({'padding':'0px','font-size': '6px'});
        }
        else if (width > 228){
            jQuery("div.ui-datepicker").css({'font-size': '13px'});
            jQuery(".ui-datepicker td .ui-state-default").css({'padding':'5px','font-size': '100%'});

        }
        else{
            jQuery("div.ui-datepicker").css({'font-size': (width-43)/16+'px'});
        }
    }

}

    Il vous donne une taille prédéfinie pour chaque réaction de transformation de bootstrap fait.

    • Merci Copain 😉 vous avez résolu mon problème
    InformationsquelleAutor lokira
  2. 2

    C'est avec sass

    your-container{
  .ui-datepicker {
    width: 99%;
    padding: 0;
  }
  .ui-widget {
    font-size: 0.9em;
  }
  .ui-datepicker table {
    font-size: 0.7em;
  }
}

    Vous pouvez modifier les valeurs jusqu'à ce que vous voyez une taille de police, le remplissage et la largeur que vous souhaitez.

    • Fonctionne très bien. Fonctionne également avec less. Ajouter un max-width: sur your-container de sorte qu'il ne soit pas trop large.
    InformationsquelleAutor juanpastas