So basically, a "left column" inside the wrapper that houses the labels, and adjusts to the longest label-title. And then the inputs on the right-hand-side that are 100% width of what remains after the label. This is for a "liquid" layout so the boxes will resize depending on window-width etc.
I'd really like to avoid using a table-layout for it, but i can't for the life of me figure out how to CSS it up. Maybe you'd need some javascript help to get the max-width of the label?
You can't do this with pure css (without using tables) because the length of the label is, for all intents and purposes, unknown.
As you say, you would have to use Javascript to do some calculations for you in adding up the total width of the label, add on any margins and then calculate a possible width for the input.
Unless your labels are going to change at will (which seems unlikely), I wouldn't bother. Do some initial work on the widest option and the use media queries to adjust everything for smaller viewports.
Thanks a lot! That pretty much does it apart from the labels not being dynamic width within the container, but i can live with that. :D It's only gonna be used for a personal administration-panel anyways so i don't really care about browser-support too much, cheers! :)
Yeah i was kinda hung up on it as well. It's still doable though through JS without too much hassle, so i might go for that solution as well, i'll post an updated fiddle when i'm done. Thanks a lot guys! :D
You don't really need JS to be able to apply the calc() property, you can easily enough do the calc with simple JS, then just apply width through .css('width',value).
True, but wouldn't that defeat the function of the calc() property? As in, the width of the input-field wouldn't update dynamically when you resize the window?
You'd probably need a little bit more than a simple calc JS function in order to dynamically resize the input as you resize your browser, sure. That's why I prefere the fully CSS version.
I've got a CSS issue here that i just can't seem to be able to figure out, so i'm hoping someone out there might help me! :)
What i want to achieve is this:
http://www.mortzen.se/temp/label_mockup.png
(Both boxes are the same, just different widths)
So basically, a "left column" inside the wrapper that houses the labels, and adjusts to the longest label-title. And then the inputs on the right-hand-side that are 100% width of what remains after the label.
This is for a "liquid" layout so the boxes will resize depending on window-width etc.
I'd really like to avoid using a table-layout for it, but i can't for the life of me figure out how to CSS it up. Maybe you'd need some javascript help to get the max-width of the label?
Anyways, i made a little pen with the basic markup, so you won't have to do that. :D
http://codepen.io/anon/pen/HsBxv
If anyone could help i'd greatly appreciate it!
As you say, you would have to use Javascript to do some calculations for you in adding up the total width of the label, add on any margins and then calculate a possible width for the input.
Unless your labels are going to change at will (which seems unlikely), I wouldn't bother. Do some initial work on the widest option and the use media queries to adjust everything for smaller viewports.
You might need a polyfill for unsupported browser though.
That pretty much does it apart from the labels not being dynamic width within the container, but i can live with that. :D
It's only gonna be used for a personal administration-panel anyways so i don't really care about browser-support too much, cheers! :)
As this is no longer a concern I can rest easy.
Thanks a lot guys! :D
http://jsfiddle.net/Yc6CG/8/
Sort of anyways, a bit clunky there, but you get the idea.
I think i'll just settle with having a fixed with for labels, and save myself some hassle. :D