Bootstrap datetimepicker странное позиционирование на другом div в целом

Я использую bootstrap datetimepicker с форматированием, чтобы включить только время редактирования в моем коде, я делаю это так:

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

Я вызываю эту функцию в document.ready вот так:

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

HTML, который я использую, выглядит следующим образом:

<div class="panel-body">
    <form id="myform">
         <p> <b>Create a New Event:</b></p>                                      
         <br>
         <p>Description for main page: <br>
            <textarea id="summary" name="summary" maxlength="100"></textarea>
         </p>
         <p> Full description: <br>
            <textarea id="description" name="description" maxlength="500"></textarea>
         </p>
         <div class="wrapper">
             <div class="titles">
                 <p> Event date:  
                 </p>
                 <p> Start time:                                         
                 </p>                                        
                 <p> End time:    
                 </p>
                 </div>
                 <div class="values">
                     <input type="text" id="eventdate" readonly/><br>
                     <div id="starttimepicker">
                         <input type="text" id="starttime" onkeydown="return false"/><br>
                     </div>
                     <div id="endttimepicker">
                         <input type="text" id="endtime" onkeydown="return false"/>                                            
                     </div>
                 </div>
            </div>
            <p> Location: <input type="text" id="location"/> </p>

            <p><input type="hidden" id="userid" value="<?php echo Auth::id();?>"/></p>
            <p><input id="saveevent" type="button" value="Save Event" />
                                        </p>
     </form>
</div>

За исключением стандартных файлов css (jquery-ui.css, bootstrap-datetimepicker.css), я добавил 1 дополнительный файл css, который содержит:

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

Теперь, что касается рассматриваемой проблемы, поля endtime и starttime должны иметь указатель времени при нажатии (это работает), но посмотрите, где он отображает указатель времени на этом изображении:

введите описание изображения здесь

Может ли кто-нибудь помочь мне получить этот элемент timepicker рядом (или над или рядом с чем угодно) с полем, которому он принадлежит


javascript html jquery css bootstrap-datetimepicker
person Jeremy C.    schedule 10.06.2015    source источник
comment
Используйте компонент пользовательского интерфейса сплава, он также использует JQuery для базовой структуры javascript   -  person Hardik Gajjar    schedule 10.06.2015
comment
Извините, я действительно новичок во всем этом (серверный разработчик), не могли бы вы объяснить, что получить и как это использовать в ответе?   -  person Jeremy C.    schedule 10.06.2015
comment
Джереми С. Просто изучите интерфейс Alloy, и вы получите всю информацию.   -  person Hardik Gajjar    schedule 10.06.2015

Ответы (1)


arrow_upward
5
arrow_downward

Вам не хватает .input-group оболочки со значением позиции "relative". Поскольку datepicker абсолютно позиционирован, контейнер должен быть относительно позиционирован, чтобы datepicker располагался правильно.

Поэтому я считаю, что что-то вроде этого сработает:

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

А еще лучше, давайте установим относительную позицию для div, которые на самом деле содержат наши входные данные, вот так:

#starttimepicker {
  position: relative;
}

#endtimepicker {
  position: relative;
}

Если вам интересно мое мнение, оно не очень СУХОЕ. Если у вас есть контроль над html, вы можете попробовать добавить класс «values__datepicker» (или любой другой класс) в #starttimepicker и #endtimepicker и установить только одно правило CSS следующим образом:

.values__datepicker {
  position: relative;
}
person Leo Bauza    schedule 10.06.2015
comment
это немного улучшило его (теперь в правильном положении), но теперь он не отображает элемент выбора, смотрите здесь oi61. tinypic.com/20giq36.jpg - person Jeremy C.; 10.06.2015
comment
Да, у вас overflow установлено как скрытое. Я не был уверен, зачем вы это делаете, но это скроет абсолютно все, что вам нужно. Если он вам ни для чего не нужен, удалите его. Если вам это нужно для чего-то, дайте мне знать, что это за что-то, и мы можем попробовать лучшее решение. - person Leo Bauza; 10.06.2015
comment
Честно говоря, у меня это есть, потому что я использовал код копирования и вставки, который я получил откуда-то, когда я пытался выстроить 2 блока рядом друг с другом, и я абсолютно ничего не знаю о css или стиле в целом: D, но спасибо, это помогло - person Jeremy C.; 10.06.2015
comment
@leubauza Я только что заметил, что таймпикер для времени начала на самом деле отображается в нужном месте, но тот, который для конечного времени отображается над полем для даты, а не для времени окончания, вы знаете, в чем может быть проблема? - person Jeremy C.; 10.06.2015
comment
Итак, мы установили position: relative в контейнере .values, чтобы все было расположено в соответствии с этим. Что я сейчас вижу, не совсем идеально. Итак, см. Мой пост для получения обновленного ответа. - person Leo Bauza; 10.06.2015
comment
вы человек-спасатель, я ничего не знаю о позиционировании в css, но вы действительно помогли мне понять, теперь он работает, как требуется, большое спасибо - person Jeremy C.; 10.06.2015