In formtastic, when create a semantic form, the layout of the object's attributes are always listed vertically (one attribute label & value occupy one row) by default.
How to customize the layout so that part of the attributes could be in horizental position. For example, I would like to have "body" attribute located on the right side of "title". How to do that?
<% semantic_form_for #post do |form| %>
<% form.inputs do %>
<%= form.input :title %>
<%= form.input :body %>
<%= form.input :section, :as => :radio %>
...
Formtastic provides lots of HTML class and id hooks on the wrapper <li> and elsewhere so that you can style different types of inputs generically (eg li.string) or specific inputs differently (eg li#user_email_input).
You can, as other answers mentioned, add extra classes to the wrapper with :wrapper_html => { :class => 'whatever' } to give yourself new hooks when the options above aren't suitable.
From here, it's purely a style/CSS problem. You probably want to float the <li> wrappers against each other with float:left; and then clear the floats on the containing <ol> with overflow:auto; or any other clearing technique of your preference.
You can use CSS to accomplish this task:
<%= form.input :title, :wrapper_html => {:class => "left"} %>
Then in your stylesheet:
.left
{
float: left;
/* etc. */
}
This will style the container of the form element (li by default)
You'd simple have to change the CSS. However I suggest you just build up the form elements yourself if you need layout customization for specific attributes.
Related
I am trying to add a character counter to an app I am helping with but the app uses simple form gem for the page i need to work with. The Gem seems pretty cool expect that it auto generates the html and i need to figure out how to add my custom div after the label and the input so i can add the character count and change it as it goes.
I can do this with jquery but i am wanting to do an initial hard coded count for initial load just in case the user has an old browser without javascript.
<%= simple_form_for #organization do |f| %>
<div class="form-inputs">
<%= f.simple_fields_for :projects do |project| %>
<div class="row">
<%= project.input :description, :placeholder => 'What does your project do?', input_html: { class: 'project-description' }, :maxlength => 255 %>
<% end %>
I want to add the character limit to the description tag.
I use the simple-form gem in a rails 3.1 project together with twitter bootstrap. I have several form views which all look fine. But now I like to style the text input field in one of the forms so it gets a bit smaller. The text input field is located in the edit form view of one of my controllers called "roles". The partial for the form looks like this:
= simple_form_for #role, :html => { :class => 'form-horizontal' } do |f|
= f.error_notification
= f.input :name
= f.input :description
.form-actions
= f.button :submit, :class => 'btn-primary'
= link_to t('.cancel', :default => t("helpers.links.cancel")), roles_path, :class => 'btn'
There is a style file under:
app/assets/stylesheets/roles.css.scss
which was created with the scaffold command. I tried to put some styling in here but this results in a change in every form of my application. Is there a good way to change the styling of a text input field only for one special form view with simple form? Where should I put the styling and how would the styling look like if I'd like to have the input text field in the size: width 100px to height 50px?
You need to know that even if you have a special CSS file just for roles. In the end, every CSS file is bundled up and served together. This means, that roles.css will be loaded on every page, which results in the behavior you described.
If you want to style a single form, you can do this by adding a class:
= simple_form_for #role, :html => { :class => 'form-horizontal roles-form' } do |f|
Now you can scope your CSS definitions to .roles-form and they will only apply to this single form.
This isn't working as I'd like.
I have an entry form for a new job, which is made up of a number of steps. By default there are 4 new and unsaved steps populated per job.
Using the code from the view below, I am able to attach the jQuery UI datepicker control to the text fields and they appear against the correct input field when i click them.
However, when I select a date from the picker it is only ever going into the field representing the start date of the first step.
<%= form_for #job, :url => jobs_path do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<% #job.steps.each do |step| %>
<%= fields_for "job[step_attributes][]", step do |s| %>
<%= s.label :name %>
<%= s.text_field :name %>
<%= s.label :start_date %>
<%= s.text_field :start_date, :class => :datepicker %>
<%= end %>
<% end %>
<script type="text/javascript">
$(function() {
$('.datepicker').datepicker({ dateFormat: "dd/mm/yy"});
});
</script>
I know ultimately this has to do with the generated id attribute for the input elements being the same, was wondering, has anybody successfully overcome this issue?
This fiddle: http://jsfiddle.net/twilson/u9m9L/ demonstrates my problem.
First, invoke fields_for on your form builder instead:
<%= f.fields_for :steps do |s| %>
Second, you don't need to iterate through #job.steps if you specify the association name to fields_for. There's an example on how to use it with one-to-many assoiciations here.
If you still have this problem, paste your generated HTML, it would easier to find the cause.
EDIT
OK so the problem is because Rails form builder does not generate child indexes to give unique IDs to nested fieldsets. This most likely happened because the associations are built but not yet saved to the DB. One way I see is to assign child indexes manually, like so:
<% #job.steps.each_with_index do |step,i| %>
<%= f.fields_for :steps, step, :child_index => i do |s| %>
See if that helps.
This is a somewhat contrived scenario given that you have only new objects. To be able to dynamically add/remove nested items, this would be a bit trickier. You can see how this can be dealt with in the nested model Railscasts.
I've been looking for an existing answer to this question, but haven't found one. I am currently working on a Rails 3 project with some forms that have multiple choice/multiple selection questions with radio buttons and check boxes, respectively. I use the form builder style, like so:
<%= form_for [#profile,#answer], :method => 'put', :url => { :action => 'update' } do |f| %>
<% if #options.nil? %>
<%= #error_message %>
<% else %>
<% #options.each do |option| %>
<label for="<%= 'answer_response_' + option.downcase.gsub(' ','_') %>"><%= f.radio_button :response, option %><%= option %></label>
<% end %>
<% end %>
<div id="comments_area">
<p>Do you have any additional comments?</p>
<%= f.text_area :comments, :cols => 90, :rows => 5 %>
</div>
<%= submit_tag("Previous") %>
<%= submit_tag("Next") %>
<% end %>
#options is just an array of strings denoting each option to be displayed.
The labels work perfectly, attached to their respective radio button/check box. However, the text for the label always seems to show up on the next line no matter what I do. Example:
Describe yourself:
[]
Short
[]
Fun
[]
Bored
I have already tried using the f.label form helper after the f.radio_button/check_box as well, and it has the same problem. In fact, this is why I am doing the label tag "HTML-style" above (not using the ERB). Is this a styling problem that can be solved with CSS? If so, how can I put the label text on the same line after the respective check box/radio button?
For completeness' sake, this is how to resolve the multiline concern with an inline style (using haml)
= f.check_box :eula_accepted
= f.label :eula_accepted, "I accept the EULA", :style => "display:inline"
This could be a CSS issue, but more likely it's because you placed radio button INSIDE the label, when it should be before or after.
Try separating the two. If that doesn't change the outcome, look into input width - if your inputs are set to cover the entire line, that would push the text into the next line. To change alignment, you can also look into the CSS keywords "inline", "float" and possibly "vertical-align". Getting the Web Developer extension for Firefox can also help you figure out what's going on with the CSS, e. g. how much space an element is taking up.
Say I have a Rails form like the following
<% form_for #model do |f| %>
<%= f.label :column %>
<%= f.check_box :column %>
<% end %>
Is there a way I can get the html id that will be generated for the 'column' check box? What would be great is if there was a way to add in
<%= f.observe_field :column, options %>
Anyone know how to add this to FormBuilder?
For generating an element's id programatically, see this. As it seems, there is no easy way out.
You could add this to FormBuilder by wrapping up certain field tags. See for example this.