I am using zurb foundation css in my rails application. I am having trouble centering the submit button in the form. The button is always at the left.
<%= form_for #campaign do |f| %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :content %>
<%= f.text_area :content %>
</div>
<%= f.submit :class => "button radius success text-center", :value => "Create" %>
<% end %>
There has to be a simple class that I am missing.
To center a button you need to wrap it in a element with the text-center class.
Thats just how centering elements with CSS the text-align property works - it will center inline and inline block child elements. But not itself.
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet"/>
<form>
<div class="field">
<label>Name</label>
<input type="text">
</div>
<div class="field">
<label>Name</label>
<textarea></textarea>
</div>
<div class="text-center">
<input type="submit" class="button radius success" value="Create">
</div>
</form>
Related
I am just trying to set up a basic application with Ruby on Rails. I have the basic CRUD functions for different entities and with one of them, the form that is supposed to load when the user wants to edit a row does not appear. It knows which ID it needs to edit, it just doesn't load the form.
Link to take you to edit page;
<%= link_to 'Edit Review'. edit_review_path(review) %>
Controller function;
def edit
#review=Review.find(params[:id])
end
HTML Form;
<div class="container">
<h2>Edit Review Details</h2>
<% form_for #review do |f| %>
<div class="form-group">
<%= f.label :"Profile" %><br />
<%= f.select :ProfileId, Profile.all.collect {|x| [x.Name,x.id]}, {:include_blank => 'Select Profile'}, class:'form-control'%> <br /><br />
</div>
<div class="form-group">
<%= f.label :"Product" %><br />
<%= f.select :ProductId, Product.all.collect {|x| [x.pName,x.id]}, {:include_blank => 'Select Product'}, class:'form-control'%>
</div>
<div class="form-group">
<%= f.label :"Review Author" %>
<%= f.text_field :Author %>
</div>
<div class="form-group">
<%= f.label :"Product Rating" %>
<%= f.number_field :ProductRating %>
</div>
<div class="form-group">
<%= f.label :"Review Text"%>
<%= f.text_field :ReviewText %>
</div>
<div class="form-group">
<%= f.label :"Date of Review" %>
<%= f.date_field :DateofReview %>
</div>
<div class="form-group">
<%= f.submit %>
</div>
<% end %>
</div>
I have 2 models that have a working update feature and they are the exact same code as this however for this, when I click the button. The page loads but nothing appears other than the text.
Can someone explain why this is happening? I thought it may be the dropdown boxes but I removed them and still no form loaded up.
This is likely a super easy answer for a Ruby on Rails expert. I have a form and need to add in a checkbox that has multiple items. I've been messing with the following code for a lot longer than I'd like to admit:
<%= form_for :lead, url: something, html: {id: 'product-form'} do |f|%>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<%= f.label :product%>
<%= f.check_box :product, {multiple:true}, "option", "option2", :class => 'form-control'%>
</div>
</div>
</div>
<% end %>
With this code I get the error "wrong number of arguments (5 for 1..4)".
Basically I just want someone to be able to pick multiple options. I've also tried the following:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<%= f.label :product%>
<%= f.check_box :option1, "Option1" :class => 'form-control'%>
<%= f.check_box :option2, "Option2", :class => 'form-control'%>
</div>
</div>
</div>
And I get the delightful "undefined method `merge' for "Option1":String". What am I missing to put the values in associated with the label?
I use Rails 5.1.6 and this is how I achieved adding multiple options for checkbox. I also placed it in a dropdown.
In the migration file:
t.string :skills
In my controller "tasks_controller.rb":
def task_params
params.require(:task).permit(:work_type, :title, :post, {skills: []})
end
In my model "task.rb" I did:
validates :skills, presence: true
serialize :skills, JSON
I created a module mobilephones_data.rb in directory "app/model/concerns/" which holds all the options of the checkbox as an array that can be edited easily.
In app/model/concerns/mobilephones_data.rb I wrote:
module Mobilenphones_Data
Activities = [
'Amazon Kindle', 'Blackberry', 'iPad', 'iPhone', 'Mobile Phone', 'Nokia',
'Palm', 'Samsung'
]
end
This will put all data from module's array into the checkbox drop-down as checkbox options. In My form I did:
<div class="card">
<a class="card-link card-header" data-toggle="collapse" href="#collapseOne">
Mobile Phones
</a>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
<% Mobilenphones_Data::Activities.each do |activity| %>
<div id="skill_list" class="col-lg-3 col-md-4 col-sm-12 col-12">
<%= f.check_box :skills, { multiple: true }, activity, false %>
<%= activity %>
</div>
<% end %>
</div>
</div>
</div> <!--bottom-->
</div>
In my view "show.html.erb":
<% #name_of_model.skills.each do |skill| %>
<%= skill %>
<% end %>
For posterity sake:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<%= f.label "Select a Product" %><br />
<%= f.check_box(:option) %>
<%= f.label(:mug, "Option") %><br />
<%= f.check_box(:option2) %>
<%= f.label(:mousepad, "Option2") %>
</div>
</div>
</div>
I'm having a hard time to set an icon inside my input in my form_for in rails 5!
i already tried many different ways to do it but nothing is working
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: "form-control" do %>
<%= fa_stacked_icon "twitter", base: "square-o" %>
<% end %>
</div>
I would like to know how can i do to set the icon inside my input
thanks
You will need CSS to do it, here's how:
Go here and get the unicode value of the icon you want.
Add it as either value or placeholder attribute to your input using raw method (otherwise it will output the code).
Style your input with "font-family: 'FontAwesome';".
For example (using stack-overflow code ):
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: "form-control", value: raw(""), style: "font-family: 'FontAwesome';" %>
</div>
And you're good to go; check the snippet:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<input type="text"
value=""
style="font-family: 'FontAwesome';"/>
This will keep the icon visible in the beginning of the text box:
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><%= fa_icon "twitter" base: "square-o" %></span>
</div>
<%= f.text_field :name, class: "form-control" %>
</div>
</div>
I am trying to initiate a variable showName when the page loads. It worked fine when I did it using just angular but when I implemented it with rails(with embedded ruby tags) I am not able to hide the text field and save button as my variable gets undefined. I have tried couple of ways and ended with no result.
Here is my code. Any help is really appreciated. Thanks.
Edit.html.erb:
<div class="row" ng-controller="EditUserCtrl">
<div class="col-md-6 col-md-offset-3" id="editForm">
<%= form_for(#user) do |f| %>
<h1 id="editHeader">Account Information </h1>
<%= render 'shared/error_messages' %>
<div class="form-group">
<%= f.label :name, "Full Name:" %><br>
<div class="row">
<div class="col-sm-7">
<div ng-hide="showName">
<%= f.label :name, #user.name , id:"editFields" %>
</div>
<%= f.text_field :name, { :'ng-show' => 'showName'}%>
</div>
<div class="col-sm-5" ng-show="showName">
<%= f.button "Save", :action => "update_name" , :method => :put, class: "btn btn-primary", :'ng-click' => "clicked()", id:"editAccount" %>
</div>
<div class="col-sm-5" ng-hide="showName">
<i id="nav-cart-count" class="glyphicon glyphicon-edit"></i> Edit
</div>
</div>
</div>
<% end %>
</div>
Use ng-init to initialize the variable
<div class="row" ng-controller="EditUserCtrl" ng-init="showName = true">
Ruby 2.1.5 on Rails 4.2.0:
I have two directories. One directory is a rails-generate scaffold named 'inqueries'. The other directory is named 'welcome', which only houses a landing paged named index.html.erb. The inquery form works & submits fine as long as I'm using the view from the actual 'inquery' scaffold/directory.
I am able to render the inquery _form on my index.html.erb landing page using :
<%= render partial: "inqueries/form", locals: {inquery: #Inquery} %>
However, this JUST renders the form. When I hit the submit button, no errors, flash messages, or inquery is submitted. It is complete non-action, including on my rails terminal.
How can I properly make the form work on my landing page?
Here is my welcome_controller.rb file. This controller handles the landing page where I am trying to render the inquery scaffold's form:
class WelcomeController < ApplicationController
def index
#inquery = Inquery.new
render layout: false
end
end
This is my new rails scaffold-generated method in the inqueries_controller.rb:
def new
#inquery = Inquery.new
respond_with(#inquery)
end
Sorry, Here is the Inquery _form itself:
<%= form_for(#inquery) do |f| %>
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<%= f.submit t('.submit'), class: "btn btn-primary" %>
<% end %>
EDIT 2: I saw there were a couple of suggestions with the logic. I have simplified the partial just to see if I could get it to work and it still does not submit properly outside of its directory. I am new to rails, do I need to render a new action in the second directory that I am calling it into?
Your partial has 2 forms. The one which submits to inqueries#create is an empty form with no submit button, the other which has no action contains the text fields and the submit action.
The form_for tag will create the html tags, you dont need to specify them again.
Tip - Switch to haml. You won't ever look back at erb :)
This should work (not tested) -
<%= form_for(#inquery) do |f| %>
<div id="error_explanation">
<% if #inquery.errors.any? %>
<h2>
<%= pluralize(#inquery.errors.count, "error") %> prohibited this inquery from being saved:
</h2>
<ul>
<% #inquery.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
<% end %>
</div>
<br />
<div class="col-lg-12">
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<%= f.submit t('.submit'), class: "btn btn-primary" %>
</div>
</div>
<% end %>
Figured it out. Foolish error,
My welcome page is a bootstrap theme that I hadn't fully gone over. I had imported some unnecessary javascript files that I think were blocking the form.