Solved

How do I make my button inline?

Posted on 2010-08-21
18
547 Views
Last Modified: 2013-11-13
I am using button_to after a text_field_tag, and would like them to appear on the same line.  Unfortunately, the default behavior seems to be that the button is on its own line... I assume this is called "block" behavior and I need it to be "inline".  I was able to solve the problem for Firefox and Chrome by putting them in <td>s within the same tr within a table.  However, the problem is not completely solved in Internet Explorer (8.0.6), which does what the others do except also includes a small useless cell underneath the table (screenshot attached).

Here is the code:
<div class="filter field">
<% form_tag (:action => ..., :id => ...) do %>
<table>
<tr>
      <td>Filter by Name:</td>
      <td><%= text_field_tag 'search', @search %></td>
      <td><%= button_to 'Filter', :action => ...", :id => ... %></td>
</tr>
</table><br>
      
<% end %>
</div>

Here is view source:
<div class="filter field">
<form action="..." method="post"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="..." /></div>
<table>
<tr>
      <td>Filter by Name:</td>
      <td><input id="search" name="search" type="text" value="" /></td>
      <td><form method="post" action="..." class="button-to"><div><input type="submit" value="Filter" /><input name="authenticity_token" type="hidden" value="..." /></div></form></td>
</tr>
</table><br>
      
</form>
</div>
screenshot1.jpg
0
Comment
Question by:jef9c
  • 9
  • 7
  • 2
18 Comments
 
LVL 5

Expert Comment

by:kawzaki
ID: 33493486
the problem seems to be with style sheet not with the table.

the cell underneath seems to be the div of the hidden form input.
remove the style if you have any included, and see if that cell disappears.
0
 

Author Comment

by:jef9c
ID: 33493530
kawzaki,
Thanks, but I'm not sure what you mean.  If I remove the styles, the borders go away, so I wouldn't be able to tell if it was there.  I tried removing the <div class='filter field'> and </div>, but that didn't change anything.

Here are my style sheets.  I don't see anything corresponding to a div.

scaffold.css

