Render columns using twitter's bootstrap and Rails4

StackOverflow https://stackoverflow.com/questions/23504632

Question

I'm building a prototype using Rails4. I made the following custom.css.scss:

// System wide CSS

html {
    background-color: gray;
    margin: 5px;
    padding-left: 10px;
    padding-top: 2px;
  height: auto;
}

body {
    margin: 10px;
    border-radius: 15px;
    padding: 10px;
  height: auto;
}

img {
    align: left;
    border: 2px white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.profile_image {
    float: left;
    padding-right: 10px;
}

.col1of3,  .col2of3, .col3of3 {
  width: auto;
  float: left;
  margin: 5px;
}

My problem is how columns are displayed. In this view fine because I don't use columns: good views

But this page, where I use columns the body element seems to be shorter and the length element larger: bad views
(source: screensteps.me)

I know the problem is related with related to views. So here are my edit.html.erb:

<h1>Προσθήκη Ασθενούς</h1>

<%= render 'form' %>

<%= link_to 'Πίσω', patients_path %>

And this is my _form.html.erb:

<%= form_for(@patient) do |f| %>
  <% if @patient.errors.any? %>
    <div id="error_explanation">
      <h2>Σφάλμα κατά την διαδικασία αποθήκευσης: </h2>

      <ul>
      <% @patient.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="col1of3">
    <div class="fieldset">
      <%= f.label "Όνομα" %><br>
      <%= f.text_field :name %>
    </div>
    <div class="fieldset">
      <%= f.label "Επώνυμο" %><br>
      <%= f.text_field :surname %>
    </div>
    <div class="fieldset">
      <%= f.label "Φύλο" %><br>
      <%= f.select :gender, options_for_select(list_genders)%>
    </div>
    <div class="fieldset">
      <%= f.label "Ημερομηνία Γεννήσεως" %><br>
      <%= f.date_select :birthday, :start_year => 1920, :use_month_names => ['Ιανούριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιο', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος','Δεκέμβριος'] %>
    </div>
    <div class="fieldset">
      <%= f.label "Εικόνα" %><br>
      <%= f.text_field :image_url %>
    </div>
    <div class="fieldset">
      <%= f.label "ΑΜΚΑ" %><br>
      <%= f.text_field :social_security_number %>
    </div>
  </div>
  <div class="col2of3">
    <div class="fieldset">
      <%= f.label "Οργανισμός Ασφάλισης" %><br>
      <%= f.select :social_security_institution, options_for_select(list_greek_sso) %>
    </div>
    <div class="fieldset">
      <%= f.label "Αρ Οργαν Ασφάλισης" %><br>
      <%= f.text_field :social_security_institution_number %>
    </div>
    <div class="fieldset">
      <%= f.label "ΑΦΜ" %><br>
      <%= f.text_field :afm %>
    </div>
    <div class="fieldset">
      <%= f.label "Τηλ οικίας" %><br>
      <%= f.text_field :home_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Τηλ εργασίας" %><br>
      <%= f.text_field :work_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Κινητό" %><br>
      <%= f.text_field :mobile_phone %>
    </div>
    <div class="fieldset">
      <%= f.label "Πατρώνυμο (του)" %><br>
      <%= f.text_field :father_name %>
    </div>
  </div>
  <div class="col3of3">
    <div class="fieldset">
      <%= f.label "Διεύθυνση Οικίας" %><br>
      <%= f.text_field :home_address %>
    </div>
    <div class="fieldset">
      <%= f.label "Πόλη" %><br>
      <%= f.text_field :city %>
    </div>
    <div class="fieldset">
      <%= f.label "Χώρα" %><br>
      <%= f.text_field :country, :value => 'Ελλάδα' %>
    </div>
    <div class="fieldset">
      <%= f.label "Ταχυδρομικός Κώδικας" %><br>
      <%= f.text_field :postal_code %>
    </div>
    <div class="fieldset">
      <%= f.label :email %><br>
      <%= f.text_field :email %>
    </div>
    <div class="fieldset">
      <%= f.label "Σημειώσεις" %><br>
      <%= f.text_area :notes, cols: "50", rows: "8" %>
    </div>
    <div class="actions">
      <%= f.submit "Υποβολή" %>
    </div>
  </div>
<% end %>

Any idea why the element of columns acts like if it's outside the <body> tag?

Thanks

Was it helpful?

Solution

I think it's because of the float property. At the very end of your _form.html.erb, consider inserting the following right before <% end %> - 

<div style="clear: both;"/>

Does that clear it up?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top