I am trying to add a ruby block to a span class with in an HTML file.
<%= f.label :email =>
The div & span class are as follows:
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input class="span" id="prependedInput" type="text" placeholder="">
</div>
I have placed the ruby block inside the the input class:
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input class="span <%= f.text_field :email %>" id="prependedInput" type="text" placeholder="">
</div>
I am using Twitter Bootstrap, is this the correct way of placing ruby blocks inside of divs/spans/or input tags?
What I am trying to do is add an icon to an input field. It does work, when I submit the text. It just looks wierd, the code and the actual object.
I suspect this may be what you're after:
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<%= f.text_field :email, :id => "prependedInput" %>
</div>
Related
I was wondering how can i align labels and corresponding textfields with flexbox.I have tried the fixed width way.But it isnt responsive.
I will attach a image below.In which I tried to align them using a flexbox but didnt work the way I wanted it to :
PS:The line in between is just a indication for where i want the hyphens(separators) to be aligned.
The HTML code:
<div class="steam-ids">
<h5 class="mb-5 section-title">STEAM ID'S</h5>
<div class="profile-overview-steam3-id">
<label class="name-label">
<strong>STEAM3ID</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<%= dataObj.objSteamIds.steam3id %>
</label>
<span class="steam3-copy">
<i class="far fa-clone"></i>
</span>
</div>
<div class="profile-overview-steam32-id">
<label class="name-label">
<strong>STEAMID32</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<%= dataObj.objSteamIds.steam2id %>
</label>
<span class="steam32-copy">
<i class="far fa-clone"></i>
</span>
</div>
<div class="profile-overview-steam64-id">
<label class="name-label">
<strong>STEAMID64</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<a href="<%= dataObj.objSteamIds.steam64 %>">
<%= dataObj.objSteamIds.steam64 %>
</a>
</label>
<span class="steam64-copy">
<i class="far fa-clone"></i>
</span>
</div>
<% if(dataObj.objSteamIds.customURL){ %>
<div class="profile-overview-customURL">
<label class="name-label">
<strong>CUSTOM URL</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<a href="<%= dataObj.objSteamIds.customURL %>">
<%= dataObj.objSteamIds.customURL %>
</a>
</label>
<span class="customURL-copy">
<i class="far fa-clone"></i>
</span>
</div>
<% } %>
</div>
I know that is a lot of HTML.There is a wrapper around the elements inside the container which has a class of "steam-ids".Inside that there are separate "div" for every element.For example.'steam3id' has a div which has a label and a corresponding textfield with a class of "profile-overview-steam3id".
This is the CSS for what I have tried doing:
.steam-ids div{
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
Im pretty new to CSS Im learning any help with how can I align the textfields properly is really appreciated.
I wanted the end result to look like this using flexbox
I've been struggling with customization of the simple form field for image upload (Carrierwave) in my Rails app.
Current design:
Desired result
What I did was to inspect HTML created by simple form helpers:
<%= f.input :photo %>
<%= f.input :photo_cache, as: :hidden %>
add styling, remove unnecessary fields and icons, which resulted in:
<label class="btn file-upload-btn">
<div class="form-group file required event_photo upload-field">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
Add a photo
<div class="form-control uneditable-input input-name" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<div class="input-group-btn" style="display: none;">
<input class="file required file-upload" type="file" name="event[photo]" id="event_photo">
</div>
</div>
</div>
<span style="display:none;">
<%= f.input :photo_cache, as: :hidden %>
</span>
</label>
Button works properly - I can select the picture, name tag shows to chosen img name. However when I try to submit the form it gives an error that image can't be blank.
What am I missing here?
I suggest to use Image upload widget included in Jasny gem : http://www.jasny.net/bootstrap/javascript/
And customize the input, like with user photo :
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" name="user[photo]" id="user_photo">
</span>
Remove
</div>
</div>
You'll be free to customize the css to have this like me :
It's working on my project.
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 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.
I'm not sure what I'm doing wrong here. The form-group class should act like a row in the form-horizontal form, correct? Here's the code. It's an add/drop page for fantasy football.
<h2>Add/Drop Player</h2>
<div class="container">
<%= form_tag(slot_do_add_drop_path(#slot), method: 'post', :html => {:class => 'form-horizontal', :role => 'form'}) do %>
<div class="form-group">
<div class="col-sm-2">Player to Drop</div>
</div>
<div class="form-group">
<div class="col-sm-2"><%= #slot.player.display_name %> - <%= #slot.player.position %></div>
</div>
<div class="form-group">
<div class="col-sm-2">Add Player</div>
</div>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_qbs, p_id: 'qb_id', prompt: 'Select QB'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_wrs, p_id: 'wr_id', prompt: 'Select WR'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_rbs, p_id: 'rb_id', prompt: 'Select RB'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_tes, p_id: 'te_id', prompt: 'Select TE'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_ks, p_id: 'k_id', prompt: 'Select K'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_defs, p_id: 'def_id', prompt: 'Select DEF'}%>
<div class="form-group">
<div class="col-sm-2">
<%= submit_tag 'Submit', name: 'add_drop_player', class: 'form-control'%>
</div>
</div>
<% end %>
</div>
The partial free_agent_select
<div class="form-group">
<div class="col-md-2">
<%= collection_select :player, p_id, free_agents, :id, :display_name, {:prompt => prompt}, {:class => 'form-control'} %>
</div>
</div>
You should use a row class for each new "row" to solve overlap problem like this.
<div class="form-group row">
<div class="col-sm-2">Player to Drop</div>
</div>
It should be noted that form-group won't wrap floated elements. In this instance all elements with .col-xx-xx add a float to it's container. Adding the class name of .row simply adds the clear-fix of having a ::before and ::after element added to the element (in this case a div) and then applying the css property of clear:both to those elements. You do not need to have the class name of .row added to the parent element you can simply add .clearfix as a class. As it is purely semantics the decision is up to you.
<div class="form-group">
<label for="firstName">First Name</label>
<input id="firstName" name="firstName" class="form-control" />
</div>
<div class="form-group clearfix">
<div class="col-sm-3">CLEAR INFORMATION</div>
<div class="col-sm-3"><button class="btn btn-default" type="submit">SUBMIT</button></div>
</div>
I had a similar problem and fixed it using Zanderi's suggestion (clearfix).
However, when I changed to bootstrap 4.0 I found out that it all worked fine by default, so my suggestion: leave default code, like:
<form class="dropdown-menu dropdown-menu-right" style="padding: 15px">
<div class="form-group">
<label>Nombre</label>
<input class="form-control" id="name" placeholder="Nombre">
</div>
<div class="form-group">
<label>Imagen</label>
<input class="form-control" type="file" id="image">
</div>
<button type="submit" class="btn btn-default pull-right">Guardar</button>
</form>
and use bootstrap 4.0.