I want to put this: <%= f.text_field :name %>
into the code below, but I keep getting an error. How can I properly embed it so that the code will work. Thanks!
<form>
<div class="form-group">
<input type= class="form-control" id="exampleInputEmail1" placeholder="Enter Value">
</div>
</form>
You dont' need the whole input section, just do this :
<%= f.text_field :name , :class=> "form-control"%>
Just add bootstrap classes into your code via parameter :class
Use Formtastic Bootstrap it's a gem for rails, create forms with automatic bootstrap class
'f' is not instantiated in you code so following code will raise error in the form-
<%= f.text_field :name %>
alternatively you can use this -
<%= text_field_tag :name,'', :placeholder => "Enter Value", :class=>"form-control", :id=>"exampleInputEmail1" %>
this will not raise any error on embedding in the form.
Related
Im trying to incorporate the best_in_place gem and got everything working, but now Im trying to get it to use material design lite to style the input when it is clicked.
Here is the html for the view:
<h2><%= best_in_place #user, :displayname, :as => :input %></h2>
And this is what the html would be for a normal text input with MDL:
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
Cant figure out what options to make this work with the best_in_place gem
I dont have the "best_in_place gem".
This is a solution I used to style a form containing an email input. I replaced the entire MDL "input" line. You would have to replace the "id"/ "for" relation and email field to something relevant to your purpose. You may have to fiddle around. Hope it points you in the right direction.
<%= form_for(#user) do |f| %>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<%= f.email_field :email, class:'mdl-textfield__input', type:'text', id:'email' %>
<label class="mdl-textfield__label" for="email">EMAIL</label>
</div>
<% end %>
I have the following code:
<div id="example1" class="has-error">
<section>
<label class="input">
<%= f.label :email %>
<%= f.text_field :email, placeholder: "Enter Email"%>
</label>
</section>
</div>
<div id="example" class="has-error">
<section>
<label class="input">
<%= f.label :password %>
<%= f.password_field :password, placeholder: "Enter password" %>
</label>
</section>
</div>
I have downloaded a theme from wrap bootstrap and everything was working fine but when I ran the above code I was not able to see the changes for password field that I should be getting by using "class="has-error".
It works fine for "text" type but it is not working with the password field. I guess this has something to do with my theme that I am using. I am not sure, I am saying so because when I was working without the theme the above code worked fine for both types that is for "text" as well as for "password".
I am not able to catch what could be my error, actually I am not able to figure out where could be the error. But people here always help and so I am posting my query here. Thank you.
You can try changing the order of your CSS files if you don't want your theme to override bootstrap.
Hope this helps!
I would like to add a span element to my i18n localized label in Rails 3.2.3.
This is what I've got:
<%= f.label :address, "<span class=\"optional\">optional</span>".html_safe %>
However, in the output it produces:
<label for="person_address">
<span class="optional">optional</span>
</label>
What I need is this:
<label for="person_address">
Address <span class="optional">optional</span>
</label>
Can anybody tell me how to do this?
use the block form and translate the attribute name "manually" :
<%= f.label :address do %>
<%= f.object.class.human_attribute_name :address %>
<span class="optional">optional</span>
<% end %>
note
The second parameter in the 'label' helper will be the text of the label. If you did this:
<%= f.label :address, "Address <span class=\"optional\">optional</span>".html_safe %>
It would show correctly, I think.
You an also add html to the yml file and use .html_safe on the yml item explicitly it would also work.
<%= f.label :address, t('path.to.label').html_safe %>
I'd also be tempted to try something with javascript and css - to class the field and add something via jquery or with a css :after to the label.
I'm working on a mobile web app using Rails and jQuery Mobile. I've got a rails model called 'Event' and the corresponding controller and view (generated via scafolding). Now I'm working on the creation of a new Event using a form that has been generated. I'd like to slightly change this form but still be compatible with the rails model.
Here's how it looks now:
<%= form_for(#event) do |f| %>
<div class="field">
<%= f.label :priority %><br />
<%= f.number_field :priority %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
The scafolded view is using some kind of default helper class I guess. But I'd like to change the f.number_field to a jQuery mobile slider which looks like this in html:
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" />
Now, how do I combine the rails model with the jQuery slider, so that when the user clicks submit the clips_controller receives a clip model which contains the priority which has been adjusted using the slider?
Thank you in advance!
You can use range_field helper method
Instead of this:
<%= f.number_field :priority %>
Use this:
<%= f.range_field :priority, :min => 0, :max => 100 %>
I am trying to enhance an existing Rails application using React (react-rails gem).
This app has a form built with following code:
<%= form_for #article do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, size: "60x12" %>
</div>
<div class="form-group">
<label><%= f.checkbox :sets_expiration_date %> Sets expiration date</label>
<%= f.date_select :expiration_date, start_year: Date.today.year %>
</div>
<button type="submit" class="btn btn-default">Create</button>
<% end %>
I want this form to have following functionalities:
When the user toggles the checkbox, the three drop-down lists for the expiration_date field shows or hides.
When the user submits, the form data is sent to the server via Ajax for validation and persistence.
When the validation fails, the relevant labels and input fields get surrounded with red border.
When the form data gets saved successfully, the form disappears and a message appears.
In my first attempt, I managed to achieve the goal but I found that I had to write vanilla HTML code a lot.
This is a disappointment for me.
Especially, I don't like to specify the name and defaultValue attributes for each <input> tag
like <input name="article[title]" defaultValue={this.props.object.title}>.
I also had to write rather long JavaScript code to create three drop-down lists for the expiration_date field.
How can I construct such a form using React efficiently? Are there any good plugins?