Drop-down menu fixed length? Possible?

[owen]

As usual, I have looked and looked on here for an answer to this, to no avail: How do you alter, or set to a fixed length, the field-length of the attribute drop-down menus?

 

I've been through product_info.php and html_output.php, but I can't see where, if possible, to alter/modify (I'm pretty inexperienced with PHP).

 

I have many drop-downs for each item in my store, and I think it looks very untidy as it is now i.e. 10 or so DD's all at different lengths.....And if I do, my customers probably do too.

 

I hope that all made sense. Any ideas are appreciated...

[peterr]

Hi,

 

No doubt you mean fixed width, and not fixed length for your drop-downs. To limit the length would limit the number of select options available, and I'm sure you don't want that. :)

 

Assuming this is your store, and this:

 

http://www.coolvolt.com/shop/product_info.php/products_id/38?

 

is what you are talking about, I can possibly explain it by one of the drop-downs. Look at the "Graphics option", and open the drop-down, you will see the third option is the widest, and that determines the width of drop-downs (select/options).

 

That is, the width of the widest option will determine how big the 'total option list' is going to be.

 

To make them all the same width, you will have to decide whether you want to exclude some of the VAT information, or, probably better, increase the width of options like "Case Option". It may look a big strange, but that is what you want isn't it, all the dropdowns to look symetrical. :)

 

You can set the width of dropdowns, I'd have to check some notes somewhere, I forget at present.

 

Hope tha gets you started anyway,

 

Peter

[peterr]

Hi,

 

From memory, you can't do it in 'straight' html, but would need to use Javascript or a CSS to define a 'style' that has a width. However, there are cross-browser' issues, that is, it won't work using those methods in all browsers. messy, eh. :D

 

The best way is to force the width by adding, as your first option a line like this:

 

-------- Not Selected ----------------

 

OR maybe ...

 

-------- Please choose your selection -----------

 

after finding out what the max width of any of the options will be, or just determine a width that you will keep as a standard for that form, or all forms with dropdowns.

 

But then, of course, people may sometimes not choose a selection. I see you use option value '74' already for 'not selected', so use a similar method to check if they have chosen an option.

 

Hope that helps,

 

Peter

[owen]

Thanks for your replies, Peter, and yes I did mean fixed width! ;)

 

I've thought about using the methods you described e.g -------- Not Selected ---------------- , but as you say, I wanted to keep configuration simple i.e so people do not have to make a selection.

 

I'm trying to figure out if this can be done with CSS either via external or on page style. Did you manage to find anything in your notes?

 

Thanks again for your replies.

 

Owen

[peterr]

Hi Owen,

 

I've thought about using the methods you described e.g -------- Not Selected ---------------- , but as you say, I wanted to keep configuration simple i.e so people do not have to make a selection.

 

I was going to suggest simply adding a product attribute, with:

 

-------- Not Selected ----------------

 

which would force the dropdown width, but as you say, you would rather people not have to make a selection. By that, I assume, you would prefer to have the 'standard' options as the first option shown in the dropdown.

 

Try adding some 'non blank spaces' to your product attributes, as a test, especially try the one that is quite distinctively narrower than the other. Just try this:

 

 

 

several times, after the last character in your product attributes for that dropdown, and see if it forces the width ??

 

I'm trying to figure out if this can be done with CSS either via external or on page style. Did you manage to find anything in your notes?

 

CSS, yes, that was how some people have done it. I did a Google on:

 

"dropdown width"

 

and some of the first few posts showed how to use CSS to specify the width, in a style. When 'googling' on this, stay away from any posts to do with ASP or VBS, because most likely, they will be specific for _those_ tools, we are using a superior tool, ...PHP. :D

 

