How to stylize Ruby on rails devise forms - css

This is my registration form which is using devise but for some reason, my CSS only affects the First_Name part and nothing else. On top of that, the First Name part looks slightly different from the other bars in terms of its border color. I did install bootstrap but I haven't had a problem like this on other pages so I don't think that's the issue.
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field input">
<%=f.label :First_Name%>
<%=f.text_field :fname, class:"form-control",:autofocus => true %>
</div>
<div class="field input">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field input">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field input">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<%= render "devise/shared/links" %>
<style>
.input{
width: 25%;
text-decoration: none;
}
</style>

You have to apply .form-control class to input fields for appling Bootstrap style.
In your code only first name (fname) has .form-control - You have to add it to other input fields as well.
Example for email field:
<%= f.email_field :email, autofocus: true, autocomplete: "email", class:"form-control" %>

Related

Rails | How to target Invalid Input fields with Tailwind

This is annoying because I feel like I have tried everything. My goal is to have a red ring around invalid input fields when the input is invalid. How do I target invalid input fields in rails 6. I am using a rails form which is generated by devise. I am also using tailwind css.
I have tried all of the following.
.invalid{
#apply ring-2 ring-red-700
}
.input:invalid{
#apply ring-2 ring-red-700
}
.input-group {
.invalid {
#apply ring-2 ring-red-700
}
}
Here is the form I am using to register users
<% content_for :devise_form do %>
<%= form_for(resource, as: resource_name, url: session_path(resource_name), :html => {:class => 'form-horizontal' }) do |f| %>
<div class="input-group">
<%= f.label :email %><br />
<%= f.email_field :email,
autofocus: true,
autocomplete: "email",
class: "input",
placeholder: "Your Email"%>
</div>
<div class="input-group">
<%= f.label :password %><br />
<%= f.password_field :password,
autocomplete: "current-password",
class: "input"%>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<div class="input-group">
<%= f.submit "Log in", class: "btn btn-default loader" %>
</div>
<% end %>
<hr class="mt-6 border" />
<%= render "devise/shared/links" %>
<% end %>
<%= render "devise/shared/form_wrapper" %>
So how do I target fields whose input's are invalid?
I ended up using the developer tools in the browser. I inspected the element which is called input#user_password.invalid. So the long term solution is to use inspect elements.
#layer components {
.field_with_errors { #apply border-2 border-red-700}
}

Z-Index with Bootstrap: Image Still In Front of Text

I have an instance on my site where an image should lay behind a text form, but only the labels are showing. I set the z-index of the appropriate divs inline (instead of using CSS) and the site overall uses bootstrap. The erb is like this:
<div style="width: 100%; z-index: 0 !important">
<%= image_tag 'background_new_recipe.jpg', style: "height: 100vh" %>
</div>
<div class="container" style="height: 500px; margin-top: -500px; z-index: 100 !important">
<%= form_for #recipe do |f| %>
<%= f.label "Recipe Name" %>
<%= f.text_field :name, class: "form-control" %>
<%= f.label "Steps to Deliciousness" %>
<%= f.text_area :instructions, class: "form-control", style: "height: 300px" %>
<%= f.label "This Recipe Works With:" %>
<div class="field">
<%= f.check_box :chicken %>
<%= f.label "Chicken", style: "margin-left: 10px; color: red" %>
</div>
<div class="field">
<%= f.check_box :beef %>
<%= f.label "Beef", style: "margin-left: 10px; color: red" %>
</div>
<div class="field">
<%= f.check_box :fish %>
<%= f.label "Fish", style: "margin-left: 10px; color: red" %>
</div>
<div class="field">
<%= f.check_box :other_meat %>
<%= f.label "Other Types of Meat", style: "margin-left: 10px; color: red" %>
</div>
<div class="field">
<%= f.check_box :veggies %>
<%= f.label "Vegetables", style: "margin-left: 10px; color: red" %>
</div>
<div class="text-center"><%= f.submit "Share My Delicious Creation", action: :create, class: "btn btn-manly" %></div>
<% end %>
</div> <!-- container -->
And right now it is rendering like this:
Any ideas how to get this to display properly?
Recommend reviewing the z-index property and its requirements:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Specifically, z-index only functions on positioned elements (i.e. fixed, relative, absolute, static, etc).

