CODEWITHSUNDEEP
htmlcss
AngryHacker
AngryHacker

Reputation: 61636

How to prevent items in the list from spilling into next column?

I have the following html list that I'd like to break into columns:

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <li>Placement on Company Offer Marketplace</li>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

And the class that breaks the list into columns:

.comparison-card-list {
  column-count: 3;
  column-gap: 20px;
}

If you look into my Codepen, at some widths (like 650px to 830px), few list items (Placement on Company Offer Marketplace, for example), spill over into the next column, rather than wrapping to the next line.

enter image description here

How do I force it to wrap to the next line, rather than spill into the next column?

P.S. Per assist from @Helenesh, this problem is only present in Firefox.

P.P.S. Per Firefox Bugzilla ticket 1525706, the spec states that browsers are allowed to break the content freely in whichever way they please, unless page-break-inside: avoid is specified.

Upvotes: 3

Views: 2145

Answers (3)

Jay
Jay

Reputation: 373

There is not problem that flexbox can't solve!

Try this:

https://codepen.io/cloudulus/pen/Nowdaa

.comparison-card-list {
  display: flex;
  justify-content: space-between;
}
.comparison-card-list > div
{
  display: flex;
  flex-direction: column;
  flex-basis: 33.3%;
}
.comparison-card-list > div > div
{
  display: list-item;
  list-style-position: inside;
}
<div class="comparison-card-list">
  <div>
    <div>Proferssional Photos</div>
    <div>Pricing Guidance</div>
    <div>divsting Descriptions</div>
    <div>Professional Signage</div>
  </div>
  <div>
    <div>Market Analysis</div>
    <div>MLS divsting</div>
    <div>Open House Coordination and Hosting</div>
    <div>Manage Showings</div>    
  </div>
  <div>
    <div>Placement on Company Offer Marketplace</div>
    <div>Negotiation Assistance, including assessing buyers and their quadivfications</div>
    <div>Requisite property disclosures</div>
  </div>
</div>

Upvotes: 2

Helenesh
Helenesh

Reputation: 4349

There is a CSS property to solve this issue. Use page-break-inside: avoid; on your li element. Using avoid will keep your columns from 'spilling out'.

.comparison-card-list > li {
  page-break-inside: avoid;
}

From CSS Tricks:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

Upvotes: 4

Cody Krecicki
Cody Krecicki

Reputation: 77

Here is a unconventional hack I'll probably be booed for. But if it works it works. Also, I could not recreate your problem. However this might fix it for you for whatever the crazy reason. You should probably test your page on another device before doing my dumb fix below.

Wrap a div and class around the field jumping to the other column. And adjust the 1% width until you get it fixed. Use the smart fix or the dumb fix.

***Smart Fix

 li{
    display: inline-block;
 }

***Dumb Fix

HTML

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <div class="fix"><li>Placement on Company Offer Marketplace</li></div>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

Style

.fix {
 width:1%;
}

Upvotes: 1

Related Questions