[Vuejs]-Text area sticking out of form

by

0👍

✅

It looks normal, nothing goes out of the container. The only change is adding a margin, textarea left and right mx-2, I also removed from the card-header mr-2 because it added a margin in the header unnecessarily?

.form-border {
  border-style: solid;
  border-color: #888
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<div class="container mt-5">
  <form class="card card-color form-border" @submit.prevent="createNewTask">
    <div class="card-header px-3">
      Add new Task
    </div>
    <div class="card-block mx-2">
      <textarea class="form-control pull-left" rows="3" cols="2" v-model="newTaskBody" placeholder="Create new task!"></textarea>
    </div>
    <div class="card-footer px-3">
      <button type="submit" class="btn btn-sm btn-secondary ml-2">Add task</button>
    </div>
  </form>
  <p v-if="error" class="error mt-2 alert alert-danger"> {{ error }}</p>
</div>

Leave a comment