HTML Content gets cropped

Question

I have a problem. I created the following page:

#newOrderControl {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: min-content;
    font-size: 14px;
  }
  
  #newOrderInputFields {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 20px;
    padding-bottom: 20px;
  }
  
  #newOrderInputFields .inputField {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  
  #newOrderInputFields label {
    flex-shrink: 0;
  }
  
  #newOrderButtons {
    align-self: flex-end;
    padding-bottom: 20px;
  }
  
  #newOrderButtons button {
    float: right;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    color: white;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
    margin: 0px 5px;
  }
  
  .btnAll {
    background-color: #6DA0ED;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    color: white;
    border-radius: 5px;
  }
  
  #btnTakeProfit {
    background-color: #33AB37;
  }
  
  #btnPlaceOrder {
    background-color: #6DA0ED;
  }
  
  .title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    margin: 5px;
}

<div id="newOrderControl">
<label class="title">New order</label>
<div id="newOrderInputFields">
    <div class="inputField">
    <label>Action:</label>
    <select id="txtOrderAction">
        <option value="">-</option>
        <option value="Buy">Buy</option>
        <option value="Sell">Sell</option>
    </select>
    </div>
    <div class="inputField">
    <label>Quantity:</label>
    <input type="text" id="txtOrderQuantity">
    <button class="btnAll" onclick="setAllQuantity()">All</button>
    </div>
    <div class="inputField">
    <label>Target price:</label>
    <input type="text" id="txtOrderTargetPrice">
    </div>
    <div class="inputField">
    <label>Target perc:</label>
    <input type="text" id="txtOrderTargetPerc">
    </div>
    <div class="inputField">
    <label>Coin:</label>
    <select id="txtOrderCoin">
        <option value="">-</option>
        <option value="">SPTF</option>
        <option value="">TLS</option>
    </select>
    </div>
    <div class="inputField">
    <label>Amount:</label>
    <input type="text" id="txtOrderAmount">
    <button class="btnAll" onclick="setAllAmount()">All</button>
    </div>
    <div class="inputField">
    <label>Limit price:</label>
    <input type="text" id="txtOrderLimitPrice">
    </div>
    <div class="inputField">
    <label>Limit perc:</label>
    <input type="text" id="txtOrderLimitPerc">
    </div>
</div>
<div id="newOrderButtons">
    <button id="btnTakeProfit">Take profit</button>
    <button id="btnPlaceOrder">Place order</button>
</div>
</div>

Now with this code I have a few problems:

• The 2 selects (action and coin) don't have an equal width, so they are not aligned perfectly
• When I resize my page everything goes trough each other

I thought I could fix it by setting width: min-content; in #newOrderControl, but that crops everything trough each other:

So I tried setting it to auto, but then it uses the entire page:

How can I keep the positions while resizing the page and give the #newOrderControl the width it needs to place everything, without using the entire page?

Answer 1

If you're not opposed to using flex and grid together here's another option for you EDIT to add mobile:

#newOrderControl {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: min-content;
  font-size: 14px;
  padding: 0px 10px 10px 10px;
}
#newOrderInputFields {
  display: grid;
  grid-template-rows: 2em 2em;
  grid-template-columns: 9em 18em 16em 16em;
  padding-bottom: 1em;
  padding-top: 1em;
}
input {
  width: 10em;
}
select {
  width: 5em;
}
#txtOrderAmount {
  margin-left: 2px;
}
#txtOrderLimitPrice {
  margin-left: 4px;
}
#txtOrderLimitPerc {
  margin-left: 4px;
}
#txtOrderCoin {
  margin-left: 10px;
}
#newOrderButtons {
  align-self: end;
}
#newOrderButtons button {
  float: right;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  color: white;
  height: 30px;
  width: auto;
  padding: 0px 15px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 10px;
  margin: 0px 5px;
}
.btnAll {
  background-color: #6da0ed;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  color: white;
  border-radius: 5px;
}
#btnTakeProfit {
  background-color: #33ab37;
}
#btnPlaceOrder {
  background-color: #6da0ed;
}
.title {
  display: block;
  text-align: center;
  color: #1d0f73;
  font-size: 22px;
  font-weight: bold;
  margin: 5px;
}

@media screen and (max-width: 1000px) {
  #newOrderControl {
    width: min-content + 10;
  }
  input {
    width: 5em;
  }
  #newOrderInputFields {
    grid-template-rows: 2em 2em 2em 2em;
    grid-template-columns: 13.5em 13.5em;
  }
  #txtOrderAmount {
    margin-left: 19px;
  }
  #txtOrderLimitPrice {
    margin-left: 2px;
  }
  #txtOrderLimitPerc {
    margin-left: 7px;
  }
  #txtOrderCoin {
    margin-left: 37px;
  }
  #txtOrderTargetPrice {
    margin-left: 5px;
  }
  #txtOrderAction {
    margin-left: 27px;
  }
  #txtOrderQuantity {
    margin-left: 17px;
  }
  #txtOrderTargetPrice {
    margin-left: 0px;
  }
  #txtOrderTargetPerc {
    margin-left: 4px;
  }
  #Action_Quantity {
    grid-area: 2 / 1 / span 1 / span 1;
  }
  #Action_TrgtPrice {
    grid-area: 3 / 1 / span 1 / span 1;
  }
  #Action_TrgtPerc {
    grid-area: 4 / 1 / span 1 / span 1;
  }
  #newOrderButtons {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-evenly;
  }
}

