Pure css not loading in Ruby on Rails correctly

Question

I'm using pure.css to load "_form.html.erb" in my rails app.

However the css isn't styling the rails portion but styles the regular HTML that I have below it. NOTE: I added the HTML below to ensure the the css was working correctly.

Here is an example of the _forms.html.erb file

<%=f orm_for(@client) do |f| %>
<% if @client.errors.any? %>
    <div id="error_explanation">
        <h2><%= pluralize(@client.errors.count, "error") %> prohibited this client from being saved:</h2>

        <ul>
            <% @client.errors.full_messages.each do |message| %>
                <li>
                    <%=m essage %>
                </li>
                <% end %>
        </ul>
    </div>
    <% end %>
        <!-- beginning of rails code -->
        <form class="pure-form pure-form-stacked">
            <fieldset>
                <legend>Legend</legend>
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-1-3">
                        <%=f .label:firstName %>
                            <br>
                            <%=f .text_field :firstName %>
                    </div>
                </div>

            </fieldset>
        </form>

        <div class="actions">
            <%=f .submit class: "btn btn-primary" %>
        </div>
        <% end %>
            <!-- end of rails code -->
            <!-- Begining of HTML code -->
            <form class="pure-form pure-form-stacked">
                <fieldset>
                    <legend>Legend</legend>

                    <div class="pure-g">
                        <div class="pure-u-1 pure-u-md-1-3">
                            <label for="first-name">First Name</label>
                            <input id="first-name" class="pure-u-23-24" type="text">
                        </div>

                        <div class="pure-u-1 pure-u-md-1-3">
                            <label for="last-name">Last Name</label>
                            <input id="last-name" class="pure-u-23-24" type="text">
                        </div>

                        <div class="pure-u-1 pure-u-md-1-3">
                            <label for="email">E-Mail</label>
                            <input id="email" class="pure-u-23-24" type="email" required>
                        </div>

                        <div class="pure-u-1 pure-u-md-1-3">
                            <label for="city">City</label>
                            <input id="city" class="pure-u-23-24" type="text">
                        </div>

                        <div class="pure-u-1 pure-u-md-1-3">
                            <label for="state">State</label>
                            <select id="state" class="pure-input-1-2">
                                <option>AL</option>
                                <option>CA</option>
                                <option>IL</option>
                            </select>
                        </div>
                    </div>

                    <label for="terms" class="pure-checkbox">
                        <input id="terms" type="checkbox"> I've read the terms and conditions
                    </label>

                    <button type="submit" class="pure-button pure-button-primary">Submit</button>
                </fieldset>
            </form>

Here is the application.scss file

     *= require_tree .
     *= require_self
     *= require datatables.net-bs/css/dataTables.bootstrap.min
     *= require css/pure-min.css
     *= require css/grids-responsive-min.css
     */
    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "AdminLTE/AdminLTE";
    @import "AdminLTE/skins/skin-blue";

I have "grids-responsive-min.css" and "pure-min.css" that are required in assets/components/css

I'm thinking it could be a rails syntax issue but I'm not sure. I'm sure it's something simple I'm missing.

I'm not sure I understand your question, but is it just a matter of adding the pure.css classes on to your form? If that is the case, you can use <%= form_for(@client, html: { class: 'pure-form pure-form-stacked" }) do |f| %> — Shaun
– Shaun, Commented May 27, 2016 at 16:05
@Shaun changing <%=form_for(@client, html: {class: "pure-form pure-form-stacked"}) do |f| %> corrected the issue. Thanks — M.T Davis
– M.T Davis, Commented May 27, 2016 at 17:35

Shaun · Accepted Answer · 2016-05-27 17:49:55Z

1

You can apply CSS classes to the form_for method with:

<%= form_for(@client, html: { class: 'pure-form pure-form-stacked' }) do |f| %>

answered May 27, 2016 at 17:49

Shaun

2,05220 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boltz0r · Accepted Answer · 2016-05-27 15:57:23Z

0

try changing :

<%=form_for(@client) do |f| %>

to:

<%=bootstrap_form_for(@client) do |f| %>

answered May 27, 2016 at 15:57

Boltz0r

9806 silver badges16 bronze badges

Collectives™ on Stack Overflow

Pure css not loading in Ruby on Rails correctly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related