I have this signup page snippet that I want to use. My issue is I am using devise with my rails app so I'm not sure how to replace the fields in the snippet with the ruby code while retaining styles.
This is the code from devise in my view
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.label :email, :class=>'formlabel' %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password, :class=>'formlabel' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation, :class=>'formlabel' %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<%= render "teachers/shared/links" %>
and this is the snippet
<div class="container-fluid stylish-form">
<h2 class="text-center">Stylish Signup Page Using Bootstrap</h2>
<div class="row mar20">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="inner-section">
<form method="POST" action="https://google.co.in">
<div class="mar20 inside-form">
<h2 class="font_white text-center">SIGN UP</h2>
<ul>
<li class="icon-holder dsp-flex">
<i class="fa fa-facebook "></i>
</li>
<li class="icon-holder dsp-flex">
<i class="fa fa-twitter "></i>
</li>
<li class="icon-holder dsp-flex">
<i class="fa fa-instagram "></i>
</li>
</ul>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil "></i></span>
<input type="text" class="form-control" name="text" placeholder="First Name...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope "></i></span>
<input type="email" class="form-control" name="text" placeholder="Email...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock "></i></span>
<input type="password" class="form-control" name="text" placeholder="Password...">
</div>
<div class="footer text-center">
Get Started
</div>
</div>
</form>
</div>
</div>
</div>
<h2 class="text-center font_white">Thank You For Visiting This Snippet</h2>
</div>
Simply replace your the <input> tags in your snippet. with the <%= f.email_field :email, autofocus: true %> on the original forms. Add any other missing options like placeholders and such.
Compare the resulting HTML, ultimately it will be the same.
Related
I'm using the bootstrap datepicker plugin for two input fields inside a simple form:
<div class="row">
<div class="col-lg-6">
<div class="form-group" id="datepickerContainer">
<i class="fas fa-calendar-alt"></i>
<%= f.label "From" %>
<%= f.input :from, :as => :string, label: false, :input_html => { :class => "datepicker", :id=>"datepickerContainer" } %>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" id="datepickerContainer">
<i class="fas fa-calendar-alt"></i>
<%= f.label "Until" %>
<%= f.input :until, :as => :string, label: false, :input_html => { :class => "datepicker" } %>
</div>
</div>
</div>
Currently as you can see above I have a font awesome icon next to each label... and I would like to move the awesome icon next to the each input like this:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</div>
So I'm doing this:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<%= f.input :from, :as => :string, label: false, :input_html => { :class => "datepicker", :id=>"datepickerContainer" } %>
</div>
But I'm getting this results:
Any idea what I'm doing wrong?
Im trying to customise the "<%= f.text_area :content %>" in rails 5.0.
To a text_area that materialize has like this one
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
The problem is that I tried to figure it out on how to insert the default text_area that I have in to this one, erasing the ugly box the I have to type a text. (I'm a bit fancy)
This is my form:
<%= form_for(#micropost, html: { multipart: true }) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.text_area :content %> >>>>>>#This is the one I want to change
<%= f.submit "Post", class: "waves-effect waves-light btn green accent-3 z-depth-4" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<% end %>
This is what I tried:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"><%= f.text_area :content %></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
But i'm unlucky to make it work, and I tried many other ways that I haven't figure out how to customise this feature to my app.
I spend to much time figuring out on how to erase that box and put a single fancy line style materialize way.
I will appreciate too much you help!
What's the problem you have?, you just need to add the corresponding class:
<%= f.text_area :content id: 'icon_prefix2', class: 'materialize-textarea' %>
I am trying to integrate Ruby code into the bootstrap search bar.
Here's my code thus far:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
# Search function
<%= form_tag deals_path, :method => "get" do %>
<%= text_field_tag :search, params[:search], placeholder:"Search a deal name %>
<%= submit_tag "Search", class: "btn btn-default" %>
<%=form_tag deals_path,{:method=>'get', class:"navbar-form navbar-left", role:"search"} do%>
<div class="form-group">
<%=text_field_tag :search,"",class:"form-control",placeholder:"Search"%>
</div>
<%=submit_tag 'Seach' ,class:"btn btn-default "%>
<%end%>
So I have this contact form in rails
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :phone %><br />
<%= f.text_field :phone %>
</div>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description, :size=>"30x3" %>
</div> <br/>
<div class="actions">
<%= f.submit "Submit" %>
</div>
<% end %>
I want my form to utilize full page, i.e. I want the fields till phone to be on the left side and the description as a text area on the right horizontally.
Something like this
I am using bootstrap with the rails.
I tried with col-md-4 for 1 part and col-md-8 for another. doesn't fix that.
Please help.
From this template i made here:
http://www.bootply.com/XAMvtjjoQw
You can adapt it to ruby like this:
<form>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<%= f.text_field :name, :class => "form-control" %>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<%= f.text_field :email, :class => "form-control" %>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<%= f.text_field :phone, :class => "form-control" %>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputFile">File input</label>
<%= f.text_area :description, :class=>"form-control", :size=>"30x3" %>
</div>
</div>
</form>
for a pure HTML layout you can do this:
<form action='' method='post'>
<div class='row'>
<div class='col-md-2'>
<div class='control-group'>
<label for="name">Name</label>
<input id="name" type='text' name='name' value='' class='form-control'>
</div>
<div class='control-group'>
<label for="email">Email</label>
<input id="email" type='text' name='email' value='' class='form-control'>
</div>
<div class='control-group'>
<label for="phone">Phone</label>
<input id="phone" type='text' name='phone' value='' class='form-control'>
</div>
</div>
<div class='col-md-10'>
<div class='control-group'>
<label for="description">Description</label>
<textarea id="description" name='description' class='form-control' rows='4'></textarea>
</div>
<div class='control-group'>
<br><input type='submit' name='submit' value='Submit' class='btn btn-sm btn-info'>
</div>
</div>
</div>
</form>
I have a modal that is only rendered within the body tag, but it still appears stuck behind the fade.
Here is the code in my ERB:
<div class="modal fade add-video-popup" id="add-video-step-4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TESTING 1, 2, 3</i></p>
</div>
<div class="content">
<% if #family_tree %>
<%= simple_form_for([#family_tree, #video], :remote => true) do |f| %>
<div class="column">
<div class="f-row">
<%= f.input :title, label: "Title:" %>
</div>
<div class="f-row">
<%= f.input :description,label: "Description:" %>
</div>
<div class="f-row">
<%= f.input :circa, as: :datepicker, start_year: Date.today.year - 5, label: "Circa:" %>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<%= f.collection_select :user_ids, #family_tree.members.order(:first_name), :id, :first_name, {}, {multiple: true} %>
</div>
</div>
<%= f.button :submit, "Add Video", id: "video-submit" %>
<% end %>
<% end %>
</div> <!-- //content -->
</div> <!-- //modal fade -->
Here is the actual HTML generated:
<div class="modal fade add-video-popup in" id="add-video-step-4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TESTING 1, 2, 3</i></p>
</div>
<div class="content">
<form accept-charset="UTF-8" action="/family_trees/1/videos" class="simple_form new_video" data-remote="true" id="new_video" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<div class="column">
<div class="f-row">
<div class="control-group string required video_title"><label class="string required control-label" for="video_title">Title:</label><div class="controls"><input class="string required" id="video_title" name="video[title]" type="text"></div></div>
</div>
<div class="f-row">
<div class="control-group string required video_description"><label class="string required control-label" for="video_description">Description:</label><div class="controls"><input class="string required" id="video_description" name="video[description]" type="text"></div></div>
</div>
<div class="f-row">
<div class="control-group datepicker optional video_circa"><label class="datepicker optional control-label" for="video_circa">Circa:</label><div class="controls"><input class="datepicker optional hasDatepicker" id="video_circa" name="video[circa]" type="text"><input class="circa-alt" id="video_circa" name="video[circa]" type="hidden"></div></div>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<input name="video[user_ids][]" type="hidden" value=""><select id="video_user_ids" multiple="multiple" name="video[user_ids][]"><option value="3">Jackie Lynn</option>
<option value="1">Marcamus</option>
<option value="2">Mike Green</option>
<option value="8">Very</option></select>
</div>
</div>
<input class="btn" id="video-submit" name="commit" type="submit" value="Add Video">
</form> </div> <!-- //content -->
</div>
I had read on other questions that it is the positioning of the modal, so I made sure it appears right before the footer tag and not nested within any other tag and I am still having this issue.
Thoughts?