Establish a foundation grid structure within the elements of the list

I'm facing an issue while trying to implement a numbered list, where each li contains a segment of the Foundation 5.5.3 grid.

The problem arises when there is unwanted space above the child grid columns within the li elements.

Example:

https://i.sstatic.net/W9tI6.png

Upon investigation, I discovered that this spacing issue is caused by a CSS rule in Foundation that applies 

content: " "; display: table;
on the ::before pseudo-element of the row.

https://i.sstatic.net/ghs7m.png

Attempting to override or remove this rule affects the row's spacing, leading to undesired results.

I have experimented with removing the row class from the li and using a child div.row, but the issue persists.

To summarize, I aim to create a two-column grid within each li of a numbered list (ol/ul), yet encounter vertical space at the top of each li. How can I eliminate this space, or should I consider an alternative strategy for achieving this grid structure within multiple lis?

Thank you.

Example:

li {
  background-color: #ddd;
  padding: 5px;
}

li + li {
  margin-top: 5px !important;
}

li > span {
  background-color: yellow;
}

/* Trying to override ::before and ::after on .row */
.row.psuedo-override::before, .row.psuedo-override::after {
  content: none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

<hr>

<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5>
    <ol>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

htmlcsslayoutzurb-foundation

Answer №1

Using Negative Margin Technique

To eliminate unnecessary space, a handy workaround involves applying a negative top margin to your content within <span> tags equal to the line-height value (which is typically the height of the pseudo-element generated by content: " ";):

li > span {
  margin-top: -1.6rem;
}

Keep in mind that this method works best when your line-height remains constant. If it changes due to responsive design, adjust the negative margin accordingly within your media query.

Adopting the Float Clearing Approach

Alternatively, you can remove pseudo elements using content: none !important;. However, with only floating content left within the <li> tag, you'll need to insert a clearing element at the end of each <li> tag content with a clear: both; rule applied, such as a <br>.

<br class="clear" />

.clear {
  clear: both;
}

The downside to this approach is that it requires modifying your markup and may affect the enumeration of your list items.

Answer №2

This bug has me scratching my head. After dissecting the HTML, here's a unique solution I've devised:

li {
  background-color: #ddd;
  padding: 5px;
}

li + li {
  margin-top: 5px !important;
}

li > span {
  background-color: yellow;
}
.row.collapse:before {
  display: block !important;
  height: .02px;
}

.row.collapse {
  padding: 0; /* Did you want padding? */
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

<hr>

<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5>
    <ol>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

According to W3C standards, even though it's a bit unconventional, my CSS checks out.
This issue continues to baffle me.

Answer №3

Utilizing CSS for custom list numbering:

1) Instead of removing the row class directly from the li element, consider placing a child div.row. This approach can help prevent conflicts between the default layouts of lists and rows.

2) Customize your list numbering using CSS counters rather than relying on the default <ol> numbers. With this method, you have more control over the positioning of the numbers.

ol {list-style-type:none; margin-left:0; padding-left:0;}
li {padding-left:2em; counter-increment:li;}
li::before {content:counter(li) "."; position:absolute; margin-left:-2em;}

Check out the Fiddle here: https://jsfiddle.net/9qw2akkj/

Answer №4

If you're facing an issue, simply apply this CSS code to resolve it...

.row .row.collapse::before, .row .row.collapse::after {
    display: block!important;
    height: 0;
}

Here is the complete code snippet for your reference :)

li {
  background-color: #ddd;
  padding: 5px;
}

li + li {
  margin-top: 5px !important;
}

li > span {
  background-color: yellow;
}

/* Overriding ::before and ::after on .row */
.row .row.collapse::before, .row .row.collapse::after {
    display: block!important;
    height: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5>
    <ol>
      <li class="row collapse">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

<hr>

<div class="row">
  <div class="small-12 columns">
    <h1>My List</h1>
    <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5>
    <ol>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span>
        <span class="small-3 columns text-right">$100</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span>
        <span class="small-3 columns text-right">$50</span>
      </li>
      <li class="row collapse psuedo-override">
        <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span>
        <span class="small-3 columns text-right">$75</span>
      </li>
    </ol>
  </div>
</div>

Expecting that to provide a solution :)

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

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...

cssdrop-down-menucenteringready

Python script executing on an empty canvas

I have an HTML page passing input values to a python script for processing. I want to display the results of the calculations simply on a plain white page with no formatting, just plain numbers. The issue is that despite successfully passing and processin ...

pythonhtml

Aligning SVG shapes within each other

I recently encountered a scenario where I needed to position SVG shapes in the center of each other with varying scales. For instance, placing a rectangle or triangle within the center of a circle. While I found some solutions that worked for shapes like ...

