Bootstrap datetimepicker étrange positionnement sur un div différent

J’utilise bootstrap datetimepicker avec le formatage pour n’activer que le temps d’édition dans mon code, je le fais comme ceci:

function setTimepicker(object){ object.datetimepicker({ format: 'HH:mm' }); }

J’appelle cette fonction dans document.ready comme suit:

 $(document).ready(function(){ setTimepicker(starttimefield); setTimepicker(endtimefield); });

Le html que j’utilise ressemble à ceci:

    Create a New Event:
Bootstrap Datetimepicker plusieurs ensembles de sélecteurs liés sur une page
defaultDate et minDate avec Bootstrap Datetimepicker
Comment restreindre les min-time et max-time de bootstrap timepicker?
Définissez minDate sur Today dans Bootstrap DateTimePicker
Comment définir le sélecteur d’heure uniquement entre 8h30 et 20h30 dans le fichier bootstrap-datetimepicker.js?
 
 Description for main page: 
  
  Full description: 
  
    Event date: 
  Start time: 
  End time: 
 
  
  
 
   
 
 
  Location:  
 <input type="hidden" id="userid" value=""/>

À l’exception des fichiers css standard (jquery-ui.css, bootstrap-datetimepicker.css), j’ai ajouté un fichier css supplémentaire contenant:

 .wrapper { display: inline-block; width: auto; overflow: hidden; } .titles { width: 100px; float:left; } .values { overflow: hidden; margin-left: 100px; }

Maintenant pour le problème en question, les champs endtime et starttime devraient avoir un timepicker lorsque vous cliquez dessus (cela fonctionne), mais regardez où il rend le timepicker dans cette image:

entrez la description de l'image ici

Quelqu’un peut-il m’aider à placer cet élément timepicker à côté (ou au-dessus ou à proximité de quoi que ce soit) du champ auquel il appartient

Il vous manque un wrapper .input-group dont la valeur de position est “relative”. Puisque le sélecteur de date est parfaitement positionné, son conteneur doit être relativement positionné pour que le sélecteur de date soit correctement positionné.

Donc, je crois que quelque chose comme ceci fonctionnerait:

 .values { position: relative; overflow: hidden; margin-left: 100px; }

Mieux encore, fixons la position relative aux divs qui contiennent nos entrées comme suit:

 #starttimepicker { position: relative; } #endtimepicker { position: relative; }

Si vous voulez mon avis, ce n’est pas très sec. Si vous avez le contrôle sur le code HTML, vous pouvez essayer d’append une classe de “values__datepicker” (ou une classe quelconque) à #starttimepicker et #endtimepicker et définir une seule règle CSS comme suit:

 .values__datepicker { position: relative; }