text input padding overlaps the grid-gap of the parent container

Question

Currently I have this contact form

#contactForm {
  padding: 100px;
}

.splitRow {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.inputContainer {
  width: 100%;
  margin: 10px;
}

.inputTitle {
  display: block;
}

.txtInput {
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
}

#contactSubmitBtn {
  padding: 10px 16px;
  margin: 10px;
}

#contactMessageInput {
  resize: none;
}

@media only screen and (max-width: 700px) {
  .splitRow {
    grid-template-columns: 100%;
  }
  #contactSubmitBtn {
    width: 100%;
  }
}

<div>
  <form id="contactForm" action="/fooBar">
    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="firstname">First Name *</label>
        <input class="txtInput" type="text" v-model="firstname" name="firstname" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="lastname">Last Name *</label>
        <input class="txtInput" type="text" v-model="lastname" name="lastname" required>
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="company">Company</label>
      <input class="txtInput" type="text" v-model="company" name="company">
    </div>

    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="email">E-Mail *</label>
        <input class="txtInput" type="email" v-model="email" name="email" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="phone">Phone</label>
        <input class="txtInput" type="text" v-model="phone" name="phone">
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="message">Your Message *</label>
      <textarea id="contactMessageInput" class="txtInput" v-model="message" name="message" required rows="10" cols="50"></textarea>
    </div>

    <input id="contactSubmitBtn" type="submit" value="Send">
  </form>
</div>

Some rows contain two input fields which are split into two columns. Each input has a padding for style purposes. As you can see multiple problems come up. The padding of the text fields overlaps the grid-gap and the elements on the right side don't have the same ending position on the X-axis.

How can I fix it?

score 2 · Accepted Answer · answered Dec 18 '18 at 11:41

In .splitRow you try to set 100% width + 20px which overflows. Try to change your grid to:

grid-template-columns: 48% 48%;
grid-gap: 4%;

or if you want to keep it in pixels

grid-template-columns: calc(50% - 10px) calc(50% - 10px);
grid-gap: 20px;

#contactForm {
  padding: 100px;
}

.splitRow {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-gap: 4%;
}

.inputContainer {
  width: 100%;
  margin: 10px;
}

.inputTitle {
  display: block;
}

.txtInput {
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
}

#contactSubmitBtn {
  padding: 10px 16px;
  margin: 10px;
}

#contactMessageInput {
  resize: none;
}

@media only screen and (max-width: 700px) {
  .splitRow {
    grid-template-columns: 100%;
  }
  #contactSubmitBtn {
    width: 100%;
  }
}

<div>
  <form id="contactForm" action="/fooBar">
    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="firstname">First Name *</label>
        <input class="txtInput" type="text" v-model="firstname" name="firstname" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="lastname">Last Name *</label>
        <input class="txtInput" type="text" v-model="lastname" name="lastname" required>
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="company">Company</label>
      <input class="txtInput" type="text" v-model="company" name="company">
    </div>

    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="email">E-Mail *</label>
        <input class="txtInput" type="email" v-model="email" name="email" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="phone">Phone</label>
        <input class="txtInput" type="text" v-model="phone" name="phone">
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="message">Your Message *</label>
      <textarea id="contactMessageInput" class="txtInput" v-model="message" name="message" required rows="10" cols="50"></textarea>
    </div>

    <input id="contactSubmitBtn" type="submit" value="Send">
  </form>
</div>

score 1 · Answer 2 · answered Dec 18 '18 at 11:34

1

Add box-sizing: border-box; on .txtInput

.txtInput {
    width: 100%;
    margin-top: 10px;
    padding: 8px 14px;
    box-sizing: border-box;
}

answered Dec 18 '18 at 11:34

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 3 · answered Dec 18 '18 at 11:36

I would suggest adding box-sizing: border-box on all elements as to maintain the same box model.

This will simple fix the issue. You can notice bootstrap also using the same box-model.

* {
  box-sizing: border-box;
}

#contactForm {
  padding: 100px;
}

.splitRow {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.inputContainer {
  width: 100%;
  margin: 10px;
}

.inputTitle {
  display: block;
}

.txtInput {
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
}

#contactSubmitBtn {
  padding: 10px 16px;
  margin: 10px;
}

#contactMessageInput {
  resize: none;
}

@media only screen and (max-width: 700px) {
  .splitRow {
    grid-template-columns: 100%;
  }
  #contactSubmitBtn {
    width: 100%;
  }
}

<div>
  <form id="contactForm" action="/fooBar">
    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="firstname">First Name *</label>
        <input class="txtInput" type="text" v-model="firstname" name="firstname" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="lastname">Last Name *</label>
        <input class="txtInput" type="text" v-model="lastname" name="lastname" required>
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="company">Company</label>
      <input class="txtInput" type="text" v-model="company" name="company">
    </div>

    <div class="splitRow">
      <div class="inputContainer">
        <label class="inputTitle" for="email">E-Mail *</label>
        <input class="txtInput" type="email" v-model="email" name="email" required>
      </div>

      <div class="inputContainer">
        <label class="inputTitle" for="phone">Phone</label>
        <input class="txtInput" type="text" v-model="phone" name="phone">
      </div>
    </div>

    <div class="inputContainer">
      <label class="inputTitle" for="message">Your Message *</label>
      <textarea id="contactMessageInput" class="txtInput" v-model="message" name="message" required rows="10" cols="50"></textarea>
    </div>

    <input id="contactSubmitBtn" type="submit" value="Send">
  </form>
</div>

text input padding overlaps the grid-gap of the parent container

3 Answers3