Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS to align submit button next to select box

Posted on 2011-09-17
6
Medium Priority
?
508 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:offshorewindinwinter
  • 4
  • 2
6 Comments
 
LVL 12

Assisted Solution

by:junipllc
junipllc earned 1000 total points
ID: 36555266
Hey there, welcome to the CSS party. CSS with Drupal can be stressful enough to cause gray hair...that is, until you "get" what Drupal is trying to do ;) After that it's incredible what you can do.

That aside, I'm not seeing a select box in the code that Drupal generated (and you copied in here). However, if I put one in (see attached code that I dropped into a page), and the select box is in the same position, then you already have it. Or at least it's working here.

I'm also attaching a screenshot of what it looks like in my browsers. I tried both Chrome and Firefox on the Mac.

If you're still having issues with the CSS, do you have a live example that we can look at? I know that's iffy, but it really might be the best way to solve it.

Cheers,

Mike


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

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

</style>

</head>

<body>
<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>
<option>Dollars</option>
<option>Euros</option>
<option>Yen</option>
<option>Pesos</option>
</select>
<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>

</body>
</html>

Open in new window

Screen-shot-2011-09-17-at-8.57.5.png
0
 

Author Comment

by:offshorewindinwinter
ID: 36589514
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 http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_27316501.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

0
 

Accepted Solution

by:
offshorewindinwinter earned 0 total points
ID: 36589785
<div class="form-item form-type-select form-item-selected-currency"> was set to display:block

So this did the trick

#block-commerce-multicurrency-currency-selector {
float:left;
}
.form-item-selected-currency {
      display:inline;
}

Thanks again for your help (and it would great if you could help now get rid of the submit button altogether)

Cheers, Neil
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:junipllc
ID: 36590181
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)
0
 

Author Comment

by:offshorewindinwinter
ID: 36590846
I want to use the onchange event of the select box and javascript.

Please see the question I have pending at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_27316501.html

Thank you, Neil
0
 

Author Closing Comment

by:offshorewindinwinter
ID: 36890350
Thanks for your help!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There is a massive demand for content on the web right now, and it doesn't look like it's going to stop any time soon. But, if you are running a business blog, it's not just enough to offer your audience lots of content. It needs to be high-quality…
The burden of debt that average person carries today has not only increased, but it keeps on growing. It is quite common nowadays that people find it extremely difficult to make ends meet in the face of millions of competing priorities that they hav…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

876 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question