Guide on displaying a partial form as a horizontal form in Rails 4

I am facing an issue with displaying a form horizontally instead of vertically in a partial triggered by AJAX on my main page. I have tried various methods like using <form class="form-inline">,

<%=f.number_field :pointsSpend, :class => "checkbox inline"%>
with css display: inline, but none of them seem to work.

The main form where the partial is rendered:

<div class="row">
        <div class="col-md-12">
            <%= link_to image_tag("biceps.jpg"),'#', id: 'ChallengeButton', class: "btn btn-lg btn-primary" %>
            <div id="challengeCentre"></div>
        </div>
    </div>

The form:

<%= form_for(@challenge) do |f| %>

  <% if @challenge.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@challenge.errors.count, "error") %> prohibited this challenge from being saved:</h2>

      <ul>
      <% @challenge.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :pointsSpend %><br>
    <%= f.number_field :pointsSpend %>
  </div>
  <div class="field">
    <%= f.label :rules %><br>
    <%= f.text_area :rules %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

</form>

Answer №1

To utilize the form_for method in a class, you can do so by providing the class within the method like demonstrated below:

<%= form_for(@challenge, html: { class: 'form-inline' }) do |f| %>

  <% if @challenge.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@challenge.errors.count, "error") %> prohibited this challenge from being saved:</h2>

      <ul>
      <% @challenge.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :pointsSpend %><br>
    <%= f.number_field :pointsSpend %>
  </div>
  <div class="field">
    <%= f.label :rules %><br>
    <%= f.text_area :rules %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the condition is false, Angular 8's ngIf creates an empty element

Encountering an issue with Angular8 and ngIf: I have a piece of code that generates a div element loading images and their associated details onto a webpage from a JSON file based on a condition: HTML Code: <div class="row" > < ...

"Optimizing the Placement of jPlayer for Your Website

Struggling to properly position jPlayer on my webpage. After consulting jPlayer's documentation, I learned that it is supposed to be absolutely positioned by default. However, it seems to be flowing with the rest of the page content rather than being ...

Unable to load JQuery from a div element

My goal is to create a standard .html file containing the navigation, footer, and other elements that will be used across multiple pages for a small site I'm building. I want to keep it simple and avoid using php or other programming languages. I&apo ...

Identifying clicks on various indices within a common class or element

My website has a navigation menu with unordered list items in it. <nav> <ul> <li id="zero"></li> <li id="one"></li> <li id="two"></li> </ul> </nav> I am working on implementing J ...

Verify the tags associated with an element that has multiple tags

For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

How can I eliminate the time axis in FullCalendar's agenda view?

Is there a way for me to use multiple calendars and remove the time axis in the agenda view? I have tried using the axisFormat option to eliminate the numbers/content in that column, but I'm struggling to set the width to 0 or make any other adjustmen ...

What is the process for outputting JSON data from a script page?

I had a JSON file named results.json which is displayed below. Additionally, I had an HTML file containing some script that is used to retrieve data from this JSON file. Upon entering the HTML page, a script function get_machFollow(que_script) is called to ...

Toggle the disable state of a button depending on a specific condition

I have a scenario where I am fetching data from a server, and I need to apply a filter to a specific column. The requirement is that if the "bought" column (boolean) has a value of true, then the edit button should be disabled; otherwise, it should be enab ...

Issue with importing styles within a media query

I am having trouble importing a style that is based on a media query. When I try to import the styles, it doesn't seem to work. However, if I directly include the styles within the media query itself, they show up on the page. For reference, you can ...

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

I am facing an issue with a list of ion-cards that have clickable icons appearing when you hover over them. The problem is that due to the floating nature of the icons, they are not positioned correctly (as shown in the image below) and end up getting cove ...

Transferring a unique Python object back and forth between Jinja2 and Flask

As a newcomer to Flask, Jinja2, and HTML templates, I am working on understanding how to transfer data between the controller and views. Currently, I have a calendar of events where each event is a hyperlink that uses url_for to navigate to a view with add ...

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

Move the Material UI popover to the clicked icon's position

I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. https://i.sstatic.net/yvKjF.png Here is the code snippet that I have been using: {showPopOver &&a ...

Automatically trigger a PHP reload/refresh based on user input

My website has a form that populates a table with data. Currently, after the user submits the data, they have to manually refresh the page in order to see the new data displayed. Is there a way to automatically refresh the table every time the user hits ...

Retrieve the HTML contents of a cell that contains a checkbox with the value of "jquery"

Here is an example of a table row: <tr> <td><input type='checkbox' name='post[]' value="1"></td> <td>08-Apr-2014</td> <td>injj team</td> <td>merchant.testyy.com</ ...

Struggling with validating forms with JavaScript

I'm having trouble with the following JavaScript code: <script type="text/javascript"> function checkDetails(search) { var search = documment.getElementById('query'); if(search.value ==''||search.val ...

Master the art of directing your attention to a list element with ease using the tab function and jQuery

I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% ...

What is the best way to create 2 select boxes that will disable each other if they match, and then automatically choose the second option so they do not match

Is there a way to have 2 select boxes automatically change one option to the second option on one box when they match? Instead of using an "alert", I am looking for a function that can automatically update one option in one of the select boxes if they mat ...