title: jQuery UI Datepicker going out of scale
body: <p>My Datepicker is changing shape and stretching across to the very end of the screen. What could be wrong? Here is my code:</p>
  
  <p>Also, how can I alter the date in the jQuery so it appears as dd-mm-yyyy?</p>
  
  <p><a href="https://i.stack.imgur.com/IQzVV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IQzVV.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" /&gt;
          &lt;title&gt;Beauty Factory Bookings&lt;/title&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'&gt;
          &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
          &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;    &lt;/script&gt;
      &lt;script&gt;
      $(function() {
          $( "#datepicker" ).datepicker();
      });
      &lt;/script&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="heading1"&gt;
          &lt;p&gt;Select Your Treatment&lt;/p&gt;
      &lt;div class="dropdown"&gt;
          &lt;select&gt;&lt;?php echo $options; ?&gt;&lt;/select&gt;
      &lt;div class="heading2"&gt;
          &lt;p&gt;Select Your Date&lt;/p&gt;
          &lt;input type="text" id="datepicker"&gt;
      &lt;div class="heading3"&gt;
          &lt;p&gt;Select Your Time&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .heading1 {
          text-align: center;
          margin-top: 5%;
          text-transform: uppercase;
          font-size: 16px;
      }
  
      .heading2 {
          text-align: center;
          margin-top: 3%;
          text-transform: uppercase;
          font-size: 16px;
      }
  
      .heading3 {
          text-align: center;
          margin-top: 3%;
          text-transform: uppercase;
          font-size: 16px;
      }
  
      .dropdown select {
          margin-top: 1%;
          display: block;
          height: 30px;
          width: 320px;
          background: #ff656c;
          border: 1px solid #e15960;
          color: #fff;
          font-size: 15px;
          font-family: Montserrat;
          outline: none;
          cursor: pointer;
          text-align: center;
          margin-left: auto;
          margin-right: auto;
          border-radius: 5px;
      }
  
      img {
          padding-top: 12px;
          padding-left: 12px;
      }
  
      .headertext {
          float: right;
          padding-top: 20px;
          padding-right: 3%;
      }
  
      body {
          background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
          background-size: cover;
          font-family: Montserrat;
          margin: 0;
          padding: 0;
      }
  </code></pre>