Why are form labels wrapping? - Html

Max888
March 10, 2023
128 views
3 votes
3 Answers

Attached is a minimal example of a web page I am working on. My goal is to have the form labels take up exactly the width they need to be able to display the text without wrapping, and for the rest of the 300px width of the div to be taken up by the image (which is much larger than 300px). I’m struggling to understand why the form is taking a seemingly arbitrary width and I would really like to understand how this works.

div {
  display: flex;
  flex-direction: row;
  max-width: 300px;
}

img {
  width: 100%;
}

form {
  width: 100%;
  padding: 10px;
}

<div>
  <img src="https://i.stack.imgur.com/aH5zB.jpg" alt="" srcset="" />
  <form action="/create-checkout-session" method="POST">
    <fieldset>
      <legend>Fruit</legend>
      <div>
        <input type="radio" id="red" name="top" value="red" checked />
        <label for="red">Red</label>
      </div>
      <div>
        <input type="radio" id="blue" name="top" value="blue" checked />
        <label for="blue">
          BlueBlueBlueBlueBlueBlueBlueBlue 
          BlueBlueBlueBlueBlueBlueBlueBlueBlueBlueBlue
        </label>
      </div>
      <div>
        <input type="radio" id="green" name="top" value="green" checked />
        <label for="green">GreenGreenGreenGreenGreenGreenGreen</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Veg</legend>
      <div>
        <input type="radio" id="red2" name="top" value="red" checked />
        <label for="red2">Red</label>
      </div>
      <div>
        <input type="radio" id="blue2" name="top" value="blue" checked />
        <label for="blue2">
          BlueBlueBlueBlueBlueBlueBlueBlue
          BlueBlueBlue BlueBlueBlueBlueBlueBlueBlueBlue
        </label>
      </div>
      <div>
        <input type="radio" id="green2" name="top" value="green" checked />
        <label for="green2">GreenGreenGreenGreenGreenGreenGreen</label>
      </div>
    </fieldset>
    <input type="submit" name="checkout" value="Checkout" />
  </form>
</div>

Tags: css html

Answers

You could easily at least stop the wrapping with the below code:

label {
  white-space: nowrap;
}

div {
  display: flex;
  flex-direction: row;
  max-width: 300px;
}

img {
  width: 100%;
}

form {
  width: 100%;
  padding: 10px;
}
label {
  white-space: nowrap;
}

<div>
  <img src="https://i.stack.imgur.com/aH5zB.jpg" alt="" srcset="" />
  <form action="/create-checkout-session" method="POST">
    <fieldset>
      <legend>Fruit</legend>
      <div>
        <input type="radio" id="red" name="top" value="red" checked />
        <label for="red">Red</label>
      </div>
      <div>
        <input type="radio" id="blue" name="top" value="blue" checked />
        <label for="blue">
          BlueBlueBlueBlueBlueBlueBlueBlue 
          BlueBlueBlueBlueBlueBlueBlueBlueBlueBlueBlue
        </label>
      </div>
      <div>
        <input type="radio" id="green" name="top" value="green" checked />
        <label for="green">GreenGreenGreenGreenGreenGreenGreen</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Veg</legend>
      <div>
        <input type="radio" id="red2" name="top" value="red" checked />
        <label for="red2">Red</label>
      </div>
      <div>
        <input type="radio" id="blue2" name="top" value="blue" checked />
        <label for="blue2">
          BlueBlueBlueBlueBlueBlueBlueBlue
          BlueBlueBlue BlueBlueBlueBlueBlueBlueBlueBlue
        </label>
      </div>
      <div>
        <input type="radio" id="green2" name="top" value="green" checked />
        <label for="green2">GreenGreenGreenGreenGreenGreenGreen</label>
      </div>
    </fieldset>
    <input type="submit" name="checkout" value="Checkout" />
  </form>
</div>

form {
  max-width: 300px;
  margin: 0 auto;
}

.wrap {
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<form action="/create-checkout-session" method="POST">
    <fieldset>
      <legend>Color</legend>
      <div class="wrap">
        <input type="radio" id="red" name="top" value="red" checked />
        <label for="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus ipsum erat, eu convallis odio accumsan a. Proin faucibus, quam non bibendum scelerisque, mi eros aliquam nisl, et porttitor mi mi ut ligula. Etiam id nisi enim.</label>
      </div>
    </fieldset>
    <input type="submit" name="checkout" value="Checkout" />
  </form>

This will do, don’t forget to define a fixed width, or a max-width.

You can use anything instead of fieldset.

  fields {
      width: 300px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

This should achieve what you’re looking for. Simple container DIV using display "table-row" and two "table-cell" content divs. The form content is set not to wrap and the image content will automatically resize based on the available width remaining.

#main-content {
        display: table-row;
        max-width: 100vw;
    }
    #img-content {
        display: table-cell;
        width: auto;
        vertical-align: middle;
    }
    #img-content img {
        max-width: 100%;
    }

    #form-content {
        display: table-cell;;
        padding: 10px;
        white-space: nowrap;
        vertical-align: middle;
        
    }

<div id="main-content">
  <div id="img-content">
    <img src="https://i.stack.imgur.com/aH5zB.jpg" alt="" srcset="" />
  </div>
  <div id="form-content">
    <form action="/create-checkout-session" method="POST">
      <fieldset>
        <legend>Fruit</legend>
        <div>
          <input type="radio" id="red" name="top" value="red" checked />
          <label for="red">Red</label>
        </div>
        <div>
          <input type="radio" id="blue" name="top" value="blue" checked />
          <label for="blue">
              BlueBlueBlueBlueBlueBlueBlueBlue 
              BlueBlueBlueBlueBlueBlueBlueBlueBlueBlueBlue
            </label>
        </div>
        <div>
          <input type="radio" id="green" name="top" value="green" checked />
          <label for="green">GreenGreenGreenGreenGreenGreenGreen</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Veg</legend>
        <div>
          <input type="radio" id="red2" name="top" value="red" checked />
          <label for="red2">Red</label>
        </div>
        <div>
          <input type="radio" id="blue2" name="top" value="blue" checked />
          <label for="blue2">
              BlueBlueBlueBlueBlueBlueBlueBlue
              BlueBlueBlue BlueBlueBlueBlueBlueBlueBlueBlue
            </label>
        </div>
        <div>
          <input type="radio" id="green2" name="top" value="green" checked />
          <label for="green2">GreenGreenGreenGreenGreenGreenGreen</label>
        </div>
      </fieldset>
      <input type="submit" name="checkout" value="Checkout" />
    </form>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Why are form labels wrapping? – Html

Answers