Wrap between spans - cross-browser solution? 1

[OsakaWebbie]

I'm trying to use CSS spans to keep form field labels with their respective fields while allowing wrapping between the label-field sets as needed. In Firefox it works fine to have something like this (simplifying - the actual CSS is external):

  <span style="white-space:nowrap"><label for "somefield">Field: </label><input name="somefield" ... /></span>
  <span style="white-space:nowrap"><label for "someotherfield">Other Field: </label><input name="someotherfield" ... /></span>

But in IE and Chrome (I haven't tested Safari or Opera), simple whitespace between the spans is not enough to allow wrapping, and even a space at the end of the line, the CR, and then more spaces (which are normally there for indenting anyway) is not enough. The only combination I have found to work in IE and Chrome is:

  ...</span> &nbsp;
  <span ...

I don't really want to put that   in there, because it forces two spaces (the regular one and the non-breaking one) in all cases, rather than allowing CSS to dictate the size of the space between. Plus, it's just weird to have that. Any thoughts on a more elegant method that works in all modern browsers?

 

[Geates]

You could use the preformatted tag, <pre>.

<pre>white space                  LOTS of white               space</pre>

Also, make sure you define a DOCTYPE for unbiased rendering.

http://www.w3schools.com/tags/tag_doctype.asp

-Geates

"I hope I can feel and see the change - stop the bleed inside a feel again. Cut the chain of lies you've been feeding my veins; I've got nothing to say to you!"
-Infected Mushroom

 

[OsakaWebbie]

Hmm, I didn't get the confirmation email, so I didn't realize you had replied... And thanks for the reply, but that was not my question - I'm wanting less white space, not more, and form elements can't go inside a <pre> tag. Were you perhaps intending to reply to a different thread? And yes, I define a DOCTYPE (XHTML 1.0 Transitional, although my code doesn't all validate yet - it's a work in progress).

What I need is a series of sections of HTML code (currently held together with <span> tags, but I'm flexible on that) that can allow wrapping between them at the browser's discretion, but not force the wrapping at any given point (i.e. no <br>s). I thought it was simple, but it's apparently not in Chrome and IE.

 

[ChrisHirst]

Text will "wrap" on the nearest space when the row length exceeds the horizontal space available.

A <span> is an inline element which will expand with it's content until constrained by the dimension of the parent container.

If you want the label to wrap in it's container, you need to be using a fixed width BLOCK element to hold the input and it's label.







Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[OsakaWebbie]

Text will "wrap" on the nearest space when the row length exceeds the horizontal space available.

That's what I thought, too, but it only works that way in Firefox. I originally had just a linefeed (which is a type of whitespace) between my spans, and later I tried adding a plain space before every linefeed, but even at that, IE and Chrome don't wrap - the series of spans just scroll off the screen indefinitely, even though the spec, as I (and you) understand it, would allow it to wrap between the spans when necessary.

If you want the label to wrap in it's container...

No, nothing tricky like that. What I want is quite simple - just keep certain pieces of text together but allow wrapping between the pieces. Apparently you guys are thinking I'm trying to do something else because you find it hard to believe that it's not working...

 

[ChrisHirst]

Is there a URL where we can see this mystery?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[OsakaWebbie]

The real code is behind authentication, but I took some of the browser source, simplified it, and put it up as a plain HTML file - see

http://crashjapan.com/db/wraptest.html.

In the process of removing my workaround (the use of a combination of breaking and nonbreaking spaces), I discovered that the failure is not consistent - sometimes what looks like the same code behaves differently. For example, in Chrome there is only one of my "real fields" that should wrap but doesn't, and in IE, in my "real fields", it mostly doesn't wrap but in one spot it does - go figure. In general, my code must be somehow cleaner than it was in times past, because it is not misbehaving as consistently as before.

The oddity of the first field starting after my section title instead of under it is new in this test file - I hadn't noticed that happening in my real code, but I'll keep an eye out for it in the future. (After the end of </h3> it should start a new line, right?)

But the most interesting thing I discovered is that if there is no whitespace between any of the elements inside the span, the wrapping between spans works in all three browsers I have been testing in. (I need to test Safari at some point - I know it was misbehaving badly in the past on certain instances of this type of thing).

To save you a trip to my CSS file, the definition you probably most want to know says:

span.label-n-input { white-space:nowrap; margin-right:2em;}

 

[ChrisHirst]

One immediate question is,

why are you trying to recreate a table layout?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[OsakaWebbie]

Recreate a table layout? I don't know what you mean by that - there are no tables in the file you're seeing. This is an old application that was originally laid out in tables, but I'm redoing it in a non-table layout that is intended to have separation between markup and presentation, so that each "client" can play with their CSS file if they want to. The problem at hand is related to that: I don't want to dictate in the markup when the form inputs wrap to the next line - I want the CSS and browser settings to determine that. In the old version there were hard-coded breaks (and table cells) all over the place, and it looked completely different than it does now. If there is something in the way I'm doing it that betrays the fact that I'm an old-school programmer still getting used to the new ways of doing things, please forgive me, but the intent with this application is to keep layout out of the markup - that's why I'm annoyed to have to use markup (the extra &nbsp; or avoiding spaces inside the <span>) to make the browser obey the layout instructions. If your impression is because of the red boxes, keep in mind that those are dictated only in the CSS, which is client-editable.

Now, can we talk about my question?

 

[ChrisHirst]

But what you are trying to do is use a CSS layout purely for the sake of it being a CSS layout.

You can still seperate markup and presentation with a table and you do NOT have to try and change the natural behaviour of elements, add to that your style rules will unecessarily complex and letting clients loose with it is likely to be a disaster, and your markup will be equally "messy", a definite for a case of "divitus"

Just because you can use divs and spans doesn't mean you HAVE to.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[OsakaWebbie]

I know. But (a) If I WANT to use spans to keep my labels with my inputs while allowing the overall content to flow, I should be allowed to do so, and (b) this problem is relevent to both table-based and tableless layouts. Even in my old table-based layout, a set of checkboxes that were generated from database data (and therefore were unknown in number and in length of label text) were all in one cell of the table and allowed to flow - I had to use the "space + non-breaking space" trick back then also. At the time I just shrugged and went on, but now I'm trying to get rid of that markup hack - it's sloppy, and it introduces spacing between elements that might not always be desired. Please help me with that issue - I don't care what kind of overall layout you like, but I want to get back to the topic.

If you have a suggestion of a different way to accomplish the same thing, that's fine, but I want to accomodate:
[ul][li]an unknown number of inputs (text, checkbox, or whatever)[/li]
[li]labels of unknown length[/li]
[li]the user able to change the text size to his taste[/li][/ul]
but keep each input and its label together, without wasting a ton of space by forcing every label-input set to be on its own line. I thought "white-space:nowrap" was the proper way to do that (in any philosophy of layout), but it appears to have idiocyncrasies.

 

[ChrisHirst]

If I WANT to use spans to keep my labels with my inputs while allowing the overall content to flow, I should be allowed to do so

Of course BUT It isn't going to happen because you are trying to make several disconnected elements work together and defeat their intended purpose.

You other opyion is to use a unordered list an use the display: table and display: table-row property values. But will not work if you still have to support the aging IE7.

Example

http://www.modtalk.co.uk/_site/code/css/centred-list/

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ChrisHirst]

By the way, there is a simple rule to follow for CSS layouts which is:



If it is too difficult to get it right YOU are doing something wrong.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[OsakaWebbie]

Of course BUT It isn't going to happen because you are trying to make several disconnected elements work together and defeat their intended purpose.

Really? Please tell me what intended purpose I'm trying to defeat by wanting a label to stay close to the input it is labeling. Your suggestion of using a list item for a form input label (which isn't a list) and then changing its behavior to act like a table (when it isn't a table and I don't even want it to look like one) sounds to me a lot farther from intended purposes. What am I not understanding?

