Arranging input elements horizontally

Question

Arranging input elements horizontally

this issue is connected to this post: Flex align baseline content to input with label

I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS is scoped within the host and component, making CSS grid not the most ideal solution. I have flexibility to adjust styles inside the component, but changes must be contained within it.

<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div class="myComponent" style="width: 100px">
    <input id="myInput" placeholder="No label" style="width: 100%; box-sizing: border-box;"/>
  </div>
  <div class="myComponent"  style="width: 100px">
    <label for="myInput" style="display: block">Hint</label>
    <input id="myInput" placeholder="test" style="width: 100%; box-sizing: border-box;"/>
    <small style="display: block">hint</small>
  </div>
  <div class="myComponent"  style="width: 100px">
    <label for="myInput" style="display: block">Long Hint</label>
    <input id="myInput" placeholder="test" style="width: 100%; box-sizing: border-box;"/>
    <small style="display: block">A really long hint that wraps</small>
  </div>
  <div class="myComponent"  style="width: 100px">
    <label for="myInput" style="display: block">No Hint</label>
    <input id="myInput" placeholder="test" style="width: 100%; box-sizing: border-box;"/>
  </div>
  <button style="text-wrap: nowrap;">My Button</button>
</div>

html css angular web-component

Answer 1

Answer №1

To achieve this, you can utilize the CSS property grid-template-rows: subgrid;. Here is a sample code snippet that demonstrates how to implement it:

.my-layout {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-rows: repeat(3, auto);
  align-items: center;
}

.my-box {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.my-box label {
  margin-top: auto;
}

.my-box input {
  width: 100%;
}

.my-box input:first-child,
.my-box button {
  grid-row-start: 2;
}

<div class="my-layout">
  <div class="my-box">
    <input placeholder="No label">
  </div>
  <div class="my-box">
    <label for="input-1">Hint</label>
    <input id="input-1" placeholder="test">
    <small>hint</small>
  </div>
  <div class="my-box">
    <label for="input-2">Long<br>Hint</label>
    <input id="input-2" placeholder="test">
    <small>A really long hint that wraps</small>
  </div>
  <div class="my-box">
    <label for="input-3">No Hint</label>
    <input id="input-3" placeholder="test">
  </div>
  <div class="my-box">
    <button>My Button</button>
  </div>
</div>

Please ensure that attributes like id and for are unique in your HTML code.

Answer 2

To achieve this, you can utilize the CSS property grid-template-rows: subgrid;. Here is a sample code snippet that demonstrates how to implement it:

.my-layout {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-rows: repeat(3, auto);
  align-items: center;
}

.my-box {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.my-box label {
  margin-top: auto;
}

.my-box input {
  width: 100%;
}

.my-box input:first-child,
.my-box button {
  grid-row-start: 2;
}

<div class="my-layout">
  <div class="my-box">
    <input placeholder="No label">
  </div>
  <div class="my-box">
    <label for="input-1">Hint</label>
    <input id="input-1" placeholder="test">
    <small>hint</small>
  </div>
  <div class="my-box">
    <label for="input-2">Long<br>Hint</label>
    <input id="input-2" placeholder="test">
    <small>A really long hint that wraps</small>
  </div>
  <div class="my-box">
    <label for="input-3">No Hint</label>
    <input id="input-3" placeholder="test">
  </div>
  <div class="my-box">
    <button>My Button</button>
  </div>
</div>

Please ensure that attributes like id and for are unique in your HTML code.

Arranging input elements horizontally

Answer №1

Similar questions

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

SASS fails to recognize the variable

Getting elements in order with bootstrap

Is there a way to incorporate a JavaScript variable as the value for CSS width?

Dividing image styles within css

What is the best way to show an HTML file in a WebBrowser using C++?

Angular 4 is having trouble retrieving the JSON response

Creating dynamic div containers on the fly

Can an Angular 5 web application be developed without using Node.js/npm?

HTML: Image not updating despite meta tag refresh

Unable to output value in console using eventListener

How to style an HTML table with just a bottom border

most effective method for recycling dynamic content within Jquery mobile

Utilizing CSS percentage height when the parent element is constrained by a defined minimum and

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

Structural directives allow for the declaration of variables

Image two-way binding in Angular is not performing as anticipated

Getting the value from a label and then setting it as the innerHTML of document.getElementById('label')

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

Having trouble deleting element despite having the correct ID?