CODEWITHSUNDEEP
twitter-bootstrapruby-on-rails-5
daveasdf
daveasdf

Reputation: 83

bootstrap doesn't maintain grid

it's a pretty basic bootstrap grid:

<div class="row">
  <div class="col-md-12">
  </div>
</div>

<div class="row"> 
  <div class="col-md-4" id="home_form">
    <%= render "supporters/form" %>
  </div>
  <div class="col-md-8" id="home_list" id="home_list">
    <%= render 'supporters/show_supporters' %>
  </div>
</div>

but i've got this, which previously placed a form error directly above the form like a regular rendered rails form with an error.

$(build_error).insertBefore( "#home_form" );

but now it puts it to the left of, and with the same height as #home_form, and throws #home_list underneath both.

build_error:

<% if @supporter.save %>
        $("#home_list").html("<%= j render 'show_supporters' %>")
        $("home_form").html("<%= j render 'form' %>")
    <% else %>
        $("#home_form").html("<%= j render 'form', supporter: @supporter %>") 
        $('#build_error').remove();
        <% if @supporter.errors.any? %>
          var build_error = "<div class='alert alert-danger' id='build_error'>";
          build_error += "You've got <%= pluralize(@supporter.errors.count, 'error') %>.";
          build_error +=   "<ul id='error_explanation'>";
          <% @supporter.errors.full_messages.each do |msg| %>
            <% if msg === "Ip has already been taken" %>
                <% msg = "You've already posted your support.   Thanks!" %>
            <% end %>
            build_error += "<li><%= j msg %></li>";
          <% end %>
          build_error +=   "</ul>";
          build_error += "</div>";
          $(build_error).insertBefore( "#home_form" );
        <% end %>           
    <% end %>

edit: 

<div class="row"> 
  <div class="col-md-4">
    <div id="home_form">
      <%= render "supporters/form" %>
    </div>
  </div>
  <div class="col-md-8" id="home_list" id="home_list">
    <%= render 'supporters/show_supporters' %>
  </div>
</div>

Upvotes: 0

Views: 54

Answers (1)

Vucko
Vucko

Reputation: 20844

As build_error is inserted before #home_form, it becomes:

<div class="row">
  <div class='alert alert-danger' id='build_error'>...</div>

  <div class="col-md-4" id="home_form">
    <%= render "supporters/form" %>
  </div>
  <div class="col-md-8" id="home_list" id="home_list">
    <%= render 'supporters/show_supporters' %>
  </div>
</div>

And you don't have any bootstrap .col- class on that element, so the .row negative margin is messing up your styles.

So, one solution is to add some .col- class on that element:

var build_error = "<div class='alert alert-danger col-md-12' id='build_error'>";

Upvotes: 1

Related Questions