Dec 26, 2011

Formatting Rails Errors for Twitter Bootstrap

I'm using Twitter's Bootstrap toolkit for the layout in a proof of concept application I'm working on.  So far my general impression is that I really like Bootstrap but there are a few obstacles to making it play nice with Rails.

One of those obstacles is that Rails formats fields with errors quite a bit differently than Bootstrap's CSS expects.  Below I describe a possible solution.  I'm not 100% sure this is the best approach but it seems to work well and I'm currently working on a proof of concept app that will be thrown out in several weeks so there's little risk if I'm wrong.

Rails default formatting looks like this...


Bootstrap's CSS expects this....


The solution I've arrived at is to first remove the "field_with_errors" div.  This is done by setting the field_error_proc to simply return the html passed in without wrapping it.


The next step was to create a FormBuilder subclass with the desired functionality.  The example below only demonstrates the 'text_field' method.  In practice I'll have to create a separate method for each Bootstrap form element I want to use in my application.


Then to use the custom form builder I'd do somthing like this....


I realize this wasn't exactly a detailed explanation of a solution but hopefully I managed to get the gist of the idea across.


No comments: