jQuery Form Wizard styling

[peteorme]

1) Script Title: jQuery Form Wizard

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...formwizard.htm

3) Describe problem: On IE7 (yeah I know) the text for each form element (e.g Address #2) seems to get constrained. It appears as though it wraps around the moment a space is put in. On the DD site this can be seen on step 2 of the first demo. It does appear okay on IE8 and FF. I just can't see anything in the css that would cause this? Should I just not worry?

[jscheuer1]

If you mean that the Next 'button' (it's really a span) is wrapped to the next line, I'd try changing this line in the script:

			var $paginatediv=$('<div class="formpaginate" style="overflow:hidden;"><span class="prev" style="float:left">Back</span> <span class="status">Step 1 of </span> <span class="next" style="float:right">Next</span></div>')

to:

			var $paginatediv=$('<div class="formpaginate" style="overflow:hidden;"><span class="next" style="float:right">Next</span> <span class="status">Step 1 of </span> <span class="prev" style="float:left">Back</span></div>')

What it does is reverse the order of the two floated spans (Next and Back). Though counterintuitive, because they are floated this shouldn't change the order in which they appear on the page. And doing it this way has a very good chance at fixing the issue. It does in ordinary markup, so should here. Other browsers that already do this right shouldn't be affected.

[peteorme]

John,

Thanks but that's not what I meant - sorry I shouldn't have used the word "element"! What I mean is the actual free text prior to the form element. e.g. on the dome on DD if you look at step 2 it shows;

Address
#1

When it should be

Address #1

Address #1:<br /> <input id="addr1" type="text" size="35" /><br />

as there is no line wrap before the # in the html but it is wrapped on the page.

[jscheuer1]

I see. What I said about the other matter is still probably valid. For this you can, since it's hard coded use:

Address&nbsp;#1:<br /> <input id="addr1" type="text" size="35" /><br />

Or put inline style or in the stylesheet, style for the fieldset (example inline):

<fieldset style="white-space: nowrap;" class="sectionwrap">
<legend>Shipping Address</legend>
Country:<br /> <input id="country" type="text" size="35" /><br />
State/Province:<br /> <input id="state" type="text" size="35" /><br />
Address #1:<br /> <input id="addr1" type="text" size="35" /><br />
Address #2:<br /> <input id="addr2" type="text" size="35" /><br />
</fieldset>

[peteorme]

John,

Brilliant. Non breaking spaces solved the problem for my implementation. So simple yet so far from where I was thinking! Thank you!

[Budddy the Bear]

Thank you for the solution; I signed up for this very problem!