<div id="newOrderControl">
  <label class="title">New order</label>
  <div id="newOrderInputFields">
    <div class="inputField">
      <label class="inputLabel">Action:</label>
      <select id="txtOrderAction">
        <option value="">-</option>
        <option value="Buy">Buy</option>
        <option value="Sell">Sell</option>
      </select>
    </div>

    <div class="inputField" id="Action_Quantity">
      <label class="inputLabel">Quantity:</label>
      <input type="text" id="txtOrderQuantity">
      <button class="btnAll" onclick="setAllQuantity()">All</button>
    </div>

    <div class="inputField" id="Action_TrgtPrice">
      <label class="inputLabel">Target price:</label>
      <input type="text" id="txtOrderTargetPrice">
    </div>

    <div class="inputField" id="Action_TrgtPerc">
      <label class="inputLabel">Target perc:</label>
      <input type="text" id="txtOrderTargetPerc">
    </div>

    <div class="inputField">
      <label>Coin:</label>
      <select id="txtOrderCoin">
        <option value="">-</option>
        <option value="">SPTF</option>
        <option value="">TLS</option>
      </select>
    </div>

    <div class="inputField">
      <label class="inputLabel">Amount:</label>
      <input type="text" id="txtOrderAmount">
      <button class="btnAll" onclick="setAllAmount()">All</button>
    </div>

    <div class="inputField">
      <label class="inputLabel">Limit price:</label>
      <input type="text" id="txtOrderLimitPrice">
    </div>

    <div class="inputField">
      <label class="inputLabel">Limit perc:</label>
      <input type="text" id="txtOrderLimitPerc">
    </div>
  </div>
  <div id="newOrderButtons">
    <button id="btnTakeProfit">Take profit</button>
    <button id="btnPlaceOrder">Place order</button>
  </div>
</div>

Answer 2

Did this solve the issue? I removed a couple of things. The biggest issues were width: min-content and display: flex on #newOrderControl, and using margin instead of padding. Margin doesn't work well with grid and flex.

I also removed the float, and all display properties on children of #newOrderInputFields, because it didn't seem like they did anything.

Whenever you have problem with CSS, try removing as much code as possible and start again.

As mentioned in the comments. Don't use float in design, unless it's an element that text should flow around.

I didn't focus on fixing the different input field widths. I would probably solve that by using a min-width, as you stated, or use Material Design's suggestion for text fields.

#newOrderControl {
    /* display: flex; */
    display: inline-flex; /* ADDED */
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    /* width: min-content; */
    font-size: 14px;
  }
  
  #newOrderInputFields {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 20px;
    padding-bottom: 20px;
  }
  
  /* #newOrderInputFields .inputField {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }*/

  
  /* #newOrderInputFields label {
    flex-shrink: 0;
  }*/
  
  #newOrderButtons {
    align-self: flex-end;
    padding-bottom: 20px;
  }
  
  #newOrderButtons button {
    /*float: right;*/
    border-style: solid;
    border-color: black;
    border-width: 2px;
    color: white;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
    /* margin: 0px 5px; */
    padding: 0px 5px; /* ADDED */
  }
  
  .btnAll {
    background-color: #6DA0ED;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    color: white;
    border-radius: 5px;
  }
  
  #btnTakeProfit {
    background-color: #33AB37;
  }
  
  #btnPlaceOrder {
    background-color: #6DA0ED;
  }
  
  .title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    /* margin: 5px; */
    padding: 5px; /* ADDED */
}

<div id="newOrderControl">
  <label class="title">New order</label>
  <div id="newOrderInputFields">
    <div class="inputField">
      <label>Action:</label>
      <select id="txtOrderAction">
        <option value="">-</option>
        <option value="Buy">Buy</option>
        <option value="Sell">Sell</option>
      </select>
    </div>
    <div class="inputField">
      <label>Quantity:</label>
      <input type="text" id="txtOrderQuantity">
      <button class="btnAll" onclick="setAllQuantity()">All</button>
    </div>
    <div class="inputField">
      <label>Target price:</label>
      <input type="text" id="txtOrderTargetPrice">
    </div>
    <div class="inputField">
      <label>Target perc:</label>
      <input type="text" id="txtOrderTargetPerc">
    </div>
    <div class="inputField">
      <label>Coin:</label>
      <select id="txtOrderCoin">
        <option value="">-</option>
        <option value="">SPTF</option>
        <option value="">TLS</option>
      </select>
    </div>
    <div class="inputField">
      <label>Amount:</label>
      <input type="text" id="txtOrderAmount">
      <button class="btnAll" onclick="setAllAmount()">All</button>
    </div>
    <div class="inputField">
      <label>Limit price:</label>
      <input type="text" id="txtOrderLimitPrice">
    </div>
    <div class="inputField">
      <label>Limit perc:</label>
      <input type="text" id="txtOrderLimitPerc">
    </div>
  </div>
  <div id="newOrderButtons">
    <button id="btnTakeProfit">Take profit</button>
    <button id="btnPlaceOrder">Place order</button>
  </div>
</div>