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
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
or maybe u can try putting label above input field
or maybe this. idk
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:
it's very quick and dirty
very
best way is to use grid
My suggestion would be use grids with 1 parent container, you can use form instead of div for better semantics
^ This is the best solution yeah
you can adjust the width as you want
https://codepen.io/Zeshan-Merchant-the-scripter/pen/NWQOMPo
which one?
yours
Dayummm
First time in my life someone appreciated my code
š„¹
And first time I actually helped in a post
are you using two accounts, or did you message on the wrong post?
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 haveactually 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
yeah, you're good. I was just confused
Btw what is this code do?
body {
min-height: 100vh;
min-height: 100svh;
}
idk, it was in his code pen
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
I always notice this and I really appreciate your dedication to the server and the rules. ā¤ļøš
NO! BAD BAD BAD!!!
no
margin: 0 on *everything else looks correct
I agree on that, but it was not added by Zeshan, it was in Faker's original codepen. I would much rather use a CSS Reset
yes, a good css reset
i didn't notice the margin on the css, so
my apologies for saying this is wrong
BAD BAD BAD!!!
Hmm I always use margin 0 š why is it bad please
no
margin: 0 on *what is the css reset ?
you're removing the ok browser margins to then add them back
What i have done is to take CSS Reset from Meyerweb and then i have customized it to my own preference. And added some additional stuff. But it resets some user agent styles
a css reset is a set of styles crafted to remove as much bullshittery and inconsistency from browsers, so you start from an equally equal clean slate on all browsers
ah okay I see, so, no margin of 0 on * , but if I include it on body, it is the same thing ?
You can use margin:0; on body, thats fine
it's different
oh okay
on body, you may want to use it
the 8px default margin can cause weird issues
yep I see, I think normally I put it in the body but don't know why I but it in * š„²
Thanks for pointing this out, really appreciate !!
And thanks to all for the solution of using grid... I will have a look and come back if I have some doubts
I also see a lot of people doing something like
Like seriously... Come on ! Why would you do that. Body does not even have a default padding in the first place. Why would you set padding to 0 when body doesnt have a padding xD hahaha
š
yeah, I was one of those person š¤£
but I don't do it now
just to be double sure because some browsers may do weird stuff
They must be using a very strange browser in this case. I have never seen any browser that applies a padding to body. But well, I have not tried every single browser out there. But most of them is just based of chromium so yeah... Most of them are basicly the same
i do it because im just paranoid and bad habits
haha
š
but hey, at least i dont put
margin: 0 on * š¤£Yeah hahaha š That's far worse honestly xD
some things do have both margins and paddings, like lists
probably my bad habit came from there
Not my code. I just edited the wrapper part
i know, i didnt respond to your message
Zeshan and me are the same person btw
oh, i didnt knew