vuejs datepicker rearrange my template setup

Question

i have try to insert vuejs datepicker in to my vue template but when i add the component it rearrange my template by shifting from right to left. affecting other html elements

this is a picture of my template before adding the

This is my template BEFORE add datepicker

this is my template AFTER adding vuejs-datepicker

every tag has from right to left including my links and its icon swapping

below is my code

 <div class="row pb-3 pt-5 bg-light">
      <div class="col-md-8">
            <div class="form-group">
                <label for="distributor">Select Distributor</label>
                   <select class="form-control" id="distributor">
                      <option>M OSEI AKOTO ENT(NESTLE)</option>
                   </select>
            </div>

      </div>
      <div class="col-md-4">
          <div class="form-group">
             <label for="stock_date">Date</label>
                 **<datepicker></datepicker>**

          </div>
          <div class="form-group">
               <label for="stock_invoice">Stock Number</label>
               <input type="text" class="form-control" name="stock_invoice_number" placeholder="stock invoice number">
          </div>
     </div>
 </div>


  <script>

    import moment from 'moment';
    import Datepicker from 'vuejs-datepicker';

    export default {
      name:'AddStocks',
      components: {
          Datepicker
      }
  </script>

Every thing reverts to normal when i delete the Datepicker component.

style image

After checking the sytle i realize the datepicker component has been attached from my root tile div down to every single tag beneath it

Answer 1

check your style by inspect so you will get it wrong, i need images from inspect so I can help you