Page 1 of 1

Orders - Input Field Sizes

Posted: Mon Jul 19, 2010 1:37 pm
by visualharmony
CMSMS 1.8 / Orders 1.8.6

I am working on restyling the billing and shipping form.  The input fields are all different sizes.  I would like to make the sizes consistent.  Where do I change that?

I would prefer to control the sizing with CSS, but the generated source has the size attribute values hard-coded (ex. size="80").

Thanks for your help!
Jack

Re: Orders - Input Field Sizes

Posted: Mon Jul 19, 2010 5:50 pm
by Dr.CSS
I change the input sizes all the time with CSS no matter what the size= says you just have to know what you can target find them by looking at the page view source...

Re: Orders - Input Field Sizes

Posted: Wed Jun 22, 2011 5:14 am
by ncd
Hi,

Just wondering if someone can be a bit more specific here...

I see from the source that the class is "cms_textfield" - there doesn't seem to be any specific style sheets for the Orders Module, so I tried adding the class to my main style sheet but that didn't work.

Does anyone know how to target these input fields to make them consistent?

Thanks!

Re: Orders - Input Field Sizes

Posted: Wed Jun 22, 2011 5:29 am
by uniqu3
You can target these with your wrapping id or class for example if you would have something like <div class="orders">{Orders}</div>
your stylesheet could look like
.orders input.cms_textfield {
width: 100px;
}

Using only input.cms_textfield or input.cms_input would affect more modules/input/text fields then only Orders, as these classes are also used in other cmsm modules.

Re: Orders - Input Field Sizes

Posted: Wed Jun 22, 2011 8:48 am
by ncd
Legend! Thanks :)

I also found this work around http://forum.cmsmadesimple.org/viewtopi ... es#p180449

Basically:
{$prompt_username}
replace it to
{$prompt_username|replace:'size="25"':'size="33" '}

I think your suggestion is better though - however, I'm having one problem whereby once you proceed to the confirmation page, there's a 'back' link and if you go back all the styles are lost, yet the source is the same!?

Any ideas?

Thanks!

Re: Orders - Input Field Sizes

Posted: Wed Jun 22, 2011 9:20 am
by uniqu3
My sample of wrapping orders in a div was only example how you can achieve it, best option would be doing this in Orders module templates.

If your styles are attached to template these should remain the same.

Re: Orders - Input Field Sizes

Posted: Wed Jun 22, 2011 9:35 am
by ncd
Yes - that was in relation to the templates, but as I mentioned, I think your way is better - more control with css!

As per your suggestion, I added the class to my style sheet, yet when you click the 'back' link, the styles are lost!

The source code displays the same, so it's quite confusing :-\

Anyone why this would happen?

Thanks!