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).
Related
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}
}
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" %>
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>
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>
Following the ruby-on-rails tutorial by Micheal Hartl
I've gotten to the sign-up page layout part( 7.22, listing 7.19>> http://www.railstutorial.org/book/sign_up)
But the things is my page displays oddly, the submit button is as wide as the web page not to mention the whole form as well.
I checked the code and it is the same as the book states, the only difference is I changed "$grayLighter" to "$gray-light" as "$grayLighter" I believe is depreciated.
Here is my custom.css.scss
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
Here is my
app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="span6 offset3">
<%= form_for(#user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
One of the things I have run into recently is that the CSS is pulled in during the :precompile stage of the build. So when I make CSS changes, I have to remember to build the app, or bounce the host its on so it pulls in any CSS changes during the :precompile.
What I do to test is to put the CSS on the top of the html.erb page in brackets.
This allows me to test the CSS with a simple page refresh on my browser. Once I have that working and I know it looks good. Then I copy that CSS to the relevant CSS file and build it to test it again.
Not sure if this is your issue or not, but I know it messed with me.
In Bootstrap3, span6 offset3 doesn't work.
try this :
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">