I didn't find the notes, but other Googling showed me that the use of the "DIV' command (It's called 'innerhtml' I think, from memory) would in fact be a better solution, to solve any cross browser issues. I know my notes have something about the use of "DIV", and there was some info on Sitepoint, ... hang on .....

 

Yep, if you check out this post:

 

http://www.sitepoint.com/forums/showthread.php?t=115863

 

You can see , in post #7, how to use "DIV", I found it great for testing also. yes, it is ASP, but the example by 'Jofa' is all Javascript, so just try what he has given as an example. It's a great way to have client side actions dynamically changed form contenst, _without_ having to do a form reload or go back out to process any scripts on the server.

 

Also, reading through that post, it just 'twigged' how you can force the dropdown width.

 

1. Add a product attribute, like this:

 

-------- Not Selected ----------------

 

2. Use either:

 

<OPTION SELECTED> ...... </OPTION>

 

to force what option will appear first, or ensure that the _first_ option in your select list is the option that you want people to see.

 

This way, the 'wide' product attribute determines that the width will be at least _that_ wide, and you can control the order of the options from the PHP code.

 

Hope that helps,

 

Peter

[owen]

This is proving to be more of a nightmare than I at first thought it would <_<...

 

I tried adding   to pad out the width and it does work, but causes a knock on problem, namely; these 'spaces' get carried throughout the checkout process, which knocks all the widths in shopping_cart.php (for instance) out of whack.

 

Thank you for the link and examples, but unfortunately I can see no way of using <DIV> styles, or <option> styles as the attributes are pulled dynamically from the DB (the ASP examples were for static pages). Even if you do apply a width style attribute via stylesheet.css (which can be done - I tried it :) ), this then affects all drop down menus throughout the site :(

 

 

I'm thinking of going with the '-------- Not Selected ----------------' idea, and possibly implementing a javascript which forces a selection before they can add an item to their basket. Is this possible? Any ideas on this?

 

Thanks again Peter for all your suggestions. At least we've seemed to polarise the issue. I hope we can figure something out, because I'm sure I can't be the only one who'd like to see this done.

 

Owen

[Christian Lescuyer]

Thanks for your replies, Peter, and yes I did mean fixed width!

Then it's easy. Just specify the width of drop downs in CSS. Something like:

select { width: 100px; }

[peterr]

Hi,

 

Then it's easy. Just specify the width of drop downs in CSS. Something like:

select { width: 100px; }

 

I did mention using CSS (see post#3 in this thread), but all the docs I have seen have mentioned problems in different browsers, that is works in one browser, won't work in another. You will definitely have continual cross-browser problems.

 

The way to do it with CSS is:

 

<select style="WIDTH: 30px">
<option value="1" style="WIDTH: 100px">Blue Computer case</option>
<option value="2" style="WIDTH: 100px">Black Computer case</option>
</select>

 

But the CSS way for forcing the width is not 100% workable.

 

Peter

[peterr]

Hi Owen,

 

This is proving to be more of a nightmare than I at first thought it would  <_<...

 

Yes, but think of what you are learning as you go. :)

 

Okay, so the use of " " is a no go, let's forget about that.

 

Thank you for the link and examples, but unfortunately I can see no way of using <DIV> styles, or <option> styles as the attributes are pulled dynamically from the DB (the ASP examples were for static pages).

 

Yes, the post #7 was static, not data pulled from a DB, but it was to show you how to use "DIV", nothing else. Btw, if you try copying the code from post#7 and paste it into some browsers, it will hang, paste it into any editor, save it, then open in a browser, and you will see how DIV works, it's very neat. :D

 

Even if you do apply a width style attribute via stylesheet.css (which can be done - I tried it  :) ), this then affects all drop down menus throughout the site  :(

 

If the same style was used for the other dropdowns, yeh, obviously. :D

 

I'm thinking of going with the '-------- Not Selected ----------------' idea, and possibly implementing a javascript which forces a selection before they can add an item to their basket. Is this possible? Any ideas on this?

 

Yes, I think adding one product attribute with the '---Not selected ---' is the way to go, then you can add _that_ attribute to all the dropdowns, or at least the ones you want to be wider.

 

What order are the options done in now, after being pulled from the DB, what is the 'order' sql statement ? I'm thinking it would be nice to have the 'not selected' one right down the bottom of the list !!

 

Or you can do this, using 'option groups':

 

<td class="main">Case Option:<br><br></td>
<td class="main">
<select name="id[16]">
<optgroup label="--------------------- Case Options ------------------">
<option value="88">Blue Dragon (Default)</option>
<option value="51">Black Dragon</option>
<option value="52">Silver Dragon</option>
<option value="53">Pre-Modded Coolvolt</option>
</optgroup>
</select><br><br></td>

 

I used this type of code when we had lots of products to select from (only ONE dropdown), and I found it very messy, it wasn't categorised, so I added product categories, sorted the products to that order first, and it is so much easier to use now.

 

Anyway, if you use the code like above, you actually don't need the big long"

 

"------------------ Not Selected --------------------"

 

and the beauty of using option groups, is that the first one appears in bold, and CANNOT be selected, so we can use the first one to force the width. :D

 

Well, sounds good in theory, it shoud work.

 

Peter