Datetime сборщик наследует стиль от моего стола

Я использую DatePicker от eonasdan (https://github.com/Eonasdan/bootstrap-datetimepicker)Datetime сборщик наследует стиль от моего стола

Он отлично работает, но когда я положил его в таблице, он наследует стиль таблицы. Это похоже на то, что datepicker также становится таблицей.

Как я могу избежать этого?

У меня есть следующие в моем CSS:

table.table { 
    tr { 
     th { 
      color: #ff0000; //red 
     } 
    } 
    }

Это мой HTML-файл:

<table class="table"> 
    <tr> 
     <th>Reconcile Date</th> 
    </tr> 
    <tr> 
     <td> 
     <div class="pickdate"> 
      <input type="text" placeholder="Reconcile Date" class="form-control "> 
     </div> 
     </td> 
    </tr> 
</table>

Устанавливает текст в моем заголовке таблицы на красный. Он также устанавливает дни недели и месяца в моем datepicker на красный. Обратите внимание на класс pickdate загрузить DatePicker

источник

2016-09-07 Johan

Не могли бы вы привести пример кода? С помощью CSS всегда важно обратить внимание на то, какой css-файл связан с первым. –

Я попытался воспроизвести на JSFiddle, но по какой-то причине я не могу воспроизвести его там. Я надеялся, что есть что-то очевидное, что я ошибаюсь. Я отправлю код в ближайшее время из того, что у меня есть – Johan

С помощью инспекционных инструментов Google Chrome, я был в состоянии найти один из классов на вашем Datepicker столе и добавить CSS на этом уровне. Вот CSS и jsfiddle ссылка:

.table tr th{ color: red; } 

.table-condensed thead tr th{ color: black;}

https://jsfiddle.net/w8gmcgv4/5/

дайте мне знать, если они работают для вас. Благодаря!

источник

2016-09-08 15:42:39

Обратите внимание, что это правило будет применяться ко всем таблицам с классом '.table-condensed' (это класс [bootstrap class] (http://getbootstrap.com/css/#tables -конденсация)), а не только для секции выбора. – VincenzoC

Вы можете добавить следующее правило таблицы стилей, чтобы настроить DateTimePicker стиль:

.bootstrap-datetimepicker-widget { 
    table { 
    tr { 
     th { 
     color: black; 
     } 
    } 
    } 
}

Обратите внимание, что подборщика имеет debug вариант, который позволяет проверять HTML компонента в simplyfy стиле настройки ,

Рабочий пример:

jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({ 
 
    format: "DD/MM/YYYY", debug: true 
 
});

table.table tr th { 
 
    color: #ff0000; 
 
} 
 

 
.bootstrap-datetimepicker-widget table tr th { 
 
    color: #000000; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<table class="table"> 
 
    <tr> 
 
    <th>Debt Ref</th> 
 
    <th>Reconcile Date</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div>NOR087-DAN052</div> 
 
    </td> 
 
    <td> 
 
     <div class="col-sm-12"> 
 
     <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control "> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<p> 
 
The text in the datepicker shouldn't be red 
 
</p>

источник

2016-09-08 13:35:15 VincenzoC

Datetime сборщик наследует стиль от моего стола

ответ

Смежные вопросы