Search code examples
htmlcssruby-on-railsruby-on-rails-4getuikit

Rails Login Form with UIKit

I have a rails app with the following login form which works just fine but hasn't got any styling yet.

<h1>Session#login</h1>
<p>Find me in app/views/session/login.html.erb</p>
<% flash.each do |name, msg| -%>
    <%= content_tag :div, msg, class: name %>
<% end -%>
<form action="<%= session_login_url %>" method="POST">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password">
  <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %>
  <input type="submit" value="Login">
</form>

So I wanted to add some CSS with UIKit and tried to adapt the example from the UIKit homepage to my form as seen below: 

<body class="uk-height-1-1">
<div class="uk-vertical-align uk-text-center uk-height-1-1">
  <div class="uk-vertical-align-middle" style="width: 250px;">
    <img class="uk-margin-bottom" width="140" height="120" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KC...1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0tNi4zMzMsMjk4LjY1NHY3My42OTFoOTMuNjY3di03My42OTFILTYuMzMzeiBNNzkuNzg4LDM2NC4zNTVIMS42NTZ2LTU3LjcwOWg3OC4xMzJWMzY0LjM1NXoiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjUuODYsMzU4LjE0MSAyMS45NjIsMzQxLjIxNiAyNy45OTUsMzQzLjgyNyA0Ny4wMzIsMzIzLjU2MSA1NC41MjQsMzMyLjUyMyA1Ny45MDUsMzMwLjQ4IA0KCQk3Ni4yMDMsMzU4LjE0MSAJIi8+DQoJPGNpcmNsZSBmaWxsPSIjRDhEOEQ4IiBjeD0iMjQuNDYyIiBjeT0iMzIxLjMyMSIgcj0iNy4wMzQiLz4NCjwvZz4NCjwvc3ZnPg0K">

    <form action="<%= session_login_url %>" method="POST" class="uk-panel uk-panel-box uk-form">
      <div class="uk-form-row">
        <input type="text" id="username" class="uk-width-1-1 uk-form-large" placeholder="Username">
      </div>
      <div class="uk-form-row">
        <input type="password" id="password" class="uk-width-1-1 uk-form-large" placeholder="Password">
      </div>
      <div class="uk-form-row">
        <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %>
        <input type="submit" value="Login" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">
      </div>
    </form>
  </div>
</div>
</body>

But now the form stops working entirely. Any ideas why?

Solution

  • I have no idea why - but this seems to work! 

    <body class="uk-height-1-1">
    <div class="uk-vertical-align uk-text-center uk-height-1-1">
        <div class="uk-vertical-align-middle" style="width: 250px;">

<h1>Session#login</h1>
<p>Find me in app/views/session/login.html.erb</p>
<% flash.each do |name, msg| -%>
    <%= content_tag :div, msg, class: name %>
<% end -%>
<form class="uk-panel uk-panel-box uk-form" action="<%= session_login_url %>" method="POST">
  <div class="uk-form-row">
    <input class="uk-width-1-1 uk-form-large" placeholder="Username" type="text" name="username" id="username">
   </div>
  <div class="uk-form-row">
    <input class="uk-width-1-1 uk-form-large" placeholder="Password" type="password" name="password" id="password">
   </div>
  <div class="uk-form-row">
    <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %>
    <input class="uk-width-1-1 uk-button uk-button-primary uk-button-large" type="submit" value="Login">
  </div>
</form>


  </div>
</div>
</body>