Significant empty space to the left of content due to Zurb Foundation

I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons.

However, I am facing a significant gap on the left side of my content, causing the right side of the table to extend off-screen and necessitating horizontal scrolling to view the content. The code I am working with is relatively straightforward. I create a twelve-column row multiple times.

For example:

<div class="row">
  <div class="twelve columns">
    <h1>Customers</h1>
  </div>
</div>

You can reference a screenshot of the issue here. It's evident that there is an abundance of white space to the left of the table, causing it to exceed the right edge:

I am confident that I am making a simple mistake somewhere, but I haven't been able to identify it yet. This marks my initial experience using Foundation - typically, I work with Bootstrap, but decided to explore something new for this particular project.

Update:

Full HTML:

   <div class="row">
  <div class="twelve columns">
    <h1>Customers</h1>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <%= form_tag customers_path, :method => 'get' do %>
      <p>
        <%= text_field_tag :search, params[:search], :placeholder => "Enter last name..." %>
        <%= submit_tag "Search", :name => nil, :class => 'button small' %>
      </p>
    <% end %>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>License #</th>
          <th>Date of birth</th>
          <th>Emergency Contact Name</th>
          <th>Emergency Contact #</th>
          <th>Address</th>
          <th>City</th>
          <th>Registration Date</th>
          <th>Parent/Guardian?</th>
          <th>Guardian Tel Number</th>
          <th>Guardian License #</th>
          <th>Participant Signature</th>
          <th>Guardian Signature</th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <% @customers.each do |customer| %>
          <tr>
            <td><%= customer.firstName %></td>
            <td><%= customer.last_name %></td>
            <td><%= customer.licenseNum %></td>
            <td><%= customer.dob %></td>
            <td><%= customer.contactName %></td>
            <td><%= customer.contactNum %></td>
            <td><%= customer.address %></td>
            <td><%= customer.city %></td>
            <td><%= customer.currentDate %></td>
            <td><%= customer.guardian %></td>
            <td><%= customer.guardianNum %></td>
            <td><%= customer.guardianLicenseNum %></td>
            <td><%= customer.participant_image_name %></td>
            <td><%- customer.guardian_image_name %></td>
            <td><%= link_to 'View', customer, :class => 'button secondary' %></td>
            <td><%= link_to 'Edit', edit_customer_path(customer), :class => 'button secondary' %></td>
            <td><%= link_to 'Delete', customer, method: :delete, data: { confirm: 'Are you sure you want to delete this customer? This cannot be undone.' }, :class => 'button alert' %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

<div class="row">
  <div class="twelve columns">
    <%= will_paginate @customers %>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <%= link_to 'New Customer', new_customer_path, class: "button success"%>
  </div>
</div>

Answer №1

Which iteration of Foundation do you have? If it's Foundation 4, the correct markup is as follows:

<div class="row">
  <div class="large-twelve small-twelve columns">
    <h1>Customers</h1>
  </div>
</div>

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

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

Stop the "float:right" div from taking up all available space

I encountered an issue while developing a reddit clone. Just to clarify, I'm using bootstrap v5.0 The problem arises when trying to position the sidebar on the right and the content on the left. The layout seems fine at first, but the content sectio ...

Styling conditionally with Dash Bootstrap using an IF statement

I am looking to implement a feature where text in a column is displayed in two different colors based on its value, using Dash bootstrap and various HTML components. For example, consider the following table: Value Yes No Yes Yes No The goal is to displa ...

What steps should I take to ensure this image automatically refreshes once it has been uploaded?

I have granted permission for administrative staff on our ASP.NET website to upload their profile pictures. The process is simple: just use basic file uploading controls: <img src="<%#ImageFile%>" border='0' width="150" alt="" height="1 ...

Obtaining the checkbox status from a location other than immediately following the input by CSS alone

I am currently designing a custom checkbox feature where clicking on the label text will toggle the state and display or hide certain text based on the checkbox state, all achieved solely through CSS. The HTML code I have written for this purpose is as fol ...

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Can anyone help me with coding to make a div appear on a website after a specific amount of time? Here's an example of what I'm trying to achieve: <div class="container"> <div class="secretpopout"> This is the hidden div that should ...

What is the best method for calculating income and expenses within a JavaScript expense tracker?

I'm facing an issue where I can't add the value of a checked radio button to an object in a different function. Even though there are no errors, nothing gets added. My project involves creating an expense tracker, and adding either income or exp ...

Navigate to the first item on the menu in the Chrome browser

Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox. <body> ...

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

I've encountered an issue with my HTML page that consists of several textareas. I have a function in place to dynamically add additional textareas using document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></text ...

"All my online spaces are chaotic and cluttered beyond belief, overflowing with content in high-definition

One issue that frequently arises for me when developing websites is related to media queries and resolution. I have utilized the following code using a max-width of 1920px: @media only screen and (max-width : 1920px) {} However, I am facing challenges in ...

Tips on adjusting the color of a link once it has been clicked?

Looking for a link with a specific style? a { color: #999; &:hover { color: #008da0; } &:visited { color: #999; } /* I added this to test if it's gonna fix it, but it didn't */ } Upon clicking the link, it turns blue and remains s ...

Troubleshooting: Issue with fixed positioning in React (Next.js) causing problems with modal window functionality

I'm currently working on implementing a modal window in React, but I've encountered an issue where setting position: fixed results in the modal window's position being relative to the page rather than the browser window. For privacy reasons, ...

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

What's the best way to refresh append() functionality within a modal? I'm currently working with NODE JS and AJAX and

Whenever I click the modal, the append() calls are adding HTML content. But if I try to use empty() or html(), the modal stops appearing altogether. What is the correct approach to creating this modal? function loadModalContent(id) { $('#myModal& ...

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

Utilize jquery and css to effectively stack images and control their positioning on hover

Is there a way to create a stack of images where the image behind moves to the front on mouseover, and the image in the front goes to the back? The top image would be full size, with each image below being slightly smaller and offset to the side for select ...

Obtaining the text content of a <div> element when clicked using Selenium

I am trying to extract the email address from the code snippet below, but I am unsure of how to do it. Any assistance would be greatly appreciated! <div class="taLnk hvrIE6 fl" onclick="ta.trackEventOnPage('Listing', 'Email', 774169 ...

Centering items in Material UI Grid

I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...

Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used: Windows NPM, Express MySQL This is the code in an ejs template called example.ejs <% if (message) { %> <p class="al ...

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...