SELECT boxes not aligned in IE

Submitted by johnevi on Thu, 07/21/2011 - 15:53

I have a fairly simple form that includes a combination of text boxes and select boxes. I am overriding the CSS to ensure a label width of 200px in order to align all of the fields. In Firefox, this works fine. In IE, however, the text boxes are aligned correctly but the select boxes are rendering farther to the left than the text boxes.

I can't see the generated HTML in IE, perhaps because this part of the form is in a partial page.

Any ideas? Thanks.

RE: SELECT boxes not aligned in IE

Is there only one Group that all the fields sit in? Could you provide details of the type of Group that these controls sit in - Vertical / horizontal, force ticked, etc.
Is there any width setting on the groups or containers?

Can you provide some details of how much the text boxes are positioned to the left?
If you are able to attach a partial screenshot of what is wrong.

When you refere to IE, is there a particular version IE6/7/8/9, as they have different behaviour.

Have you considered using a web developer tool for inspecting the HTML:
1) Firebug of Firefox
3) Developer Tool for IE.

RE: SELECT boxes not aligned in IE

Steve,

The fields are contained in a layout group that is at the top level of a partial page. The controls in the layout group are oriented vertically, and the width of the group is not specified. The select boxes are aligned about 20px left of the aligned text boxes.

This is seen using IE 8, but not in Firefox. I don't have MS Developer tool loaded on my machine, but I'm trying to get it. Sorry I can't provide a screen shot.

Thanks.

Is there only one Group that all the fields sit in? Could you provide details of the type of Group that these controls sit in - Vertical / horizontal, force ticked, etc.
Is there any width setting on the groups or containers?

Can you provide some details of how much the text boxes are positioned to the left?
If you are able to attach a partial screenshot of what is wrong.

When you refere to IE, is there a particular version IE6/7/8/9, as they have different behaviour.

Have you considered using a web developer tool for inspecting the HTML:
1) Firebug of Firefox
3) Developer Tool for IE.

RE: SELECT boxes not aligned in IE

The standard Layout Group from the palette is defined with a vertical layout, which will control the position of labels and fields based on the width of the label background. By default the CSS will set a fixed width of 150px to label Backgrounds for these types of Group. The label and field Backgrounds are rendered in the HTML with DIV/SPANs to control the layout.

If the width was not set on the label backgrounds then the fields would not align as they would be positioned relative to the width of the labels content. So, the fields would appear staggered. Ths can be desirable in some situations.

My guess is that that the actual widths on the label backgrounds are currently variable. Perhaps some are 200px, some are 150px?

There are a couple of options you could look at:

Check that the CSS override width is set to 200px for every label Background. It may be worth checking there are no width settings on the field backgrounds. Thi should ensure that all the labels and fields align.[/*]
The other option is to set the "Force Table layout" on the layout group. This will switch the HTML to render an HTML table with one column for the labels, and one for the fields. With this option you can then simply set the CSS Override width to 200px on the first label Background, and then the HTML table structure will adjust all the other labels and fields automatically.[/*]

For aligning a set of vertical fields the second option is the most straight forward.

For further guidance on understanding the HTML generated with various Group/Field settings, consult the following FAQ entry: UI Look and Feel - CSS Design Principles and Templates