Using CSS to leverage the power of both Grid and Flex simultaneously

Question

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png

Current Situation:

#newOrderControl {
    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: 40px;
}

#newOrderInputFields .inputField {
    display: flex;
    align-items: center;
    flex-direction: row;
}

#newOrderInputFields label {
    width: auto;
}

/* Updated styling starts here */

#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>
        
        /* more input field elements... */
        
        <div id="newOrderButtons">
            <button id="btnTakeProfit">Take profit</button>
            <button id="btnPlaceOrder">Place order</button>
        </div>
    </div>
</div>

Existing Challenges:

The All button is not positioned correctly next to the input field
The two buttons are placed outside the newOrderControl div
The labels are breaking onto new lines
Need all inputs and labels to align in a grid-like format

Tried switching to a grid layout, but struggled with positioning input and button elements side by side. When wrapped in a div, they vanished completely.

Any suggestions on how to achieve the desired output?

html css

Answer 1

Answer №1

(1) If we remove the enclosing <div> in the code below, the input and buttons will automatically align using the power of flexbox.


    <input type="text" id="txtOrderQuantity">
    <button class="btnAll" onclick="setAllQuantity()">All</button>

(2) Remember this rule: Avoid using float for layout purposes.

I have incorporated:

#newOrderControl {
  display: flex;
  flex-direction: column;

This change allows the buttons to be aligned on the right with:

#newOrderInputFields label {
  width: auto;
}

(3) To prevent wrapping of the <label>, we applied flex-shrink: 0;. The container's width was modified to width: max-content; while reducing the gap to accommodate it.

(4) By adding justify-content: flex-end;, the elements are now aligned properly:

#newOrderInputFields .inputField {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

#newOrderControl {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: max-content;
  font-size: 14px;
}

#newOrderInputFields {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 5px;
}

#newOrderInputFields .inputField {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

#newOrderInputFields label {
  width: auto;
  flex-shrink: 0;
}

#newOrderButtons {
  align-self: flex-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;
}

<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>
      </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>

Answer 2

(1) If we remove the enclosing <div> in the code below, the input and buttons will automatically align using the power of flexbox.


    <input type="text" id="txtOrderQuantity">
    <button class="btnAll" onclick="setAllQuantity()">All</button>

(2) Remember this rule: Avoid using float for layout purposes.

I have incorporated:

#newOrderControl {
  display: flex;
  flex-direction: column;

This change allows the buttons to be aligned on the right with:

#newOrderInputFields label {
  width: auto;
}

(3) To prevent wrapping of the <label>, we applied flex-shrink: 0;. The container's width was modified to width: max-content; while reducing the gap to accommodate it.

(4) By adding justify-content: flex-end;, the elements are now aligned properly:

#newOrderInputFields .inputField {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

#newOrderControl {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: max-content;
  font-size: 14px;
}

#newOrderInputFields {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 5px;
}

#newOrderInputFields .inputField {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

#newOrderInputFields label {
  width: auto;
  flex-shrink: 0;
}

#newOrderButtons {
  align-self: flex-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;
}

<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>
      </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>

Using CSS to leverage the power of both Grid and Flex simultaneously

Answer №1

Similar questions

Design HTML dropdown menu

Background Patterns on Webpages

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

What is the best way to transfer a user-generated PNG file to my backend server?

Triangle-shaped image mapping and interactive hover effects

Guide to transforming a random hash into a visually appealing HTML table

Extract the chosen document from an input within the Electron application form

Learn how to incorporate a 'Select All' feature as the primary choice in DevExtreme SelectBox with Angular 15 through Html coding

Issue with the div elements not aligning next to each other

Selected jQuery plugin is not updating HTML select option

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

Using setTimeout to click and hold on an element in Javascript

I am looking to have three rows of input text area comments instead of just one

How can one choose an HTML element and then select another nested element using XPath?

What is the best way to call a JavaScript function with multiple arguments from a Silverlight project?

Problems arising from positioning elements with CSS and organizing list items

How to style HTML li elements to wrap like sentences within a paragraph

I am in search of a container that has full height, along with unique footer and content characteristics

Place a div in a location where it seems to be positioned beyond the main wrapper's width of 980 pixels

Error: The property 'classList' of null is unreachable for HTMLImageElement