Kevin Powell - Community•2w ago

How to make varying labels width and input-fields take same horizontal space

Hello guys, sorry to disturb you all; can someone explain how I should proceed for my login labels and input fields to take the same space horizontally please, for e.g in the picture, if the label is longer, our input field will be further to the right... I don't want that.. I want both labels and input fields to take the same width. Here is my codepen: https://codepen.io/Fakeur/pen/WNVaMxx

Untitled

...

51 Replies

glutonium•2w ago

if one lable says "name" and the other says "something very long" u cannot make them of the same size. like they r just 2 sentences with different length the best u can do here is move the input field of the name further towards the right

glutonium•2w ago

or maybe u can try putting label above input field

name
---------------------
---------------------

something long
---------------------
---------------------

name
---------------------
---------------------

something long
---------------------
---------------------

or maybe this. idk

-- name -----------------
-------------------------

-- something long -------
-------------------------

-- name -----------------
-------------------------

-- something long -------
-------------------------

Jochem•2w ago

the easiest quick and dirty way is to wrap the labels and inputs in a form (like you should be doing anyway) and use this:

form {
  display: flex;
  flex-wrap: wrap;
  width: 60ch;
}
form > * {
  width: 50%;
}

form {
  display: flex;
  flex-wrap: wrap;
  width: 60ch;
}
form > * {
  width: 50%;
}

it's very quick and dirty very best way is to use grid

Zeshan Merchant•2w ago

My suggestion would be use grids with 1 parent container, you can use form instead of div for better semantics

 <body>
    <h1>Learning promises, async and await</h1>
   <div class="wrapper">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" /> <br/>
    <label for="delay">Something very long:</label>
    <input type="text" id="delay" name="delay" /><br/>
    <button type="submit">Set alarm</button>
   </div>
  </body>

 <body>
    <h1>Learning promises, async and await</h1>
   <div class="wrapper">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" /> <br/>
    <label for="delay">Something very long:</label>
    <input type="text" id="delay" name="delay" /><br/>
    <button type="submit">Set alarm</button>
   </div>
  </body>

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100svh;
}

h1 {
    margin-bottom: 1em;
}

input {
    margin-bottom: 2em ;
}

.wrapper{
  display : grid;
  grid-template-columns : repeat(2,1fr);
  width: 350px;
}

.wrapper label{
  grid-column : 1/2;
}

.wrapper button{
  grid-column : 1/3;
  justify-self : center;
}

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100svh;
}

h1 {
    margin-bottom: 1em;
}

input {
    margin-bottom: 2em ;
}

.wrapper{
  display : grid;
  grid-template-columns : repeat(2,1fr);
  width: 350px;
}

.wrapper label{
  grid-column : 1/2;
}

.wrapper button{
  grid-column : 1/3;
  justify-self : center;
}

Jochem•2w ago

^ This is the best solution yeah

Zeshan Merchant•2w ago

you can adjust the width as you want https://codepen.io/Zeshan-Merchant-the-scripter/pen/NWQOMPo which one?

Jochem•2w ago

yours

V3X4TI0US•2w ago

Dayummm First time in my life someone appreciated my code 🥹 And first time I actually helped in a post

Jochem•2w ago

are you using two accounts, or did you message on the wrong post?

Tok124 (CSS Nerd)•2w ago

i would rather do grid-template-columns:auto 1fr; So the first columns width is based on the width of the label with the most text. And for button i would rather do grid-column:1/-1; so it will always span full width no matter how many columns you have

Zeshan Merchant•2w ago

actually the first one is from my work PC, and second one is from my mobile. I saw the post in my mobile. First one I added for any help i might need while I am at work. I hope there are no issues with that yeah this is also cool and better approach

Jochem•2w ago

yeah, you're good. I was just confused

Jeluxe•2w ago

Btw what is this code do? body { min-height: 100vh; min-height: 100svh; }

Zeshan Merchant•2w ago

idk, it was in his code pen

Jochem•2w ago

it sets the height of the body to 100vh, and if the browser supports it to 100svh. but please make a new question if you want to go into it more, this isn't on topic for Faker's question

Zeshan Merchant•2w ago

I always notice this and I really appreciate your dedication to the server and the rules. ❤️🙌

Gaming

Programming

How to make varying labels width and input-fields take same horizontal space