This seems very elementary, so I'm not sure what I'm doing wrong. I have a #videos collection (which debugging #videos.count reveals to be 4), but the line <%= render #videos %> is only rendering 2 of the 4 items. Here is the controller method (VideosController):
def index
#video = Video.new(athlete_id: current_user.id, sport_id: current_athlete_sport.id)
#videos = current_user.videos_for_sport(current_athlete_sport).order("date DESC")
debugger
respond_with #videos
end
And the _video partial that the aforementioned <%= render #videos %> line is rendering:
<%= form_for video do |f| %>
<div class="row edit-video-container <%= video == #videos.pop ? 'last' : '' %>">
<div class="span4">
<div class="row">
<div class="span4 video-thumbnail">
<%= image_tag video.thumbnail_url || asset_path("video-encoding-placeholder.png"), {alt: "", title: "#{video.name || "My video" + video.id}"} %>
<div class="video-ribbon">
<ul>
<li class="pull-left">
<%= link_to "#video-player-modal", { data: { toggle: "modal", link: video.mp4_video_url, thumbnail: video.thumbnail_url }, role: "button", class: "video-player-link" } do %>
<i class="icon video-play"></i>
<p>Play</br>Video</p>
<% end %>
</li>
<li class="pull-left">
<%= link_to rotate_video_path(video, direction: "ccw"), :data => { :method => "put", :confirm => "Are you sure?", :type => 'json' } do %>
<i class="icon video-rotate-left"></i>
<p>Rotate</br>Left</p>
<% end %>
</li>
<li class="pull-left">
<%= link_to rotate_video_path(video, direction: "cw"), :data => { :method => "put", :confirm => "Are you sure?", :type => 'json' } do %>
<i class="icon video-rotate-right"></i>
<p>Rotate</br>Right</p>
<% end %>
</li>
<li class="pull-left">
<%= link_to video_path(video), :data => { :method => "delete", :confirm => "Are you sure?", :type => 'json' } do %>
<i class="icon video-delete"></i>
<p>Delete</br>Video</p>
<% end %>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span4">
<%= f.check_box :featured, { checked: video.featured?, class: "autosave checkbox-right", data: { event: 'change' } } %>
<%= label_tag "video-checkbox-featured-#{video.id}", "Use as featured video?", { class: "checkbox-right-label" } %>
</div>
</div>
</div>
<div class="span4">
<div class="row">
<div class="span4">
<%= label :video, :name, "Video Name" %>
<%= f.text_field :name, { class: "span4 autosave"} %>
</div>
</div>
<div class="row">
<div class="span4">
<%= label :video, :video_type_id, "Video Type" %>
<%= f.select:video_type_id, VideoType.all.collect { |vid| [vid.name, vid.id] }, { include_blank: "Choose One", selected: video.video_type_id }, { class: "chosen-select autosave", id: "", data: { event: 'change' } } %>
</div>
</div>
<div class="row">
<div class="span4">
<%= label :video, :sport_id, "Video Sport" %>
<%= f.select :sport_id, current_user.sports.collect { |sp| [sp.name, sp.id] }, { include_blank: "Choose one", selected: video.sport_id }, { class: "chosen-select autosave", id: "", data: { event: "change" } } %>
</div>
</div>
<div class="row">
<div class="span4">
<%= label :video, :date, "Date Recorded" %>
<%= f.text_field :date, {class: "autosave date datePicker span4", value: js_date(video.date) } %>
</div>
</div>
<div class="row">
<div class="span4">
<%= label :video, :uniform_number, "Uniform Number" %>
<%= f.text_field :uniform_number, { class: "autosave span4"} %>
</div>
</div>
</div>
</div>
<% end %>
Again, throwing a debugger in the controller, or a debug on the page just before the <%= render #videos %> line shows 4 videos, however only 2 are actually being rendered. At a bit of a loss here!
The problem is here:
video == #videos.pop
Pop takes out a member from your collection. You shouldn't use it here because you brake the looping.
If this is the case, I suppose you can see only the first and the last item of your collection.
Related
I have been struggling to convert this to some sort of rails helper select. Can anyone help with this?
<%= form_with(model: scheduleevent, class: "contents", data: { controller: 'nested-form', nested_form_wrapper_selector_value: '.nested-form-wrapper' }) do |form| %>
... schedtimerange_form start ...
<%= select_tag "days[]",options_for_select(Date::DAYNAMES.zip((1..7))), id:"days[]", multiple: true, class: 'multis' %>
<% end %>
The select tag is within a nested attribute partial called schedtimerange_form that is called like this:
<template data-nested-form-target="template">
<%= form.fields_for :schedtimeranges, Schedtimerange.new, child_index: 'NEW_RECORD' do |schedtimerange| %>
<%= render "schedtimerange_form", form: schedtimerange %>
<% end %>
</template>
<%= form.fields_for :schedtimeranges do |schedtimerange| %>
<%= render "schedtimerange_form", form: schedtimerange %>
<% end %>
Schedtimerange_form:
<div data-new-record="<%= form.object.new_record? %>">
<div class="w-full">
<div data-controller="select">
<%= select_tag "days[]",options_for_select(Date::DAYNAMES.zip((1..7))), id:"days[]", multiple: true, class: 'multis' %> </div>
</div>
<div>
<div class="w-full mb-2">
<label class="form_label"><%= t("scheduling_events_new_lbl_starttime") %> </label>
<div class="pr-4"><%= form.text_field :start_time, data: { controller: "flatpickr", flatpickr_enable_time: true, flatpickr_no_calendar: true,
flatpickr_date_format: "h:i K" }, class: 'form_control', placeholder: "#{t("scheduling_events_new_lbl_starttime")}" %> </div>
</div>
<div class="w-full mb-4">
<label class="form_label"><%= t("scheduling_events_new_lbl_endtime") %> </label>
<div class="pr-4"><%= form.text_field :end_time, data: { controller: "flatpickr", flatpickr_enable_time: true, flatpickr_no_calendar: true, flatpickr_date_format: "h:i K" }, class: 'form_control', placeholder: "#{t("scheduling_events_new_lbl_endtime")}" %> </div>
</div>
<div class="w-full">
<button type="button" class="font-medium text-red-600 dark:text-red-500 hover:underline" data-action="nested-form#remove">Remove Times</button>
</div>
</div><%= form.hidden_field :_destroy %>
</div>
<%= select_tag "days[]",options_for_select(Date::DAYNAMES.zip((1..7))), id:"days[]" %>
I've moved from BS3 to Materialize so I am going through and changing my forms - I have 4 forms that are extremely similar, but as I switched the first one over it's no longer submitting. The button doesn't even seem like it's getting clicked, but I tied a generic 'logMe' function to it and sure enough it is.
My routes are the exact same for both, the new form is
<div class="row">
<%= form_with(model: #statement, local: true) do |form| %>
<% if #statement.errors.any? %>
<% #statement.errors.full_messages.each do |message| %>
<script>
$(function() {
Materialize.toast("<%= message %>", 3000);
});
</script>
<% end %>
<% end %>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<!--<label for="icon_prefix">SoW Type:</label>-->
<%= form.label :statement_type, 'Type:' %>
<%= form.text_field :statement_type, :id => "disabled", :value => (params[:statement_type]), readonly: true, :disabled => true %>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">contacts</i>
<%= form.label :name, "Name:" %>
<%= form.text_field :name, :id => 'required_field1' %>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">contacts</i>
<%= form.label :cost, "Cost:" %>
<%= form.text_field :cost, :id => 'required_field2' %>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">date_range</i>
<%= form.label :start_date, "Start Date" %>
<%= form.text_field :start_date, :class => 'datepicker', "data-provide" => 'datepicker', :id => 'required_field4', :placeholder => "YYYY-MM-DD" %>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">date_range</i>
<%= form.label :end_date, "End Date" %>
<%= form.text_field :end_date, :class => 'datepicker', "data-provide" => 'datepicker', :id => 'required_field5', :placeholder => "YYYY-MM-DD" %>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">perm_contact_calendar</i>
<%= form.collection_select(:client_id, current_user.clients.order(:name),:id,:name, :class => "browser-default", :prompt => "Choose a client" ) %>
</div>
</div>
<div class="row">
<div class="col s12">
<%= form.submit 'Submit', :class =>'btn btn-default', :id => 'register', :onclick => "testMe()"%>
</div>
</div>
<% end %>
</div>
<script type="text/javascript">
$(document).ready(function (){
$('select').material_select();
validate();
$('#required_field1, #required_field2').change(validate);
});
function testMe(){
console.log('hi')
}
function validate(){
if ($('#required_field1').val().length > 0 &&
$('#required_field2').val().length > 0
){
$("input[type=submit]").prop("disabled", false);
}
else {
$("input[type=submit]").prop("disabled", true);
}
}
var from_$input = $('#required_field4').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: true,
format: 'yyyy-mm-dd'
}),
from_picker = from_$input.pickadate('picker')
var to_$input = $('#required_field5').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
clear: 'Clear',
close: 'Ok',
closeOnSelect: true,
format: 'yyyy-mm-dd'
}),
to_picker = to_$input.pickadate('picker')
// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') ) {
to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') ) {
from_picker.set('max', to_picker.get('select'))
}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event) {
if ( event.select ) {
to_picker.set('min', from_picker.get('select'))
}
else if ( 'clear' in event ) {
to_picker.set('min', false)
}
})
to_picker.on('set', function(event) {
if ( event.select ) {
from_picker.set('max', to_picker.get('select'))
}
else if ( 'clear' in event ) {
from_picker.set('max', false)
}
})
</script>
I've tried commenting out all JS, switching it to a regular button, linting it and using Rubocop but I don't see anything off. I went through the HTML to make sure the button was inside the form, and it is.
This isn't the first form I've transitioned, but the first I'm having issues with.
(I assume only the view is relevant since it isn't getting to the controller at this point.)
Just to be safe - The view rendering the form is
<div class="row">
<div class="col s12"><span class="flow-text" style="text-align: center;"><h1>New <%= params[:statement_type] %></h1></span></div>
</div>
<% if params[:statement_type] == 'Proposal' %>
<%= render 'proposal_form' %>
<% elsif params[:statement_type] == 'Concept' %>
<%= render 'concept_form' %>
<% elsif params[:statement_type] == 'SoW' %>
<%= render 'sow_form' %>
<% elsif params[:statement_type] == 'Misc' %>
<%= render 'misc_form' %>
<% end %>
<%= link_to 'Back', statements_path %>
SoW + Proposal work. SoW doesn't.
My issue ended up not being HTML based, but Rails based in the end.
My static element that is populated by a param was causing the issue.
<%= f.text_field :statement_type, :id => "disabled", :value => (params[:statement_type]), readonly: true %>
By removing the id: disabled it resolved the inability for the Submit button to submit. Unfortunately, it also makes MaterializeCSS back to highlighting the field when I select it, but my issue was the Submit button not working.
In my rails view (am new to rails), I want to show a div when a check box is set to true.
How should I do that?
I thought of using
<%= check_box_tag 'advancedtagging', false %> Tag details
combined with:
<% if advancedtagging = '1' %>
<div class="row">
<%= render 'tags/advanced', :object => #annotation %>
</div>
<% end -%>
This is my view:
<div class="row">
<div class="col-md-4">
<div data-spy="affix">
<%= link_to 'Close', annotation_path(#annotation), :class => "btn btn-link" %>
<%= link_to 'List' , annotations_path, :class => "btn btn-link" %>
<%= check_box_tag 'advancedtagging', false %> Tag details
<%= render 'tags/form', :object => #annotation %>
<br>
<div class="panel panel-default" id="annotationResults">
<%= render 'tags/tag_list', :object => #annotation %>
</div>
</div>
</div>
<div class="col-md-8" id="file">
<%= content_tag :iframe, nil, src: pdf_annotation_path(#annotation), width: "100%", height: "875px", frameBorder: "0" %>
</div>
</div>
<% if advancedtagging = '1' %>
<div class="row">
<%= render 'tags/advanced', :object => #annotation %>
</div>
<% end -%>
Put an id to your div and your checkbox
<div id="mydiv" class="row">
<%= render 'tags/advanced', :object => #annotation %>
</div>
Using Jquery
$(function() {
$('#mycheckbox').click(function(event){
event.preventDefault();
$('div#mydiv').toggle();
});
});
Add your CSS file div.hidden { display: none; }
Using pure js
Add in some js file for example application.js or other you want
$(function() {
var mycheckbox = document.getElementById('mycheckbox');
var mydiv = document.getElementById('mydiv');
var toggleDiv = function(){
if(mycheckbox.checked) {
mydiv.style['display'] = 'block';
} else {
mydiv.style['display'] = 'none';
}
}
mycheckbox.onclick = toggleDiv;
toggleDiv();
});
Here is what happens
Here is my views code
Form
<%= simple_form_for([:supplier, #fuel_price],remote: true, :html => {:class => 'form-vertical' }) do |f| %>
<%= f.simple_fields_for :fuel_products do |fuel_products_form| %>
<div class="field">
<%= render partial: 'fuel_products_fields', locals: {f: fuel_products_form} %>
</div>
<% end %>
<%= link_to_add_fields "Add more", f, :fuel_products %>
<div class="modal-footer">
<%= f.button :submit, "Update", class: "btn btn-success"%>
</div>
<%end%>
Fuel Products Field Partial
<div class="col-md-6">
<%= f.input :fuel, label: "Fuel Type", :collection => fuel_types, class: "form-control select",:selected => "87 RFG" %>
</div>
<div class="col-md-3">
<%= f.input :price, class: "form-control", placeholder: "$1.25" %>
</div>
<%= f.hidden_field :_destroy %>
<ul class="list-unstyled">
<li><%= link_to '#', class: "btn btn-danger btn-xs remove_fields" do %>
Remove
<%end%></li>
</ul>
Javascript code
ready = ->
$('#FuelmodelBody').on 'click', '.remove_fields', (event) ->
$(this).prev('input[type=hidden]').val('1')
$(this).closest('.field').hide()
event.preventDefault()
$('#FuelmodelBody').on 'click', '.add_fields', (event) ->
console.log('It is really happening ....')
time = new Date().getTime()
regexp = new RegExp($(this).data('id'), 'g')
$(this).before($(this).data('fields').replace(regexp, time))
event.preventDefault()
$(document).ready(ready)
$(document).on('page:load', ready)
Views Modal code
<div class="modal inmodal" id="newFuelPrice" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<i class="fa fa-usd modal-icon" style="color:#1ab394"></i>
<h4 class="modal-title">Add New Fuel Price</h4>
<span class="font-bold">Your contacts will get text message of your latest price</span>
</br>
<span class="font-bold">As (your fuel price + the formula).</span>
</div>
<div class="modal-body" id="FuelmodelBody">
<!-- form -->
</div>
</div>
</div>
</div>
I also have a helper function for link_to_add_fields
def link_to_add_fields(name, f, association)
# creates a new instance of the 'has_many' object
new_object = f.object.send(association).klass.new
# new_object = f.object.association.klass.new
# f.object.association.klass # => Document
# new_object = f.object.documents.build Document(user_id: f.object.id)
# gets the object id
id = new_object.object_id
# creates a new form for the association
fields = f.fields_for(association, new_object, child_index: id) do |builder|
render(association.to_s + '_fields', f: builder)
end
link_to(name, '#', class: 'add_fields', data: { id: id, fields: fields.delete("\n") })
end
Moving around code since morning and still could not figure out how to fix those buttons by aligning side by add, the add more will also be button in blue, i was just playing around and converted it to link. I am Using simple Form
If you want to align your "Remove" buttons with their corresponding Fuel type and Price fields, then you need to put them all in a single Bootstrap row like so:
<div class="row">
<div class="col-md-6">
<%= f.input :fuel, label: "Fuel Type", :collection => fuel_types, class: "form-control select",:selected => "87 RFG" %>
</div>
<div class="col-md-3">
<%= f.input :price, class: "form-control", placeholder: "$1.25" %>
</div>
<div class="col-md-3">
<%= f.hidden_field :_destroy %>
<ul class="list-unstyled">
<li><%= link_to '#', class: "btn btn-danger btn-xs remove_fields" do %>
Remove
<%end%></li>
</ul>
</div>
</div>
Also, you probably don't need that extra ul tag. It does not carry any additional meaning, since you have just one button in there. It is not a list.
<div class="row">
<div class="col-md-6">
<%= f.input :fuel, label: "Fuel Type", :collection => fuel_types, class: "form-control select",:selected => "87 RFG" %>
</div>
<div class="col-md-3">
<%= f.input :price, class: "form-control", placeholder: "$1.25" %>
</div>
<div class="col-md-3">
<%= f.hidden_field :_destroy %>
<%= link_to 'Remove', '#', class: "btn btn-danger btn-xs remove_fields" %>
</div>
</div>
I'm working on an assignment for a course I'm doing on refactoring some version of the typo blog. I need to add a new form to a page in order to get some information, the problem is that the submit button is not responding and the form is also badly alligned. http://i.imgur.com/5HKMG0L.png
I don't have a good understanding of front-end, so this app is quite confusing for me but this is the way the page is rendered:
**first view that gets called:**
<% #page_heading = _('New article') %>
<%= render "admin/shared/edit", { :form_type => "article", :form_action => { :action => "new", :id => #article.id , :class => ('autosave')} } %>
**admin/shared/edit:**
<% className = form_action.delete(:class) %>
<%= form_tag(form_action, :id => "#{form_type}_form", :enctype => "multipart/form-data", :class => className) do %>
<%= render :partial => "form" %>
<% end %>
[CODE I ADDED TO CREATE A NEW FORM]
***<h3> Merge Articles </h3>
<div class='clearfix'>
<%= form_tag(categories_path, :class => className) do %>
<%= label :article, :merge_with, 'Article ID' %>
<%= text_field :merge_with , '', {:class => 'span1'}%>
<% end %>
<%= submit_tag 'Merge' %>
</div>***
**_form.html.erb:**
<input type="hidden" name="current_editor" id="current_editor" value="<%= current_user.editor %>" />
<input type="hidden" name="user_textfilter" id="user_textfilter" value="<%= current_user.text_filter_name %>" />
<div id="autosave"></div>
<div id="article_keywords_auto_complete" class="auto_complete"></div>
<%= error_messages_for 'article' %>
<div class='editor-right'>
<div class='well'>
<h4><%= _("Publish settings") %></h4>
<div class='actions'>
<%= link_to_destroy_with_profiles(#article) unless #article.id.nil? or #article.state.to_s.downcase == 'draft' %>
<span id='destroy_link'><%= link_to_destroy_draft #article %></span>
<span id='preview_link'><%= link_to(_("Preview"), {:controller => '/articles', :action => 'preview', :id => #article.id}, {:target => 'new', :class => 'btn info'}) if #article.id %></span>
</div>
<div class='clearfix'>
<%= _("Status:") %> <strong><%= #article.state.to_s.downcase %></strong> Change
<ul class='inputs-list'>
<li id='status' style='display: none;'>
<label for="article_published">
<%= check_box 'article', 'published' %>
<%= _("Published") %>
</label>
</li>
</ul>
</div>
<div class='clearfix'>
Comments are <strong>enabled</strong> and trackbacks are <strong>disabled</strong> Change
<ul class='inputs-list' id='conversation' style='display: none'>
<li>
<label for="article_allow_pings">
<%= check_box 'article', 'allow_pings' %>
<%= _("Allow trackbacks") %>
</label>
</li>
<li>
<label for="article_allow_comments">
<%= check_box 'article', 'allow_comments' %>
<%= _("Allow comments") %>
</label>
</li>
</ul>
</div>
<div class='clearfix'>
<%= _("Publish <strong>now</strong>") %> Change
<ul class='inputs-list'>
<li id='publish' style='display: none;'>
<%= calendar_date_select 'article', 'published_at', {:class => 'span3'} %>
</li>
</ul>
</div>
<div class='clearfix'>
<%= _("Visibility:") %> <strong>public</strong> Change
<ul class='inputs-list' id='visibility' style='display: none'>
<li>
<label for="article_password"><%= _("Password:") %>
<%= password_field :article, :password, :class => 'span3' %>
</label>
</li>
</ul>
</div>
<div class='clearfix'>
<%= _("Permalink:") %> Change
<ul class='inputs-list' id='permalink' style='display: none'>
<li>
<%= text_field 'article', 'permalink', {:class => 'span4'} %>
</li>
</ul>
</div>
<div class='clearfix'>
<%= _("Article filter") %>: <strong><%= #article.text_filter.description %></strong> Change
<ul id='text_filter' class='inputs-list' style='display: none'>
<li>
<select name="article[text_filter]" id="text_filter">
<%= options_for_select text_filter_options, #article.text_filter %>
</select>
</li>
</ul>
</div>
<div class='actions'>
<input id='save_draft' type="submit" value="<%= _('Save as draft') %>" name="article[draft]" class='btn info' />
<%= save( _("Publish")) %>
</div>
</div>
<div class='well'>
<h4><%= _("Categories") %></h4>
<%= render 'categories' %>
</div>
<%= get_post_types %>
</div>
<div class='editor-left'>
<div>
<div>
<%= text_field 'article', 'title', :class => 'span1', :style => ' width: 99%', :placeholder => _('Title') %>
</div>
<%= render('images', { :images => #images}) unless #images.empty? %>
<div id='editor-menu'>
<ul class="tabs">
<li id="f" class='<%= "active" if current_user.editor == 'visual' %>'>
<%= build_editor_link("Visual", 'insert_editor', 'fck', 'visual_editor', 'visual') %>
</li>
<li id="s" class='<%= "active" if current_user.editor == 'simple' %> '>
<%= build_editor_link("HTML", 'insert_editor', 'simple', 'simple_editor', 'simple') %>
</li>
</ul>
</div>
<div id="editor">
<div id='quicktags' style='<%= "display: none;" if current_user.editor == 'visual' %>'>
<script type="text/javascript">edToolbar('article_body_and_extended');</script>
</div>
<div id ='visual_editor' <%= "style='display: none;'" if current_user.editor == 'simple'%> >
<%= ckeditor_textarea('article', 'body_and_extended', {:class => 'large', :height => '300px', :rows => '20'}) if current_user.editor == 'visual' %>
</div>
<div id='simple_editor' class='input_text' <%= "style='display: none;'" if current_user.editor == 'visual'%> >
<%= text_area('article', 'body_and_extended', {:class => 'large', :height => '300px', :rows => '20'}) if current_user.editor == 'simple' %>
<%= render_macros(#macros) if current_user.editor == 'simple' %>
</div>
</div>
<h4><%= _("Tags") %></h4>
<div class='class'>
<%= text_field 'article', 'keywords', {:autocomplete => 'off', :style => 'width: 100%'} %>
</div>
<%= auto_complete_field 'article_keywords', { :url => { :action => "auto_complete_for_article_keywords"}, :tokens => ','}%>
</div>
<div class='separator'>
<h4><%= _("Excerpt") %></h4>
<div class=''>
<%= text_area 'article', 'excerpt', {:height => '150', :style => 'width: 100%', :rows => '5'} %>
<span class='help-block'><%=_("Excerpts are posts summaries that are shown on your blog homepage only but won’t appear on the post itself") %></span>
</div>
</div>
<div class=''>
<h4><%= _("Uploads") %></h4>
<p class='help-block'>Uploads will be displayed as attachments in your RSS feed, but won't appear in your articles.</p>
<ul id='attachments' class='inputs-list'>
<%= render 'admin/content/attachment', { :attachment_num => 1, :hidden => false } -%>
</ul>
</div>
</div>
</div>
Any help would be really appreciated. Thanks.
You need to use CSS to align your form to the left. The best way to do this is going into app/assets/articles.css (or any of your CSS files) and adding this line:
.left { text-align: left; }
Then go back into your views and assign anything you want to align to the left the "left" class, for example in your form you can wrap the relevant portions in a div to make everything align left:
<div class="left">
<%= form_tag(categories_path, :class => className) do %>
<%= label :article, :merge_with, 'Article ID' %>
<%= text_field :merge_with , '', {:class => 'span1'}%>
<% end %>
<%= submit_tag 'Merge' %>
</div>