Or rather, just tell how you would do this - let's stop talking about theories and use real code examples. (And although I agree that IE7 is dying, it's not dead yet at over 10% usage share, so I'm not ready to stop supporting it yet, especially for something this simple.) What's your suggestion that only uses elements the way you feel they were intended - inputs, labels, divs, spans, lists, tables, etc.? Show me logical, simple markup for a dozen or so labeled inputs that allows variation in the label text, the input width, and the text size set in the browser, using space efficiently while somehow preventing inputs from being orphaned from their labels. I don't think I'm asking too much.

 

[ChrisHirst]

And what is so difficult about using a table when the layout calls for a tabular layout?

It's fine being CSS purist, but the general idea for "semantic" markup is to use the appropriate elements for the appropriate job.

For the layout you want, you either use a table or a list to emulate a table

The behaviour you want from spans IS the "natural" behaviour for table rows and cells, why are you so against using the document flow and natural behaviour of elements in order to acheive a manageable and stable layout?



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[OsakaWebbie]

I don't understand why you keep insisting that my layout is tabular in nature. I do not want all the fields lined up - I want them to only take up the amount of horizontal space that each one individually requires, and flow freely from there.

Are you possibly distracted by the fact that in my original test file I used copy/paste to make a pile of fields, and therefore they were all the same size (and hence, happened to line up vertically)? Okay, just for you I varied the sizes of the labels and inputs, and even added some checkboxes for more variety. Take a look at

http://crashjapan.com/db/wraptest.html

again, please - does that help you understand my question better?

 

[audiopro]

Tables are for tabular data and a form is just that.
From a users point of view, a form with input fields and other controls not stacked vertically is a very confusing thing indeed. The purpose of a form is to input data, one item at a time and trying to save space rather than spread the form out can make for a confusing experience for the visitor.

I alway stick to '1 input item per line'.

I realise your example form was illustrating the spacing issues but I don't understand why your form would need to horizontally scroll off the visible page.


Keith

http://www.studiosoft.co.uk

 

[audiopro]

What type of information is your form gathering?

That example layout would confuse most people.

Keith

http://www.studiosoft.co.uk

 

[OsakaWebbie]

...I don't understand why your form would need to horizontally scroll off the visible page.

I don't want it to scroll off the visible page - that's the whole point of my question. From my understanding of HTML and CSS, it shouldn't. (And it doesn't in Firefox and Safari, although Safari has trouble in one spot.)

What type of information is your form gathering?

This example represents lots of forms, actually - it is a complex dynamic interface to a highly relational database about people contacts, event attendance, donations, action logs, etc. It has many pages and sometimes several forms per page, and some of the forms change content based on the data in the database. The most notable example of that is the "categories". On the most-used page, a page that shows all the related data about a given person, the first of several sections has a checkbox for every possible "category" that the person could be in, so that a user can check or uncheck any of them and save the changes right there. Those categories can be created by the users of the database, and can get pretty numerous - one installation I just looked at has 78 of them. I agree that it would be easier to find a particular category if they were all lined up, but since there are other sections of useful information (and other forms) below that section, I don't want to put each of those 78 checkboxes on its own line, and I don't think my users would want me to, either - the page is already long enough.

That example layout would confuse most people.

Perhaps, but this database application has been used by dozens of people, and no one has complained yet - instead of wanting it simpler, they always ask for more features, which causes the pages to become even more complex and long.

 

[ChrisHirst]

Wow!!! that had me reaching for the close button fairly quickly!


Do you want people to fill in the form fields or stare at it in total bewilderment?

Think about about usability.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum