1

I'm using simple_form_for in Rails 3.2.16 along with Twitter Bootstrap for my forms. Yet on all of my forms. I'm using the form-horizontal class. Yet all of my text elements appear below and to the right of their labels. Here is the HTML:

<div class="control-group text optional">
  <label class="text optional" for="user_email">Email</label>
  <div class="controls">
    <input id="user_email" class="text optional" type="text" value="adrian.klingel@myfitment.com" size="30" name="user[email]">
  </div>
</div>

Barring a screenshot, here is a representation of what the screen looks like:

Email:
               <Text box for email>

I'm using Firebug to try to debug. I haven't customized the CSS. All settings are being inherited from the bootstrap css.

Label is set with:

display: block;

There are many settings in Bootstrap for .form-horizontal.

I can see in the layout view that the .controls div is padded out 180px to the right. But I can't understand what is forcing it down. It needs to be in line with its label. As somebody with a programming background, I don't have the words to describe my frustration with CSS. I just can not get it. Not for a lack of trying.

UPDATE:

I was able to achieve what I wanted by applying float:left; to the label, but I'm just kind of surprised that the packaged form-horizontal class doesn't have that in there already. I'm not sure what they think form-horizontal should mean.

RubyRedGrapefruit
  • 12,066
  • 16
  • 92
  • 193

1 Answers1

0

Another useful way to achieve what you said you achieved with float: left; is to use display: inline-block; instead.

display: block; forces a line break.

Read more about it here: CSS display: inline vs inline-block

Community
  • 1
  • 1
badcc
  • 222
  • 4
  • 18