asked on

CSS to align submit button next to select box

I wish to align the select button "Save" next to the Select box.

So I have tried adding

#block-commerce-multicurrency-currency-selector {
float: left;
display: inline;
}

to the Style.css sheet
I am relatively new to CSS and, this code generated by Drupal, is making it just that much more complicated. I am really not sure which id, class to pick, the CSS syntax and whether float: left; display:inline; will do the trick.

Thanks for your help, Neil

<div id="block-commerce-multicurrency-currency-selector" class="block block-commerce-multicurrency">
<div class="content">
<form id="commerce-multicurrency-selector-form" accept-charset="UTF-8" method="post" action="/frontpage">
<div>
<div class="form-item form-type-select form-item-selected-currency">
<input id="edit-save-selected-currency" class="form-submit" type="submit" value="Save" name="op">
<input type="hidden" value="form-oLhqr1BOS5im9WCxwZo9ORErvuzBzQGA3--srrEMjGE" name="form_build_id">
<input type="hidden" value="5Z-mHEK7cLPnqD-0sNJfG0m93z5jxZN72O2ZUOx2frw" name="form_token">
<input type="hidden" value="commerce_multicurrency_selector_form" name="form_id">
</div>
</form>
</div>
</div>

Open in new window

SOLUTION

junipllc

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

offshorewindinwinter

ASKER

Thank you junipllc .. of course your code worked but when I added it to style.css

and then another try

#block-commerce-multicurrency-currency-selector {
      width:200px;
      height:100px;
      float:left;
      display:inline;
}

nothing changed ?? What am I missing?

Actually I would like to get rid of the submit button all together and trigger the change in currency simply by changing the select box.

I have the question pending at https://www.experts-exchange.com/questions/27316501/activate-event-directly-from-select-box-rather-than-having-a-separate-submit-button.html

Thank you, Neil

<div class="region region-sidebar-second">
<div id="block-commerce-multicurrency-currency-selector" class="block block-commerce-multicurrency">
<div class="content">
<form id="commerce-multicurrency-selector-form" accept-charset="UTF-8" method="post" action="/frontpage">
<div>
<div class="form-item form-type-select form-item-selected-currency">
<select id="edit-selected-currency" class="form-select" name="selected_currency">
<option value="CAD">CAD</option>
<option selected="selected" value="USD">USD</option>
</select>
</div>
<input id="edit-save-selected-currency" class="form-submit" type="submit" value="Save" name="op">
<input type="hidden" value="form-iblmsWtGwaH8jFzHiStq8QfY1TzvXYl5MhkvcuTvazY" name="form_build_id">
<input type="hidden" value="5Z-mHEK7cLPnqD-0sNJfG0m93z5jxZN72O2ZUOx2frw" name="form_token">
<input type="hidden" value="commerce_multicurrency_selector_form" name="form_id">
</div>
</form>
</div>
</div>
</di

Open in new window

ASKER CERTIFIED SOLUTION

offshorewindinwinter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

junipllc

That one's easy, but then how would you submit the form? ;)

Try this:

#edit-save-selected-currency {
display: none;
}

or, if it works for your layout since it's better for SEO:

#edit-save-selected-currency {
margin-left: -9999px;
}

Cheers,

Mike (junipllc)

offshorewindinwinter

ASKER

I want to use the onchange event of the select box and javascript.

Please see the question I have pending at https://www.experts-exchange.com/questions/27316501/activate-event-directly-from-select-box-rather-than-having-a-separate-submit-button.html

Thank you, Neil

offshorewindinwinter

ASKER

Thanks for your help!