body { background-color: #fff; color: #333; }

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color:#000; }

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

links.css

h1
{
      font: "Trebuchet MS";
}

table
{
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse:collapse;
}

td, th
{
      font-size:1.2em;
      border:1px solid #9FB6CD;
      padding:3px 7px 2px 7px;
}

th
{
      font-size:1.4em;
      text-align:left;
      padding-top:5px;
      padding-bottom:4px;
      background-color:#B9D3EE;
}

tr.alt td
{
      color:#000;
      background-color:#C6E2FF;
}

tr
{
      color:#000;
}
 
0
 
LVL 12

Expert Comment

by:JESii
ID: 33493556
Try "float: ;right" on the style definition for the button
0
 
LVL 5

Expert Comment

by:kawzaki
ID: 33493572
your right, there is nothing about DIV in there.
I also am 100% sure your code has no extra cell in there.

the best solution is to inspect that box using the inspect DOM tool

for IE, use the IE developer tool bar:
download it from here:
http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

once you got it highlighted, you will be able to know for sure which tag is it and what style are applied to it.
0
 
LVL 12

Expert Comment

by:JESii
ID: 33493599
By that I mean: enclose the button in a div or a span; define a css class that uses the "float: right" that I mentioned above; and add that class to the surrounding div/span.
0
 

Author Comment

by:jef9c
ID: 33496532
JESii,
Thanks for your input, but I tried putting the following into my stylesheet and no luck:

input
{
     float: right;
}
0
 

Author Comment

by:jef9c
ID: 33496547
kawzaki,
Thanks again for your input.  I didn't download the development toolbar because it is not recommended for IE8, but I read that IE8 has built in developer tools, so I tried those.  It wouldn't let me click specifically on that little cell, and when I clicked on each line of the code, nothing highlighted that little cell specifically.  I did highlight two larger boxes that I thought might be helpful to analyze, and then I unchecked the styles one by one, but nothing got rid of the little cell unfortuntately.  I have attached the screenshots.
1.jpg
0
 

Author Comment

by:jef9c
ID: 33496552
second try
2.jpg
0
 
LVL 5

Expert Comment

by:kawzaki
ID: 33497087

i still dont think the problem is in the html nor in the css you posted.
it must be related to your computer (browser add-on) or you have a css other what you showed.


I have installed IE8 just to check if it would show as your captured screen, it was not.
see attached.

i put the page online, check if you see the same view of this page:

http://hostingangle.net/try.htm


confirming it shows just like the screen capture you took, tells the problem is in your IE8 specifically.

if not, then it's something related to the css files included from your framework by auto-load or something.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 5

Expert Comment

by:kawzaki
ID: 33497089
sorry i forgot to attach the image.. here it is
ie8.jpg
0
 

Author Comment

by:jef9c
ID: 33497153
Here is my screen shot viewing your sample page, and strangely the problem doesn't show up.

My IE8 version number is the same as yours.

Thanks for putting in so much effort to try to help me solve this problem.  

What does the following mean?

"then it's something related to the css files included from your framework by auto-load or something."
hostingangletry.jpg
0
 

Author Comment

by:jef9c
ID: 33497215
I think the button has to have something to do with it, since when I delete the button, the problem goes away.  Maybe it is an interaction between the button and the style though.  Don't you think there is a change that the problem has the same cause as the fact that I can't get the button to go on the same line as the textbox if I take them out of the table?
0
 

Author Comment

by:jef9c
ID: 33497247
The problem also goes away if I convert the button_to into a link_to.  I suppose I could use an image for the link and make it look like a button, unless there is a better solution.
0
 
LVL 5

Expert Comment

by:kawzaki
ID: 33497250

you are welcome.

since it is showing properly, i believe your testing locally, right?
if yes, try to put the page online too and see if it shows without the cell.

what i meant by that, is your development environment or framework settings could include a css resulting in that small cell. this part will be hard to tell you what to do but to advise you revising .htaccess file, auto-append or auto-prepend..etc...


however, there is another guess .. web slice monitoring.

IE has web slice feature, and you might have enabled it by mistake and that's why it shows the small cell of a div telling you , you can monitor this div for future updates.


i have not changed anything in that webpage, i just copied your css and html markup into one file and uploaded it. you can view it with no problem.

view source that webpage, copy it and save it to your local web directory, see if you can browse it normally with no small cell.

if yes, it means there is some css style sheet that causes the problem for sure.


0
 
LVL 5

Accepted Solution

by:
kawzaki earned 500 total points
ID: 33497289
Ops, there is something i missed looking at.

you have nested form tag. this is incorrect html markup!
and you have the token hidden input repeated twice.

fix that first, and see if the problem gets solved.

make sure to revise the input fields you want to include.

<div class="filter field">
<form action="..." method="post">
<div style="margin:0;padding:0;display:inline">
	<input name="authenticity_token" type="hidden" value="..." />
</div>
<table>
<tr>
      <td>Filter by Name:</td>
      <td><input id="search" name="search" type="text" value="" /></td>
      <td>
	  <div>
		<input type="submit" value="Filter" />
		<input name="authenticity_token" type="hidden" value="..." />
	</div>
	</td>
</tr>
</table><br>
      
</form>
</div>

Open in new window

0
 

Author Comment

by:jef9c
ID: 33497422
Your last comment did turn out to be the reason.  I was using "button_to" within my "form_tag", and apparently you are supposed to using something else called "submit_tag" within "form_tag" (form_tag is for forms that don't map directly onto models).  Anyway, when I simply changed "button_to" to "submit_tag", the second form tag and little cell went away!  Thanks so much for all of your help and patience!

For others:  A proper list of controls to be used in "form_tag" can be found at:

http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#M002258
0
 

Author Closing Comment

by:jef9c
ID: 33497427
Swap our "button_to" with "submit_tag", and the problem is solved!
0
 
LVL 5

Expert Comment

by:kawzaki
ID: 33497499
finally, problem solved !

you are welcome :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
website framework question 2 385
How much to charge--small Ruby on Rails project 13 751
view ruby on rails on a browser 2 426
Ruby process xml 1 202
I recently rediscovered rails when I needed a holiday project and decided to build a management dashboard for the company where I work.  With it being a project done in my free time, I could focus my time on learning the basics rather than trying to…
Article by: narshlob
If you've ever programmed in Ruby and have come across either a proc or a lambda, you might have been wondering what the difference is between the two and when you would use one over the other. This article will try to explain the difference between…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

760 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

20 Experts available now in Live!

Get 1:1 Help Now