Using Dot Leaders for a food menu with flex *follow-up

Question

This is a follow-up from: Using dot leaders for a food menu with bootstrap grids

I'm creating a food menu using the grid column system with bootstrap 3, and I've created dot leaders between the menu item and the price. Thanks to user LGSon I'm using

display:flex;

Which is doing the trick, however now the word margin seems to be cutting off the dot leaders differently depending on how many words there are. One word there is no cut off, after that there seems to be around 10px (These are approximated, and not exact). My goal is to make the dot leaders completely uniform and even. Here's what the image:

Here's my code. My apologies if it's too long, I tried to keep it brief. If anyone could help I would appreciate it.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class=" col-xs-6 ">
       <p class="item dots">Cheese</p>
       <p class="item dots">White</p>
       <p class="item dots">Special</p>
       <p class="item dots">Whole Wheat</p>
       <p class="item dots">Silician</p>
       <p class="item dots">Silician Special</p>
       <p class="item dots">Chicago Style</p>
     </div>
     <div class="col-xs-2">
       <p class="item">$8.99</p>
       <p class="item">$9.99</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>       
     </div>
     <div class="col-xs-2">
       <p class="item">$11.99</p>
       <p class="item">$12.99</p>
       <p class="item">$15.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>     
     </div>
     <div class="col-xs-2">
       <p class="item">$12.99</p>
       <p class="item">$13.99</p>
       <p class="item">$17.99</p>
       <p class="item">$13.99</p>
       <p class="item">$15.99</p>
       <p class="item">$20.00</p>
       <p class="item">$14.99</p>      
     </div>
  </div>
</div>

<style> 
.dots {
  display: flex;
}

.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .       . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}
</style>

<!-- Matches Height in between divs--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js">

$(function() {
   $('.item').matchHeight(false);

   //Make links '.active' in Handlebars
   var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
         return this.href == url;
    }).parent().addClass('active');
});
</script>

Ok, thanks for redirecting me that worked. – Coffeeteer Apr 04 '17 at 18:05 — Coffeeteer, Apr 04 '17 at 18:05

score 1 · Answer 1 · answered Apr 03 '17 at 02:55

One way would be to use a pseudo element to draw the dots instead, wrap your text in an element that gives it a background color that matches the page background, and position the dots underneath that element with the background color.

.dots {
  display: flex;
  position: relative;
}

.dots span {
  background: white;
  padding: 0 15px 0 0;
}

.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: "";
  border-bottom: 1px dotted black;
  position: absolute;
  bottom: 5px;
  left: 0; right: 0;
  z-index: -1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-xs-6 ">
      <p class="item dots"><span>Cheese</span></p>
      <p class="item dots"><span>White</span></p>
      <p class="item dots"><span>Special</span></p>
      <p class="item dots"><span>Whole Wheat</span></p>
      <p class="item dots"><span>Silician</span></p>
      <p class="item dots"><span>Silician Special</span></p>
      <p class="item dots"><span>Chicago Style</span></p>
    </div>
    <div class="col-xs-2">
      <p class="item">$8.99</p>
      <p class="item">$9.99</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item">$11.99</p>
      <p class="item">$12.99</p>
      <p class="item">$15.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
    </div>
    <div class="col-xs-2">
      <p class="item">$12.99</p>
      <p class="item">$13.99</p>
      <p class="item">$17.99</p>
      <p class="item">$13.99</p>
      <p class="item">$15.99</p>
      <p class="item">$20.00</p>
      <p class="item">$14.99</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Apr 03 '17 at 05:52

Simply add white-space: nowrap to the dots rule

$(function() {
   $('.item').matchHeight(false);

   //Make links '.active' in Handlebars
   var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
         return this.href == url;
    }).parent().addClass('active');
});

.dots {
  display: flex;
  white-space: nowrap;
}

.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .       . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class=" col-xs-6 ">
       <p class="item dots">Cheese</p>
       <p class="item dots">White</p>
       <p class="item dots">Special</p>
       <p class="item dots">Whole Wheat</p>
       <p class="item dots">Silician</p>
       <p class="item dots">Silician Special</p>
       <p class="item dots">Chicago Style</p>
     </div>
     <div class="col-xs-2">
       <p class="item">$8.99</p>
       <p class="item">$9.99</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>       
     </div>
     <div class="col-xs-2">
       <p class="item">$11.99</p>
       <p class="item">$12.99</p>
       <p class="item">$15.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>     
     </div>
     <div class="col-xs-2">
       <p class="item">$12.99</p>
       <p class="item">$13.99</p>
       <p class="item">$17.99</p>
       <p class="item">$13.99</p>
       <p class="item">$15.99</p>
       <p class="item">$20.00</p>
       <p class="item">$14.99</p>      
     </div>
  </div>
</div>

<!-- Matches Height in between divs--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

Using Dot Leaders for a food menu with flex *follow-up

2 Answers2

Linked