Tips for arranging two columns side by side with the .each method in Rails

How can I modify the code to display two columns of data in a table row using the '.each' method? Currently, the code only displays one column per row.

<table>
  <% @lease.apartment.roommates.each do |roommate| %>
    <tr>
      <td colspan="5">
        <% unless roommate == @lease.second_occupant || roommate == @lease.user %>        
          <% if roommate.current_room.present? %>
            <p>
              <%= roommate.full_name %> - 
              <% if roommate.current_room.apartment == @lease.apartment%>
                <%= roommate.current_room&.label %> 
              <% end %>
              <br>Email:<%= roommate.email %><br>Phone:<%= roommate.phone %><br>
              <% if @lease.end_at.present? %>
                Lease End date (if applicable):<%= @lease.end_at %>
              <% end %>
            </p>
          <% end %>
        <% end %>
      </td>
      <td>Second Column Data</td>
    </tr>
  <% end %>
</table>

Answer №1

If you want to display two columns side by side, here is a way to achieve that:

<table>
<% @lease.apartment.roommates.each_with_index do |roommate, i| %>
  <% if (i+1)%2 == 1%>
  <tr>
  <% end %>
    <td colspan="5">
      <% unless roommate == @lease.second_occupant || roommate == @lease.user %>        
        <% if roommate.current_room.present? %>
          <p>
            <%= roommate.full_name %> - 
            <% if roommate.current_room.apartment == @lease.apartment%>
              <%= roommate.current_room&.label %> 
            <% end %>
            <br>Email:<%= roommate.email %><br>Phone:<%= roommate.phone %><br>
            <% if @lease.end_at.present? %>
              Lease End date (if applicable):<%= @lease.end_at %>
            <% end %>
          </p>
        <% end %>
      <% end %>
    </td>
  <% if (i+1)%2 == 0%>
  </tr>
  <% end %>

<% end %>

Answer №2

Hello, you can utilize the each_slice method as indicated in the suggestion by tadman

<table>
  <% @lease.apartment.roommates.each_slice(2) do |roommate_pair| %>
    <% roommate_pair.each do |roommate| %>
   
      <tr>
        <td colspan="5">
          <% unless roommate == @lease.second_occupant || roommate == @lease.user %>        
            <% if roommate.current_room.present? %>
              <p>
                <%= roommate.full_name %> - 
                <% if roommate.current_room.apartment == @lease.apartment%>
                  <%= roommate.current_room&.label %> 
                <% end %>

                <br>Email:<%= roommate.email %>
                <br>Phone:<%= roommate.phone %><be>
                <% if @lease.end_at.present? %>
                  Lease End date (if applicable):<%= @lease.end_at %>
                <% end %>
              </p>
          <% end %>
         <% end %>
        </td>
      </tr>
     <% end %>
   <% end %>
</table>

I trust this information will be valuable to you.

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

Make sure the text is always at the center and trim the sides, regardless of whether it is resized or viewed

Is it possible to automatically center text and crop the left/right sides when the viewport is resized smaller, ensuring it always stays centered on the screen even if it exceeds the size of the viewport? I'm considering using either CSS or jQuery / ...

Tips for properly aligning an image within a div using Bootstrap

My logo appears to be too large for the left side div of the navbar. The image extends beyond the boundaries of the div. I'm not sure what is causing this issue? index.js <div class="navbar-brand" > <img class="logo-Image ...

What are some creative ways to customize the appearance of a select tag's option element?

Is there a way to style the option elements in a select dropdown menu in Google Chrome without using JavaScript? I have tried setting styles with CSS, but it works in all browsers except IE9 and Chrome. option.red { background-color: #cc0000; f ...

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

Selenium with Python: A class focused on link text

Currently, I am encountering a challenge while using Python and Selenium to scrape content from a specific webpage. The issue lies in the presence of multiple div-classes with identical names but distinct content. My requirement is to extract information f ...

Next.js in combination with Tailwind CSS

While attempting to customize the styling for my Next.js 13 app, I encountered an error message that states: Syntax error: C:\Users\User\Documents\webdev\TicketingApp\ticketing-app\app\globals.css The text-default- ...

Pressing a button to alter the text color

While experimenting, I attempted to alter the text color of my HTML using JavaScript. After a few attempts, I came to the realization that I cannot change the color if I am already changing it in CSS. Does this mean CSS is executed at the end? Also, how ca ...

Div surrounded by divs

Describing it can be a bit tricky, so I created this sketch to help illustrate: https://i.sstatic.net/K8KOM.png I have two divs - an outer div and an inner div. My goal is to add a line between the two divs. Is there a way to achieve this and what would ...

What happens when the overflow-hidden property is overlooked due to a child element being assigned absolute positioning?

When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...

Modify the color of the dropdown menu that is currently in use

I am a beginner in using bootstrap and I'm struggling to customize the CSS to my preferences. One issue I encountered is with a dropdown menu in my header where I managed to change the colors successfully. However, when the dropdown menu is selected, ...

Discrepancy in image dimensions between Android and iOS

Currently, I am in the process of building a website and have encountered an issue with the display of images on Android and iOS phones. The image appears differently on an Android Galaxy J-5 compared to an iOS iPhone 6s screen. My goal is to make it look ...

Choose a div using jQuery and activate a hidden div

Seeking assistance in creating an interactive infobox that appears when hovering over a related image. Currently, the infobox pops out and flashes, but there is a problem where it shifts away from the image during the hover. I attempted to only display th ...

Issue with Bootstrap tab display of content

I'm having trouble with the tabs in my page. When I click on each tab, the content doesn't display correctly. Here is my code: <div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;"> <ul id="myTab" class="nav nav ...

Is there a potential bug when using .fadeOut() within a hidden element?

After examining the code provided: <div class='hotel_photo_select'> Hello </div> <div class='itsHidden' style='display:none'> <div class='hotel_photo_select'> Hello </ ...

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

I am facing an issue with a contact form where I have included a link to refresh a captcha code upon clicking. Additionally, there is jQuery code that ensures a div remains open by applying CSS styles to it. Both of these functionalities work independently ...

What's the reason Rails is not recognizing relative JavaScript files?

app/assets/javascripts/application.js: //= require jquery //= require jquery_ujs //= require_tree . //= require bootstrap.min app/assets/javascripts/economy.js: $(document).ready(function() { console.log("loaded file"); }); app/views/economy/index.ht ...

Switching component upon button click in ReactJS

After clicking the button, I want to change the component displayed on the screen. I have created a function called changeComp() within my component's class. However, when I click the button, it doesn't route to the wallet-connect component as ex ...

Exploring z-indices in event bubbling

JSFiddle: https://jsfiddle.net/uLap7yeq/19/ Issue Let's examine a scenario where there are two elements, canvas and div, positioned in the same location using CSS. The div has a higher z-index compared to the canvas, but how can we make sure events ...

The alignment of the Bootstrap form is incorrect

Seeking a solution for centering all form elements in the middle using Bootstrap. Attempts to adjust margin: 0 auto !important on the form-control class did not fully resolve padding/margin issues, especially with uneven spacing on input fields. Additional ...

How can you exhibit various images without relying on the <img> tag?

Is there a more efficient way to display over 500 images from a folder on an HTML page without the need to manually write out each img src tag? I have searched online for solutions, but most suggestions involve using PHP or "glob", which I am hesitant to ...