Option dropdown alignment?

[Patrick67]

Sorry if this is the wrong area to post. I did a search but could not find the results I was looking for.


I am currently converting over from OSCommerce to Zen-cart which is working wondefully.

The problem I am having is that my options dropdown boxes are out of alignment versus them falling into alignment on myOS Commerce Site.

Image below for comparison.
Tried attaching but too big for forums.


http://midwayservers.com/images/optalign.jpg


Is there a way to set this to align like the photo on the left?

[Patrick67]

Nobody has this issue? Is there a resolution?

[kobra]

Try posting a link to you Zen Cart page in question

[Patrick67]

Try posting a link to you Zen Cart page in question

Here is a link to the page.

http://acmestats.com/index.php?main_...&products_id=2

I am building it here to move over to another site. As you can see the dropdown boxes are not alligned. This is on every product, not just this one.

But they are alligned on my OSCommerce page here.

http://midwayservers.com/mkportal/mo...6f882e43d49c74


Thank You.

[kobra]

Osc uses tables for this while Zen Cart does not...maybe it should have?

As you can see it aligns upon the length of the attribute name.
You might try adding spaces to the shorter names but these might get stripped?
There might be a mod for this but I have not checked

[Patrick67]

Thanks kobra, I was hoping to avoid editing each option name with spaces. I will look for a mod and if none I'll do the space editing.

Unfortunately it looks very unprofessional without the alignment.

[kobra]

While I have not tested this - the drop box has the "back" class assigned to it in tpl_modules_attributes.php and this is used for several other things. So adjusting via css will most likely cause issues on other pages. But you might be successful at changing the div class to one not existing and using css width & float to align.

Try editing the red text to ???drop??? or another name in tpl_modules_attributes.php.

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

Use overrides for this or if you have not created your own template just preserve the original in case this messes things up

See what results(should not be much different), then post back and one can address this with css

[Patrick67]

Will give it a try and report back. For now Ijust added ........ to the back of every option name to align them as spaces were removed.

[Patrick67]

Just a update. The code did align the dropdowns but pushed the text of the options to center as well. Appreciate all your help kobra but I think I am just going to live with the periods after the option name.

Thank You.

[gjh42]

Add to your stylesheet:

h4.optionName {width: 8em;}

Adjust to taste.
This will make all the names occupy the same width, so the following boxes start in alignment.