Solved

How do I make my button inline?

Posted on 2010-08-21
18
556 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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 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
 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

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…
Recently I spent hours debugging an issue in a Rails project where ActiveRecord was causing MySQL errors trying to create a User object of a class at the top level of a Single Table Inheritance model structure.  It turns out `.create` behaves differ…
This video Micro Tutorial shows how to password-protect PDF files with free software. Many software products can do this, such as Adobe Acrobat (but not Adobe Reader), Nuance PaperPort, and Nuance Power PDF, but they are not free products. This vide…
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…

688 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