Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Dec 27, 2011

More on Twitter Bootstrap in Rails


Yesterday I wrote about error handling in Rails while using Twitter Bootstrap.  One of the interesting things I was able to do with the custom form builder was move the active record attribute errors to the input fields they're associated with.  The example below is a bit simple but it should get the point across....




If you look at the template that created the form below you can see that that it doesn't include any special functionality.  All the work happens in the form builder.





If you look at the "text_field" method in the code below you can see that it just calls "input_wrapper" to add some html around the "text_field".  Since "input_wrapper" already had to test each active record attribute for errors so that it could add "error" to the classes of those elements it was pretty straight forward to tack an inline-help span on the end.





The code above is not elegant, it's just an experiment.  I certainly don't recommend using it as is but I wanted to share just in case some one is thinking about similar problems.


In general though I am fairly happy with the separation of concerns so far.  I think that by treating the multi-element fields bootstrap expects in it's forms as primitives I will be able keep my templates focused on the content and my presenters on the logic of the view.

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.