Solved

CSS to align submit button next to select box

Posted on 2011-09-17
6
477 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 250 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 41
Hovering effect 9 47
How can I make a css class read only with jquery? 2 37
Should I use subdomains or addon domains? 3 33
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

911 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now