How to make the textarea label display correctly

Question

I created a responsive form which changes to two columns when the screen size is resized. It mostly works the way I want it to.

However the label for textarea keeps showing incorrectly. I want it to display on a new line, but it keeps showing in the area of radio buttons.

There is also an issue with radio buttons where both can be selected at the same time. I have been trying to figure out what I did wrong but I can't find a solution.

Here is my code on jsfiddle.

/* CSS */

.myForm {
  padding: 40px 20px;
}

.myForm h2,
.myForm p {
  text-align: center;
  padding: 0 10px;
}

.myForm h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}

.myForm p {
  margin-bottom: 20px;
  font-size: 12px;
}

.myForm label {
  font-size: 14px;
}

form input {
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  height: 25px;
  width: 96%;
  margin: 10px 0;
  font-size: 14px;
  padding: 5px;
}

.label,
.radio input[type="radio"] {
  display: inline;
  float: left;
  width: auto;
  margin: 10px 0;
  padding: 0 10px;
}

input[type="radio"],
input.radio {
  vertical-align: text-top;
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  top: -8px;
  right: 5px;
}

.msg textarea {
  width: 96%;
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  margin: 10px 0;
  font-size: 14px;
  padding: 5px;
}

form button {
  background-color: #a9a9a9;
  color: #fff;
  width: 100%;
  text-transform: uppercase;
  padding: 10px;
  border: none;
  border-radius: 3px;
}

@media only screen and (min-width: 768px) {
  /*Left form column*/
  .left {
    display: block;
    float: left;
    width: 48%;
  }
  /*Right form column*/
  .right {
    display: block;
    float: right;
    width: 48%;
  }
  .label,
  .radio input[type="radio"] {
    padding-right: 30px;
    padding-left: 30px;
  }
}

<!-- HTML -->
<form class="myForm">
  <h2>Lorem ipsum</h2>
  <p>text</p>
  <div class="fields">
    <label class="left">First Name
              <input type="text" name="other"></label>
    <label class="right">Last Name
              <input type="text" name="other"></label>
    <label class="left">text
              <input type="text" name="other"></label>
    <label class="right">text
              <input type="text" name="other"></label>
    <label class="left">text
              <input type="text" name="other"></label>
    <label class="right">text
              <input type="text" name="other"></label>
    <label class="left">text
              <input type="text" name="other"></label>
    <div class="radio right">
      <label>Some text</label><br>
      <label class="label">
                <input type="radio" name="phone" value="phone">Phone</label>
      <label class="label close">
                  <input type="radio" name="email" value="email">Email</label>
    </div>
    <div class="msg">
      <label>Message</label>
      <textarea rows="5"></textarea>
    </div>
  </div>
  <button type="button" name="button">Send</button>
</form>

For select one radio button you have to give same `name` for their attributes. — Shubham Baranwal, Nov 22 '18 at 11:21

score 0 · Accepted Answer · answered Nov 22 '18 at 11:20

0

this should help:

.msg{
  clear:both;
}

answered Nov 22 '18 at 11:20

shakogele

409
4
14

That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks! – daydreamer Nov 22 '18 at 11:25
1

@daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore – Pete Nov 22 '18 at 11:26
Thanks, I'll make sure to do that. – daydreamer Nov 22 '18 at 11:38

score 0 · Answer 2 · answered Nov 22 '18 at 11:23

0

To fix the two problems you describe:

Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.
You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.

answered Nov 22 '18 at 11:23

varkor

499
3
13

Thank you! And thanks for clarification on the second point. – daydreamer Nov 22 '18 at 12:00

How to make the textarea label display correctly

2 Answers2