Friday

expand textarea between two columns - CSS Grid

5:16 AM css, flexbox, forms, grid, html No comments

Issue

https://codepen.io/joao-joao-joao/pen/jOzGjbe

.grid-contact-form {
display: grid;
margin-top: 48px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 12px;

}

My goal:

https://i.stack.imgur.com/mTCfc.jpg

Solution

Here you go...

Add the following to your CSS:

textarea {
  display: block;
  width: 100%;
}

See the snippet below.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  font-size: 100%;
  background-color: #FF9900;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

img,
video,
iframe,
embed {
  max-width: 100%;
  vertical-align: middle;
}

ul,
ol {
  list-style: none;
}

input,
select,
textarea,
button {
  font-size: inherit;
  font-family: inherit;
}

a {
  text-decoration: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

strong {
  font-weight: normal;
}

.contact-form-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 416px;
  height: 105px;
  box-shadow: 0 3px 0 1px #FF9900;
  border-radius: 0 0 20px 20px;
}

.contact-form-title h2 {
  font-weight: 700;
  font-size: 1.75rem;
}

.form-field input,
.form-field textarea {
  margin: 12px 0;
  padding: 8px;
  border: 1px solid #FF9900;
  border-radius: 10px;
}

.contact-form-title-flex-container {
  display: flex;
  justify-content: center;
}

.contact-form-background {
  background-color: #FFFFFF;
  width: 730px;
  height: 758px;
  border-radius: 20px;
}

.contact-form-content {
  padding: 0 48px;
  font-size: 1.5rem;
}

.grid-contact-form {
  display: grid;
  margin-top: 48px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
}

label {
  display: block;
  font-weight: 700;
}

.message-grid-area {
  grid-column: 1/3;
}

.textarea-grid-area {
  height: 173px;
}

.position-checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 24px;
  font-size: 0.875rem;
  gap: 8px;
}

.position-checkbox input {
  width: 26px;
  height: 26px;
}

.contact-form-button {
  font-weight: bold;
  color: #FFFFFF;
  font-size: 1.5rem;
  padding: 20px 40px;
  background-color: #1A1A1A;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

textarea {
  display: block;
  width: 100%;
}

<body>
  <section>
    <div class="contact-form-background">
      <div class="contact-form-title-flex-container">
        <div class=contact-form-title>
          <h2>Form title</h2>
        </div>
      </div>

      <div class="contact-form-content">
        <form class="grid-contact-form" action="envi@r.php" method="post">

          <div class="form-field">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required>
          </div>

          <div class="form-field">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
          </div>

          <div class="form-field">
            <label for="tel">WhatsApp</label>
            <input type="tel" id="tel" name="tel" placeholder="(DDD)9XXYYXXYY">
          </div>

          <div class="form-field position-checkbox">
            <input type="checkbox" id="whatsapp" name="whatsapp">
            <label for="whatsapp">Checkbox WhatsApp</label>
          </div>

          <div class="form-field message-grid-area">
            <label for="message">Message</label>
            <textarea class="textarea-grid-area" name="message" id="message" rows="10" required></textarea>
          </div>

          <div class="button-grid-area">
            <button class="contact-form-button">SEND</button>
          </div>

        </form>
      </div>

    </div>
  </section>
</body>

Answered By - Cervus camelopardalis

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Friday

expand textarea between two columns - CSS Grid

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels