How to Align and resize input boxes?

Hello all,

I have a series of 7-10 attribute input boxes. They are currently different lengths and not aligned vertically. Is there a simple way to make them all the same length and align them vertically?

Any help is greatly appreciated.
Thank you.

A URL would help here....

But off the top of my head.

They are not aligned because the option names are not the same length. You can set the width of the option names with a css rule added to the bottom of the stylesheet something like:

.optionName{width:150px;}

change the 150px to suit your site.

I am surprised that the inputs are different lengths. What sort of inputs are they. Gosh a URL would help :smile:

niccol:

A URL would help here....

But off the top of my head.

They are not aligned because the option names are not the same length. You can set the width of the option names with a css rule added to the bottom of the stylesheet something like:

.optionName{width:150px;}

> 
> change the 150px to suit your site.
> 
> I am surprised that the inputs are different lengths.  What sort of inputs are they.  Gosh a URL would help :smile:

Sorry about that Niccol! 

Here's an URL.

<http://www.kcbgraphics.com/index.php?main_page=product_info&cPath=10_6_7&products_id=12>

I have tried .optionName bit it doesn't seem to effect the length of the input box, only the space after the Option Name before the input box starts.

I'm using ZC 1.3.8
PHP5.2.9
MySql 5.0.81

Well optionname does exactly what you have discovered.

By default the select dropdown type menus are rendered just big enough to fit the contents. To change this you could add:

#productAttributes select{width:300px}

A good resource for looking at how browsers render the <input type="file"> is:

http://www.456bereastreet.com/lab/styling-form-controls-revisited/file-select/

Maybe someone else has some good advice here?

niccol:

Well optionname does exactly what you have discovered.

By default the select dropdown type menus are rendered just big enough to fit the contents. To change this you could add:

#productAttributes select{width:300px}

Thanks Nick!

That works with well with the attributes that have a drop down of choices but not for a text or upload attribute.
You can see it in the link I provided earlier.
Any ideas on these two??
Sorry for my ignorance on this!!

Well the text input should be no problem. It will be something like:

#productAttributes input{width:300px}

but I can't find one of those on your site.:smile: but maybe I am missing it.

The "input type=file" which produce the upload boxes are notorously difficult to style. That is what the link I sent you is about. I thought I had talked about this but when I re-read my posts I realise I haven't (going mad:wacko:)

Browsers are very uneven about how they display these fields. Applying styles is fairly random in my experience.

Not a perfect answer I am afraid but maybe someone out there has better advice??

niccol:

Well the text input should be no problem. It will be something like:

#productAttributes input{width:300px}

> 
> but I can't find one of those on your site.:smile: but maybe I am missing it.
> 
> The "input type=file" which produce the upload boxes are notorously difficult to style.  That is what the link I sent you is about.  I thought I had talked about this but when I re-read my posts I realise I haven't (going mad:wacko:)
> 
> Browsers are very uneven about how they display these fields.  Applying styles is fairly random in my experience.
> 
> Not  a perfect answer I am afraid but maybe someone out there has better advice??

Thanks Nick! I appreciate your help.