Tarta Tarta - 1 month ago 15
Javascript Question

Dynamic size of a modal in bootstrap

I am a newbie in the field, so I will explain you what I am trying to achieve. In my webpage I want that when a button is pressed, a popup card shows up where I have to fill some information. I am using bootstrap in my current project. So what I found so far is the use of a modal. So when the card pops up there are some fields to fill (easy strings) and a date to choose. By going to the code so far I have:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btn-warning addButton" data-toggle="modal" data-target="#myModal">New Employee</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">New FRISS employee</h4>
</div>
<div class="modal-body">

<input type="text" class="form-control insertInfo" placeholder="Name" />
<input type="text" class="form-control insertInfo" placeholder="Surname" />
<input type="text" class="form-control insertInfo" placeholder="Date of birth" />
<input type="text" class="form-control insertInfo" placeholder="Role" />
<input type="text" class="form-control insertInfo" placeholder="Email address" />



</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>


The first problem at this point is that I would like to modify the width of the modal (which is too big). Afterwards I don't want a string as a date but a date picker and again I found through bootstrap this snippet of code:

<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>


Unfortunately if I use it, everything in the modal gets mixed without anymore an order and I don't manage to keep everything clean and ordered. Can you please help me? Thanks in advance

Answer

Either you have not added in the datepicker css cdn links in or I think you are copying and pasting the whole datepicker code in place of the date of birth input.

You dont need to copy the whole code with the container div just the code from the

<div class='input-group date' id='datetimepicker1'>

Also make sure you have added in the datetimepicker css and js file links in your head tag.

Here is as example using your code. Do check the link and script tags at the top and put them in your code in the exact same order.

http://codepen.io/Nasir_T/pen/ALNkaK

Also to customize the width of the modal div. Just add the default bootstrap .modal-content { class in your custom css file or this page and add the width property to customize it.

Hope this helps.

[Edit]

On your spacing request in comments: just add the following class in your css file

.insertInfo {
  margin: 10px 0;
}

Also add this class in the datepicker div in the modal code as follows

<div class='input-group date insertInfo' id='datetimepicker1'>

And you will be all good. :)

Comments