Включить timepicker в таблицу с bootstrap-4 - PullRequest
Новая
       24

Включить timepicker в таблицу с bootstrap-4

0 голосов
/ 06 марта 2019

Я пытаюсь добавить timlepicker в html-таблицу с библиотеками JS bootstrap-4.min.js и moment-with-locales.min.js .

Для этого у меня есть HTML-таблица с вводом для таймера, это мой проект: https://jsfiddle.net/Geo_x/fv0oqdpx/12/

Проблема в том, что мой таймер не "на" моем столе, это "в«Мой стол:

enter image description here

Я пробовал position:relative и другие варианты, но это не было большим успехом.

Можете ли выПомогите мне, пожалуйста?

Спасибо.

Ответы [ 2 ]

1 голос
/ 06 марта 2019

используйте position:absolute для этого класса .bootstrap-datetimepicker-widget

.bootstrap-datetimepicker-widget{
  background-color:green;
  position:absolute;
}

проверьте обновленную скрипку здесь

0 голосов
/ 06 марта 2019

Я сделал фрагмент кода только HTML, который не должен включать «position: absolute;»Свойство CSS и делает ваш DateTimePicker намного более читабельным - тот, который у вас был, был зеленым на заднем плане с точками маркера без видимых стрелок увеличения и уменьшения.Мой фрагмент также включает в себя интерактивный значок календаря. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">       </script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<table class="contenu_popup">
  <col width=auto><col width=auto>
  <tr>
    <td id="test1">test line 1</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td id="test">TimePicker test</td>
    <td>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class='input-group date' id='datetimepicker3' style="margin-top:  5px">
          <input type='text' class="form-control"/>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div></td>
  </tr>
  <tr>
    <td id="test2">test line 3</td>
    <td><input type="text"/></td>
  </tr>
</table>
...