Rails 表单输入字段溢出 Bootstrap 3 模式对话框

Question

I am using the simple_form gem to make a form in a modal dialog. The issue is that the input fields go over the edge of the modal.

The code cascades as follows: index.html.erb

<div class="row">
 <div class="cold-md-2">
    <%= link_to "New Author", new_author_path, remote: true, class: "btn btn-primary"%>
 </div>
 <div id="author-modal" class="modal fade" role="dialog"></div>
</div>

new.js.erb

 $('#author-modal').html('<%= escape_javascript(render 'new') %>');
 $('#author-modal').modal('show');

_new.html.erb

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-body">
        <h4 class="modal-title" id="myModalLabel">Add New Author</h4>
        <%= render 'form'%>
    </div>
</div>
</div>

and lastly _form.html.erb

 <%= simple_form_for @author, remote: true, html: { class: "form-horizontal" } do |f|%>
 <div class="modal-body">
<ul class="errors"></ul>
<div class="form-group">
    <%= f.input :first_name %>
    <%= f.input :last_name %>
    <%= f.input :title %>
</div>
</div>
<div class="modal-footer">
<%= f.button :submit, class: "btn btn-primary" %>
<%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"}%>
</div>

 <% end %>

why isn't the bootstrap default 100% width for form items limited to the modal?

Answer 1

Update the view as below,

<div class="form-group">
    <%= f.input :first_name, input_html: { class: "form-control" } %>
    <%= f.input :last_name, input_html: { class: "form-control" } %>
    <%= f.input :title, input_html: { class: "form-control" } %>
</div>

For width: 100% , you should use form-control class for the input controls.

Refer to Forms Basic Example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Answer 2

I overwrode the bootstrap_config.css.scss with:

input{ width:100%;} and it solves it.