bootstraps col nesting inherits main col style

I'm building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>

Trying to line up bootstrap rails text_area vertically versus horizontal

I'm a newbie here but I have yet to find any answers. My f.text_area :summary portion of my form is being pushed to the right and above the rest of my form and I can't correct it. I want it to be positioned inline below "topic". I've tried a number of different methods to correct the issue to no avail. Code below. Thanks. I'm using devise and bootstrap.
<div class="container new-pit">
<div class="panel-heading new-pit">Sign Up</div>
<%= render 'devise/shared/error_messages', obj: #pit %>
<%= simple_form_for(#pit) do |f| %>
<div class="panel-body new-pit">
<div class="form-group new-pit">
<%= f.label :topic %>
<%= f.text_field :topic %>
<%= f.label :summary %>
<%= f.text_area :summary %>
<h5>Upload Image</h5>
<%= f.file_field :image %>
<%= f.label :video %>
<%= f.text_field :video_url %></div>
<div class="form-actions">
<%= f.submit "Start Pit" %>
</div>
</div>
</div>
</div>

Rails Bootstrap how to format form_for (width grid collapses)

I'm trying to make a form with bootstrap-sass. I need to find the optimal configuration of bootstrap classes to make it look nice. It is not showing up the way I expect, specifically when the browser width is smaller than a certain size the spaces between labels and form fields collapse and it doesn't look good anymore. It would be ok if it only happens on small width, but that's not the case.
I would really appreciate some help with this,
really, what is the best way to format the form-horizontal with bootstrap?
Here's my code:
<form class="form-horizontal center" role="form">
<%= form_for #user do |f| %>
<div class="field">
<%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
<%= f.text_field :fname %>
</div>
<div class="field">
<%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
<%= f.text_field :lname %>
</div>
<div class="field">
<%= f.label :email, "Email:", class: "col-md-4 control-label" %>
<%= f.text_field :email %>
</div>
<!--div class="form-group" -->
<div class="field">
<%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
<%= f.text_field :comments %>
</div>
<div class="field">
<%= f.radio_button :attend, 'yes', :checked => true, class: "col-md-4 control-label" %>
<%= f.label :attend, 'I will attend.', :value => "yes" %><br />
<%= f.radio_button :attend, 'no', :checked => false, class: "col-md-4 control-label" %>
<%= f.label :attend, "I will not attend.", :value => "no" %>
</div>
<div class="field">
<%= f.check_box :workshop, class: "col-md-4 control-label" %>
<%= f.label :workshop, "Checkbox Description" %>
</div>
<div class="field">
<div class="col-md-4">
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
</div>
</div>
<% end %>
</form>
As you can see from commented out code, I first used form-group class, but it wasn't working well.
Again, the problem is that spaces between labels and text fields collapse when width of the browser is less than certain size. The labels, which are right-aligned, lose their alignment. Browser has to be almost full screen to show up correctly, which isn't right because there's plenty of space for it to show up correctly on smaller width.
I was following this guide http://getbootstrap.com/css/#grid
Edit: Added email field in the code, because it's of different size and easier to see the problem.
take a look at bootstrap v3 doc here http://getbootstrap.com/css/#forms-horizontal
and you don't need to add form tag since you are already using form_for
<%= form_for #user, :html => {:class => "form-horizontal center"} do |f| %>
<div class="form-group">
<%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :fname, class: "form-control" %>
</div>
</div>
<div class="form-group">
<%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :lname, class: "form-control" %>
</div>
</div>
<div class="form-group">
<%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :comments, class: "form-control" %>
</div>
</div>
<div class="radio">
<%= f.radio_button :attend, 'yes', :checked => true %> I will attend.
<br />
<%= f.radio_button :attend, 'no', :checked => false %> I will not attend.
</div>
<div class="checkbox">
<%= f.check_box :workshop %> Checkbox Description
</div>
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
<% end %>

Resources