DropDown Lists Far Apart

[LostinTranslation]

Typically I find 99.9% of my questions using Google....but this one is evading me.

I have a product with 2 attribute dropdown lists....but they are a good inch to inch and a half apart. Really looks off.

I thought I'd ask away before I start hacking away.

This is 1.3.8a and it's basically vanilla.

Thanks in advance if anyone knows!

[LostinTranslation]

Am I really the only one? I'm using the default Classic template.

Can anyone tell me if this is a stylesheet issue or simply a hard file issue?

[Website Rob]

Without a URL to see the problem it's really hard for anyone to give a good answer. Odds are, you will need to create a CUSTOM file of the one that outputs the dropdown lists or perhaps there is a Mod that will work for you.

[LostinTranslation]

Sorry, as I stated this was just a vanilla install so I figured I wasn't the only one seeing this off an install.

Here is a URL showing 2 lists...see the separation.

Thanks!

http://www.flyfishingfever.com/index...products_id=21

[stevesh]

My guess is that the length of the first dropdown exceeds the width available, so it's pushing the other one down an extra row.

My test out-of-the-box installation shows the Add to Cart button on the right just below the description, and the attributes dropdowns on the left, but below the button, giving them the whole width to work with.

Did you move either the button or dropdowns?

[LostinTranslation]

Not that I'm aware of...unless there's a setting in admin that I changed without my knowledge. If the move requires altering the code, then no.

[stevesh]

Try temporarily removing the text you added (in red), and see if anything changes.

If that doesn't help, try temporarily shortening the name of the Guide Package attribute, so the dropdown box is not as wide.

[Website Rob]

The following code should fix things up but you will have to find what file to edit. Remember to save this editted file in the proper CUSTOM dir.

Note: the Red border is just so you can see what is going on. Remove when satisfied.

<!--bof Attributes Module -->
<div id="productAttributes" style="width:350px; border:1px solid red">
<h3 id="attribsOptionsText">Please Choose: </h3>

<br />

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-4">Paint Style</label></h4>
<div class="back">
<select name="id[4]" id="attrib-4">
  <option value="14">regular</option>
  <option value="15">UV Paint Heads ( +$9.99 )</option>
</select>

</div>
<br /><br /><br />
</div>


<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-3">Guide Package</label></h4>
<div class="back">
<select name="id[3]" id="attrib-3">
  <option value="8">(none)</option>
  <option value="9">Guide Package - 10 dozen ( +$515.00 )</option>
</select>

</div>
<br class="clearBoth" />
</div>

</div><!--eof Attributes Module -->

<br class="clearBoth" />

<!--bof Quantity Discounts table -->

Another method is to play around with the CSS Selectors being used; try to get some float left & right going on with specified width values for each.

[LostinTranslation]

Try temporarily removing the text you added (in red), and see if anything changes.

If that doesn't help, try temporarily shortening the name of the Guide Package attribute, so the dropdown box is not as wide.

I removed the text and nothing happened. I shortened up the attribute (left it that way still) and you can see it didn't affect it.

[LostinTranslation]

Am I missing something or was there any code change other than adding "style="width:350px; border:1px solid red" to productAttributes in tpl_modules_attributes.php?

The only thing in the stylesheet that I see related is:

.wrapperAttribsOptions {
margin: 0.3em 0em;
}


That slight margin shouldn't affect this though.

The following code should fix things up but you will have to find what file to edit. Remember to save this editted file in the proper CUSTOM dir.

Note: the Red border is just so you can see what is going on. Remove when satisfied.

<!--bof Attributes Module -->
<div id="productAttributes" style="width:350px; border:1px solid red">
<h3 id="attribsOptionsText">Please Choose: </h3>

<br />

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-4">Paint Style</label></h4>
<div class="back">
<select name="id[4]" id="attrib-4">
  <option value="14">regular</option>
  <option value="15">UV Paint Heads ( +$9.99 )</option>
</select>

</div>
<br /><br /><br />
</div>


<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-3">Guide Package</label></h4>
<div class="back">
<select name="id[3]" id="attrib-3">
  <option value="8">(none)</option>
  <option value="9">Guide Package - 10 dozen ( +$515.00 )</option>
</select>

</div>
<br class="clearBoth" />
</div>

</div><!--eof Attributes Module -->

<br class="clearBoth" />

<!--bof Quantity Discounts table -->

Another method is to play around with the CSS Selectors being used; try to get some float left & right going on with specified width values for each.