Need smaller Qty box in cart to make room for product pics

[Jeff]

First I must say I love the improvements that SS 8.2 adds.

I'm thinking of using SS's new capability to display product thumbnails in the cart. But our cart pages are rather narrow and some of our product names are long. There isn't much room to place even a tiny thumbnail in the product listing. I don't want to force sideways scrolling on the 12% of our shoppers still using 800X600 resolution.

One bit of fat is the quantity box which is about 6 characters wide. No one ever orders more than 99 of a product from us. Where is this width set? I played with the css files and can't find anything there.

[lumpynose]

Add some CSS to change its width.

[Jeff]

I'm told by Lexiconn that the width can't be changed. Did some more fiddling with CSS today and was able to change many properties of that box (bg color for example) but not the width.

Here's what Lexiconn had to say:

"Hi Jeff,

Unfortunately, I do not see any way you would be able to change this...

That portion of the shopping cart is generated via the [-- SC_Form --] tag. So cannot be edited directly as it is produced entirely by that tag. The only way to modify anything inside of it would be via the css... but, if you look at the source of the cart page you can see:

<td class="cart_quantity"><input tabindex="2" type=text name="0:qnty" value="1" size=4></td>

The <td> class 'cart_quantity' in your css file does not control the size of the input box in any way and the size is hardcoded directly into the <input> statement with: size=4.
,

Down the road, SS might consider reducing the width of that box or making the width adjustable in cart set-up. Even if the width were set to 2 characters, the width of the data entered is unlimited and would just scroll.

[lumpynose]

The name of the input box is 0:qnty; that's the first one. The next one's name will be 1:qnty, and the one after that will be 2:qnty, and so on. So as an ugly kludge you could add some css to control the width of each one of those; e.g.,

Code: Select all

input.0:qnty { ... }
input.1:qnty { ... }
etc.

up to some large number for the number in front of the colon. The ones that aren't needed will be ignored.

I'm assuming a colon is allowed in the name of a css element. If not, then I'd guess that you'd have to get really hard core and walk the DOM with some javascript.