I am using bootstrap datepicker from here: https://github.com/eternicode/bootstrap-datepicker
Now I would like to set its width with the parent container, but at the moment it fills a fixed size, and I don't know where to change it using CSS. Maybe you had a similar problem before and I would like to help?
I attached a picture of the problem: http://i.stack.imgur.com/ShZTU.png
And here is the code before adding the datepicker function via 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@example.com </div> </div> <div id="bs-datepicker-inline"></div> </div> </div>
Then I add a datepicker function with this JavaScript code:
jQuery('#bs-datepicker-inline').datepicker();
And after that, my last source code is as follows:
<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@example.com </div> </div> <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>
Hope someone can help me. Please let me know if you need more information.
Thank you very much in advance.
EDIT 1:
Here's the CSS code for 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; }