DropDown Lists Far Apart

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!

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?

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.

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.php?main_page=product_info&cPath=1&products_id=21

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?

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.

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.

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.

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.

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.

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.

:cry:

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.

Looks like you got it fixed. What did it?

Edit: I should have said it looks OK in IE7 - still messed up in FF2.

stevesh:

Looks like you got it fixed. What did it?

Edit: I should have said it looks OK in IE7 - still messed up in FF2.

I didn't add anything but the red border from Website Rob which is helpful to see the box itself but why it's still spaced I don't know.

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.

:cry:

Yes, you missed changing this:

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

</div>**

To this:

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

</div>**

The code I provided was to just to help pinpoint where changes need to made and starting example code of changes. You could also add a <br /> tag before your </h4> tag, to put the dropdown below the Text.

Remember as well, the RED Border is so you can see your width and adjust it as necessary. Remove the Border code when satisfied.

Thanks for your help. Unfortunately I can't swing anything in Firefox but IE is solid.