So ändern Sie das bootstrap-inline datepicker zu passen volle Breite
Ich bin mit bootstrap-datepicker von hier: https://github.com/eternicode/bootstrap-datepicker
Nun möchte ich, um es zu passen Breite mit den übergeordneten container, aber im moment ist es nur füllt eine Feste Größe und ich weiß nicht, wo es zu ändern via CSS. Vielleicht hast du ja ein ähnliches problem früher und möchte mir helfen?
Habe ich schonmal ein Bild von dem problem:
http://i.stack.imgur.com/ShZTU.png
Und hier ist der code vor dem hinzufügen der datepicker-Funktionalität über JavaScript:
<div class="col-sm-4">';
<div class="panel panel-success panel-dark widget-profile ">
<div class="panel-heading">
<div class="widget-profile-bg-icon">
<i class="fa fa-flask"></i>
</div>
<img src="assets/demo/avatars/2.jpg" alt="" class="widget-profile-avatar">
<div class="widget-profile-header">
<span>Robert Jang</span>
<br>
[email protected]
</div>
</div>
<!-- /.panel-heading -->
<div id="bs-datepicker-inline"></div>
</div>
</div>Dann füge ich das datepicker-Funktionalität mit diesem JavaScript-code:
jQuery('#bs-datepicker-inline').datepicker();Und nach diesem meinem letzten source-code sieht wie folgt aus:
<div class="col-sm-4">
<div class="panel panel-success panel-dark widget-profile ">
<div class="panel-heading">
<div class="widget-profile-bg-icon">
<i class="fa fa-flask"></i>
</div>
<img src="assets/demo/avatars/2.jpg" alt="" class="widget-profile-avatar">
<div class="widget-profile-header">
<span>Robert Jang</span>
<br>
[email protected]
</div>
</div>
<!-- /.panel-heading -->
<div id="bs-datepicker-inline">
<div class="datepicker datepicker-inline">
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">February 2015</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="day old">25</td>
<td class="day old">26</td>
<td class="day old">27</td>
<td class="day old">28</td>
<td class="day old">29</td>
<td class="day old">30</td>
<td class="day old">31</td>
</tr>
<tr>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
<td class="day">21</td>
</tr>
<tr>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
<td class="day">28</td>
</tr>
<tr>
<td class="day new">1</td>
<td class="day new">2</td>
<td class="day new">3</td>
<td class="day new">4</td>
<td class="day new">5</td>
<td class="day new">6</td>
<td class="day new">7</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">2015</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">2010-2019</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="year old">2009</span>
<span class="year">2010</span>
<span class="year">2011</span>
<span class="year">2012</span>
<span class="year">2013</span>
<span class="year">2014</span>
<span class="year">2015</span>
<span class="year">2016</span>
<span class="year">2017</span>
<span class="year">2018</span>
<span class="year">2019</span>
<span class="year new">2020</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>Ich hoffe, dass mir jemand helfen könnte. Bitte lassen Sie mich wissen, wenn Sie einige weitere Informationen.
Vielen Dank im Voraus.
EDIT 1:
Hier ist der CSS-Code des Datepicker
.datepicker {
direction: ltr;
padding: 0;
width: auto !important;
}
.datepicker.datepicker-inline {
border: 1px solid #eee;
display: inline-block;
position: relative;
}
.datepicker > div {
display: none;
}
.datepicker.days div.datepicker-days,
.datepicker.months div.datepicker-months,
.datepicker.years div.datepicker-years {
display: block;
}
.datepicker div.datepicker-months td,
.datepicker div.datepicker-years td {
width: 210px !important;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.datepicker td {
line-height: 32px;
padding: 0 !important;
text-align: center;
width: 30px;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td {
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
.datepicker table tr td:last-child {
border-right: none;
}
.datepicker table tr td.day:hover {
background: #f3f3f3;
cursor: pointer;
position: relative;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #bbb;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #eee;
cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background: #f3f3f3;
font-weight: 700 !important;
}
.datepicker table tr td.today:hover:hover {
color: #555555;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #f3f3f3;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background: #f3f3f3;
font-weight: 700;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
color: #fff !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
color: #fff !important;
}
.datepicker table tr td span {
border-radius: 2px;
cursor: pointer;
display: block;
float: left;
line-height: 54px;
margin: 1%;
width: 23%;
}
.datepicker table tr td span:hover {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #eee;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #eee;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker th,
.datepicker td,
.datepicker tr {
border-top: none !important;
text-align: center !important;
}
.datepicker thead th,
.datepicker tfoot th {
font-weight: 600;
padding: 0 !important;
}
.datepicker thead th {
border-bottom: none !important;
color: #fff;
font-weight: 600;
line-height: 35px !important;
height: 35px !important;
padding: 0 !important;
text-align: center;
}
.datepicker thead tr:first-child {
border-bottom: 1px solid !important;
}
.datepicker thead tr:first-child th:hover {
background: rgba(255, 255, 255, 0.2);
}
.datepicker thead tr:last-child {
border-bottom: none !important;
}
.datepicker thead th.prev,
.datepicker thead th.next {
color: rgba(0, 0, 0, 0);
display: block;
font-size: 0;
line-height: 0;
position: absolute;
width: 36px !important;
}
.datepicker thead th.prev:after,
.datepicker thead th.next:after {
bottom: 0;
color: #fff;
display: block;
font-family: FontAwesome;
font-size: 14px;
font-weight: normal;
left: 0;
line-height: 35px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 36px;
}
.datepicker thead th.prev {
left: 0;
border-right: 1px solid;
}
.datepicker thead th.prev:after {
content: "\f053";
}
.datepicker thead th.next {
border-left: 1px solid;
right: 0;
}
.datepicker thead th.next:after {
content: "\f054";
}
.datepicker tfoot th:hover {
background: #eee;
}
.datepicker tbody td,
.datepicker tfoot th {
line-height: 32px !important;
}
.datepicker > .datepicker-days tbody .cw {
background: #f8f8f8 !important;
color: #aaa;
font-size: 8px;
font-weight: 600;
}
.datepicker > .datepicker-days thead tr:first-child th.cw {
background-color: transparent;
cursor: default;
}
.datepicker > .datepicker-days thead tr:first-child th.cw + .prev {
left: 30px;
border-left: 1px solid;
}
.datepicker > .datepicker-days thead tr:last-child th.cw + th {
border-left: 1px solid;
}InformationsquelleAutor user3061808 | 2015-02-20
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Diese Arbeit für mich:
InformationsquelleAutor Jibieta
Diese Arbeit für mich:
InformationsquelleAutor Ethem
Versuchen, suchen Sie die Zeile
Width:;im css der datepicker und legen Sie es auf Erbenwidth = inherit;sollte es geben, die mit der übergeordneten div. wenn das nicht funktioniert, poste bitte deine css-code für die datepicker.In
.datepicker table tr td spanstellen Sie die Breite aufwidth= 100%;wenn das nicht funktioniert, dann entfernen Sie alle Breite Argumente und sehen, ob es etwas ändert, wenn es dann funktioniert, entfernen Sie jedes argument Breite getrennt, um herauszufinden, die man hält den datepicker von volle Breite.Hey EntangledQuantum, ich danke Ihnen nochmals sehr für Ihre Antwort. Ich habe versucht, es zu tun, aber es hat keinen Effekt, die Breite bleibt kleiner als der Inhalt des Fensters ermöglicht.. hast du irgendeine andere Idee?
dann wahrscheinlich hardcoded in die datepicker.js Datei, aber ich weiß nicht, js, also kann ich dir nicht helfen, sorry.
InformationsquelleAutor EntangledQuantum
Ändern Sie den container und die Orientierung im init-script:
Muss der Behälter sein, dessen unmittelbar übergeordneten element (es wird die Breite, was auch immer Eltern, die Sie angeben)
InformationsquelleAutor Bryce