Skip to content

Instantly share code, notes, and snippets.

@bostonaholic
Created July 23, 2012 19:15
Show Gist options
  • Save bostonaholic/3165579 to your computer and use it in GitHub Desktop.
Save bostonaholic/3165579 to your computer and use it in GitHub Desktop.
Fixing Twitter Bootstrap append/prepend with HAML

I was having issues with the append/prepend of twitter bootstrap. When writing my forms in haml, there would be a space between the input and the prepended text/icon. Here was my original code:

.field
  = f.label :twitter
  .input-prepend
    %span.add-on @
    = f.text_field :twitter

After fighting and fighting, I read in the twitter bootstrap documentation that the .add-on and input must be on the same line, without spaces. I had a sneaking suspicion that the haml -> html was inserting whitespace.

Sure enough, I noticed in the haml documentation a special way to manipulate whitespace in haml.

So, here is what my code looks like with the haml-trick:

.field
  = f.label :twitter
  .input-prepend
    %span.add-on> @
    = f.text_field :twitter

That little > makes all the difference.

@isaacsanders
Copy link

The Little > That Could

Obama Clapping

@abacha
Copy link

abacha commented Jul 31, 2012

omg thank you so much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment