I have a search card to search through some profiles. For some reason,one parameter is shown out of the card like shown below:
Even if I exchange the spot of Major and Job type, Major will be displayed out of the card. I'm using the materialize framework. What is the reason for this issue?
My code to show this is:
<div class="col s12 m6 l3">
<div class="card">
<div class="card-content center">
<div style="margin-top: -20px; width: 113%; height: 40px; background-color: #0288d1;margin-left: -21px;">
<span class="card-title2">Advanced search</span>
</div>
<%= simple_form_for #search do |s| %>
<%= s.input :keyword, label: 'Name' %>
<label>College</label>
<%= s.select :college, options_for_select(#college), :include_blank => true %>
<%= s.input :min_gpa, label: "Minimum GPA" %>
<label>Major</label>
<%= s.select :major, options_for_select(#major), :include_blank => true %>
<label>Job type</label>
<%= s.select :level, options_for_select(#level), :include_blank => true %>
<%= s.button :submit, "Search" %>
<% end %>
</div>
</div>
</div>
can you try instead?
<%= s.submit 'Search' %>
Related
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 trying to style a form to have the following layout:
[DateBegin] [DateEnd]
.Input field. .Input field.
Is this possible with RoR? If so how do I do it, I tried with but clearly that didn't work, do I have to style it with divs? I'm using bootstrap, if there is a good bootstrap solution I'd like to know aswell, help/ideas appreciated
below is sample view for your requested format, field are date_begin and date_end
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<%= f.label :date_begin,"Label for Date begin" %>
<%= f.text_field :date_begin, :class => 'form-control' %>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<%= f.label :date_end,"label for date end" %>
<%= f.text_field :date_end, :class => 'form-control' %>
</div>
</div>
</div>
I am building a form in Rails4. When I added divs for styling this form, the f.submit button stopped working. I have not changed the controller or the model. Code below. Thanks!
_form in the Plans View
<div class="sidebar-widget">
<div class="Pricing-box">
<div class="price-title spacing-box">
<h4>Create a New Plan</h4>
</div>
<hr>
<div class = "sidebar-form"
<%= form_for(plan) do |f| %>
<div class="name-field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="time-field">
<%= f.label :time %>
<%= f.time_field :time %>
</div>
<div class="date-field">
<%= f.label :date %>
<%= f.date_select :date %>
</div>
<div class="restaurant-field">
<%= f.label :restaurant %>
<%= f.collection_select :restaurant_id, Restaurant.all, :id, :name %>
</div>
</div>
<div class="spacing-grid">
<%= f.submit "Create Plan", class: 'btn btn-md btn-black'%>
<% end %>
</div>
</div>
From the Plans Controller: new, index and create actions
class PlansController < ApplicationController
def new
#plan = Plan.new
end
def create
#plan = Plan.create(plan_params)
#plan.users << current_user
redirect_to #plan
end
def index
#plans = Plan.all
#binding.pry
respond_to do |format|
format.html
format.js {}
end
end
From the Plans view, index.html.erb
<section class="ptb ptb-sm-50">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 mt-xs-30">
<%= render "plans/form", {plan: Plan.new } %>
<%= render "plans/all_plans", {plans: #plans} %>
</div>
</div>
</div>
</section>
Try modifying your form_for tag so that it looks like this:
<%= form_for #plan, url: {action: "create"} do |f| %>
This is the syntax that the Rails guide recommends - not sure if this will solve your problem or not.
I'm using simple_form in my rails 4.2 project. I'm having some trouble with the row/field alignment following a validate with the error display. Any field that validates does not vertically align with the failed validated fields.
<%= simple_form_for(#creditrequest) do |f| %>
<%= f.error_notification %>
<br>
<div class="form-actions creditrequest_form">
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :account, as: :string, label: "Account #", placeholder: "000-012345" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :gldsname, label: "GLDS Name", placeholder: "Bob Wehadababyitsaboy" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :contact_no, label: "Contact No", placeholder: "(989) 555-1212" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :credit_amount, as: :string, label: "Credit Amount", placeholder: "$", class: "textarea_oneline" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :package, placeholder: "PLV" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :reason, placeholder: "Credit for Service Issue" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :detail, as: :text, label: "Why are we issuing a credit?" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :tech, placeholder: "AN" %>
<br>
<br>
<%= f.button :submit, "Submit", class: "btn btn-custom" %>
</div>
</div>
</div>
<% end %>
At all Simple Form is not source of this problem. The problem is you styles, and you need first set line height and vertical alignment for you blocks:
.form-actions.creditrequest_form {
> .row.row-centered {
line-height: %{Parent-value}px;
> .col-sm-2.col-centered {
display: inline-block; /* can use vertical alignment */
vertical-align: top; /* pull all to top */
line-heigth: %{child-value}px;
}
}
}
Update: Consider that .error is added on error and it can add not right styles.
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>