Twitter Bootstrap modals: inputs are invisible - ruby-on-rails

Question

What's wrong with this code? No inputs show up, but the buttons in the modal footer do. Any idea what's going on here?
<div class="modal" style="display: none;" id="customArticleModal">
<div class="modal-header">
<h3>Add your own article</h3>
</div>
<%= form_for(#custom_article) do |f| %>
<div class="modal-body">
<%= f.text_field :name %>
<%= f.text_field :description %>
</div>
<div class="modal-footer">
<%= f.submit "Create", :class => 'btn btn-primary' %>
</div>
<% end %>
</div>
EDIT
Here's the rendered source:
<div class="modal hide fade" id="customArticleModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Add your own article</h3>
</div>
<form accept-charset="UTF-8" action="/components" class="new_component" enctype="multipart/form-data" id="new_component" method="post">
<div class="modal-body">
<input id="component_name" name="component[name]" size="30" type="text" />
<input id="component_description" name="component[description]" size="30" type="text" />
</div>
<div class="modal-footer">
<input class="btn btn-primary" name="commit" type="submit" value="Create article" />
</div>
</form>
</div>

Answer 1

<div class="modal" style="display: none;" id="customArticleModal">
Here you have manually added the style as display: none. Instead of that try using bootstrap class. e.g.
<div class="modal hide fade" id="customArticleModal">

Answer 2

I wrote a bit of jQuery to override whatever Bootstrap was doing here.
$(document).ready(function() {
$('#custom_article_form .control-group .controls input').css('display', 'block');
$('#custom_article_form .control-group .controls textarea').css('display', 'block');
});
No idea why it was happening.