How do I make my button inline?

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
jef9cAsked:
Who is Participating?
 
kawzakiCommented:
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
 
kawzakiCommented:
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
 
jef9cAuthor Commented:
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
JESiiCommented:
Try "float: ;right" on the style definition for the button
0
 
kawzakiCommented:
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
 
JESiiCommented:
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
 
jef9cAuthor Commented:
JESii,
Thanks for your input, but I tried putting the following into my stylesheet and no luck:

input
{
     float: right;
}
0
 
jef9cAuthor Commented:
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
 
jef9cAuthor Commented:
second try
2.jpg
0
 
kawzakiCommented:

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
 
kawzakiCommented:
sorry i forgot to attach the image.. here it is
ie8.jpg
0
 
jef9cAuthor Commented:
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
 
jef9cAuthor Commented:
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
 
jef9cAuthor Commented:
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
 
kawzakiCommented:

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
 
jef9cAuthor Commented:
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
 
jef9cAuthor Commented:
Swap our "button_to" with "submit_tag", and the problem is solved!
0
 
kawzakiCommented:
finally, problem solved !

you are welcome :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.