12 replies [Last post]
ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

asume folowing problem:

you have a label and an input (various types like textfield, select, ...)

now you want to wrap them together. this means:

#label 1 #input1 #label2 #input2 #label3 #input3

are listet all together in a row. on smaller screen solutions or not-maximised browser windows it should look like

#label1 #input1 #label2 #input2
#label3 #input 3

and so on, but never like

#label1 #input1 #label2
#input2 #label3 #input3

.. hope you get my point...

but i have no idea how i can realize this :oops:
in html of course i did use the label tag with the for attribute according to the inputs id, but that alone doesnt really help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 12 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

2 elements wrap together

Not tested.

Wrap each label/input pair in its own div. Style the div {white-space: pre;}.

That seems an inelegant hack, but it might work if nothing better comes along.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 16 years 12 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

2 elements wrap together

As suggested above, plus maybe try "white-space: nowrap;" on each pair DIV container. Personally, and input name and an input field would likely get a table from me unless I were just trying to prove something to myself, but I'm lazy that way.

ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

2 elements wrap together

@timebandit: tabels are no real alternative here, because i can not a assume a fixed ammount of inputs per row due of the possibility of highly different screen resolutions. also with tables the whole stuff will get a bit complicater (html-form is created out of xforms with xslt)

but, i tried your piece of code and it would work. would because i set the labels to display: block; to be able to set a width for them (inline elements cant have a width set). now can i choose between fixed sizes or wrapping together or is there another way?

blackEyEz
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2004-09-02
Posts: 16
Points: 0

2 elements wrap together

try playing with :

display: inline-block;
display: -moz-inline-box !important; /*moz only */

on the labels, it makes them block elements where you can give a width too and yet they are inline placed so you can stack elements horizontaly for your form.

I tested it on ie5+/moz and opera but should work on safari too.

caution: ie doesnt like the mozilla display property so you have to place the moz code within a moz hack.

Good luck

ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

2 elements wrap together

thanks a lot mister blackeyez your suggestions works perfectly!!!

ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

2 elements wrap together

back again with another problem:
when i use -moz-inline-box it seams that i can't set a tex-align !?
in ie it works well with inline-block

ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

2 elements wrap together

okay i figured out that text-align is only for inline elements, but isn't there an equevalent for block-elements???
only thing that seems to work is old-school align="right" but that of course causes an error in xhtml 1.0 validation

blackEyEz
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2004-09-02
Posts: 16
Points: 0

2 elements wrap together

ppp wrote:
okay i figured out that text-align is only for inline elements, but isn't there an equevalent for block-elements???
only thing that seems to work is old-school align="right" but that of course causes an error in xhtml 1.0 validation

verticaly and horizontaly alignment is no problem with me.

I put a form example on my webspace.
You can check the HTML on:
http://www.xs4all.nl/~blackeye/formulier.html

and the CSS on:
http://www.xs4all.nl/~blackeye/incl/css/initial.css
(scroll down to bottom)

Warning: nested fieldsets tend to break down in opera 7.5 without giving a width and under mozilla inline-block elements cut longer texts off if you dont specify a height.

Good luck

ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

2 elements wrap together

hm? i viewed your page with firefox 1.0 and your label text was aligned to left allthough the text-align said right. same problem as by mine site. in ie it works the intended way.

blackEyEz
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2004-09-02
Posts: 16
Points: 0

2 elements wrap together

very good question lol...

lets call it friday Wink

... Back to the drawing board ...

blackEyEz
Offline
Regular
Last seen: 16 years 12 weeks ago
Joined: 2004-09-02
Posts: 16
Points: 0

2 elements wrap together

blackEyEz wrote:
very good question lol...

lets call it friday Wink

... Back to the drawing board ...

argh reporting a moz bug is a pain in the a$$ Oups

ah update:

-moz-box-direction: reverse;

does de trick but with longer text it runs off on the left Smile and IE likes the code so text-align can still be used, will check with opera later.

ppp
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-09-20
Posts: 22
Points: 0

2 elements wrap together

oh thx your -moz-box-direction: reverse; finally works. allthough bit of pain in the ass, as you mentioned.