javascripthtmlcsssvg

Updating HTML select options based on the result of another select can be easily achieved by using JavaScript and

Hello, I'm reaching out on StackOverflow for the first time because I've hit a roadblock and can't seem to figure it out. My goal is to populate a second select dropdown (with id=libres) with the results of a query from my database. The con ...

javascriptphpjqueryhtmlajax

The properties of JavaFX in the CSS file are not recognized by Eclipse, showing an error message as "unknown property"

After installing Eclipse and downloading the OpenJFX SDK, I encountered an issue where Eclipse marked all -fx- properties in the .css file as warnings with the message "unknown property". Surprisingly, my JavaFX projects still compiled and ran smoothly, ...

javacsseclipsejavafxefxclipse

Is there a way to manually trigger a re-render of all React components on a page generated using array.map?

Within my parent component (Game), I am rendering child components (Card) from an array. Additionally, there is a Menu component that triggers a callback to Game in order to change its state. When switching levels (via a button click on the Menu), I want a ...

javascriptcssreactjs

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

pythoncssdjangopython-3.xstatic

Creating a custom tab bar using jQuery Mobile

I transferred a tab bar from one of my projects to jsfiddle, but the CSS was too complex to understand. So, I extracted useful code from the CSS and created my own version in this new fiddle. However, it looks exactly like the example. Now, I need to imple ...

javascriptjquerycssjquery-mobile

The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen. Using version 4.5 of jqGrid. The table is created as follows: // Table creation using jqGrid $('#shipTable').jqGrid({ data: tabl ...

jquerycssjqgrid

Rearrange the first division to the second division in a responsive manner

.box { display: block; width: 200px; height: 200px; padding: 20px; background: black; } .class1 { position: relative; color: red; } .class2 { position: relative; color: red; } <div class="box"> <div class="class1"> Th ...

javascripthtmlcssresponsive-designcss-position

Refreshing ng-model within a radio input

Currently, I am utilizing a jQuery library for radio/checkbox components. Although I am aware that combining jQuery with Angular is not ideal, the decision to use this particular library was out of my control and cannot be altered. One issue I have encount ...

javascriptjqueryhtmlangularjs

Changing the background color of a clicked checkbox can be done by using CSS

Currently, I am working on creating an exam page that features choices with checkboxes. My goal is to have the background of a selected choice change color. However, I am encountering some obstacles. To view the codes and screen, please click here Here i ...

javascripthtmlcssfrontend

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Looking to trigger a function only on the initial interaction with the DOM. Are there any vanilla JavaScript options available? I've brainstormed this approach. Is it on track? window.addEventListener("click", function onFirstTouch() { console.l ...

javascriptjqueryhtmlcss

5 Ways to Incorporate Font Awesome Icons into CSS Pseudo Elements

I'm attempting to incorporate FontAwesome icons into CSS pseudo elements. When I add the icon using HTML in the traditional manner, it works fine. However, I'm trying to integrate the fonts into a bootstrap accordion so that the icon changes whe ...

cssfont-awesomepseudo-element

The form submission button fails to function when the onsubmit function returns false

When submitting, I check two fields. If one of the two fields is checked, then I return true; otherwise, I return false. The issue I'm facing is that even when I check one of the checkboxes, the submit button does not seem to work (I use console.log() ...

javascripthtmljquery

What strategies can be implemented to stop the downloadthis button in a Quarto HTML report from suddenly moving to the top of the page when

My Quarto HTML report contains numerous download buttons, but each time I click on one, the browser automatically scrolls to the top of the screen. This issue occurs in both Chrome and Firefox. Is there a way to stop or prevent this behavior? For a comple ...

htmlrquarto

Jquery and Ajax failing to function properly with multiple dropdown selections

I've been working on creating a functionality to have multiple dropdown menus using Bootstrap, JQuery, and AJAX. The goal is to select multiple countries from these dropdowns and store the selected values in CSV format in my database. Initially, I had ...

phphtmlajax

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

What's the secret to achieving Apple's signature website font style?

Apple cleverly incorporates a font on its website that appears to have a white shadow, giving it an engraved or etched look. I've come across some techniques, but they seem quite limited. (By the way, a similar effect is utilized on this website as we ...

javascriptjqueryhtmlcsseffects

What advantages does Snap.svg offer compared to the HTML5 native SVG DOM API?

Can the differences between Snap.svg and HTML5 native SVG DOM API be compared to jQuery vs HTML5 native DOM? Apart from potential cross-browser disparities, assuming modern browsers support SVG well, what advantages does Snap.svg offer? What are the pros ...

htmldomsvgraphaelsnap.svg