Dot Leaders With Picture Background

January 31, 2023 Post a Comment

So I'm building a website for a restaurant and I'm in a pickle. I'm trying to create the menu there. The idea is to align the food name to the left, the price to the right and fill

Solution 1:

I am kinda late, but you can quite easily do it with a radial-gradient:

.col {
  display: inline-block;
  vertical-align: top;
}

.names span {
  width: 200px;
  display: flex;
}

.prices span {
  display: block;
  text-align:right;
}

.names span:after {
  content: "";
  display: inline-block;
  height: 1em;
  flex-grow: 1;
  background: radial-gradient(black 25%, transparent 25%) scroll repeat-x bottom left/5px 5px;
}

<div class='names col'>
  <span>Hamburger</span>
  <span>Hot Dogs</span>
  <span>Superman Hamburger</span>

</div>
<div class='prices col'>
  <span>$1.00</span>
  <span>$0.50</span>
  <span>$400.00</span>
</div>

JSFiddle Demo

Solution 2:

It's easy to do with some simple javascript and css, here's a fiddle: jsfiddle

The key is to set the width of the div that holds the dots to the width of the column minus the width of the food name minus the width of the price, and to make sure there are more than enough dots to cover the distance, and to set overflow: hidden for the dot div.

$(".menu-row").each(function(index, element) {
    var menuRowWidth = $(element).width();
    var foodItemWidth = $(element).children('.food-item').width();
    var priceWidth = $(element).children('.price').width();
    var $dotFiller = $(element).children('.dot-filler');
    var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
    $dotFiller.width(dotFillerWidth + "px"); 
});

Then float the item and dot div left, the price right, all within a set width column. It's also important that overflow: hidden is set for the dots, because when we set the width of that div in javascript we want all extra dots to just be cut off. The CSS:

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

Then structure your html as follows:

<div class="menu-row">
  <div class="food-item">Steak</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$18.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Hamburger</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$8.00</div>
</div>

Solution 3:

You can use a wrapper to set a fix width of your Name + Dots.

The css will look like this:

.wrapper {
  width: 300px;
  overflow: hidden;
  display: inline-block;;
  white-space: nowrap;
}

The HTML like this:

<div>
  <ul class="noDisc">
    <li>
      <div class="wrapper">
      <span>HAMBURGER </span>
      <span>...............................................................</span>
      </div>
      <span>$ 40.00</span>
    </li>
     <li>
      <div class="wrapper">
      <span>FRIED CHIKEN </span>
      <span>...............................................................</span>
      </div>
      <span>$ 13.00</span>
    </li>
     <li>
      <div class="wrapper">
      <span>STEAK ON A STICK </span>
      <span>...............................................................</span>
      </div>
      <span>$ 99.00</span>
    </li>
  </ul>
</div>

Live sample:

fiddle

Solution 4:

Use display:table; and display: table-cell; for the divs inside the list-elements and border-bottom: Xpx dotted black; for the dots.

ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: table;
  width: 100%;
}
ul li div {
  display: table-cell;
}
ul li div.food {
  padding-right: 5px;
}
ul li div.dots {
  border-bottom: 1px dotted #000;
  width: 100%;
  position: relative;
  top: -4px;
}
ul li div.price {
  padding-left: 5px;
}

<ul>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots">&nbsp;</div>
    <div class="price">10.00$</div>
  </li>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots"></div>
    <div class="price">10.00$</div>
  </li>
  <li>
    <div class="food">Spaghetti</div>
    <div class="dots"></div>
    <div class="price">10.00$</div>
  </li>
</ul>

Solution 5:

Thanks. I used what you had here and improved on it. This code is meant for woocommerce product items, but can be edited for whatever you need. $containerElement is the element you are measuring the width of.

/**
 * dotFiller
 * adds dynamic dot leaders between product title and count element (<mark>)
 * @return void
 */
var dotFiller = function(){
    var $containerElement = $('ul.products li.product.has-children h2'),
        df  = '<div class="df">.....................................................................</div>';
        $containerElement.each(function(i,el){
                var $el = $(el),
                    w   = $el.width(),
                    mw  = $el.find('mark').width(),
                    tw  = $el.find('span').width(),
                    dfw = (w - mw - tw) - 24;
                // if its not there, lets add it
                if (!$(el).has('.df').length){
                    $el.find('span').after(df);
                }
                $el.find('.df').css('width',dfw + "px");
        });
};
dotFiller();

With this code, you can update/ recalculate on resize like so :

$('window').on('resize',function(){ dotFiller(); });

And here is my css for the internal elements:

        mark {
            background-color: transparent;
            color: $secondary;
            display: inline-block; float: right;
            font-weight: normal;
        }
        div.df { 
            overflow: hidden; 
            display: inline-block; 
            margin-left: 10px; 
            position: relative; 
            top: 2px; 
            font-weight: normal; 
            opacity: 0.8; 
        }

I hope this helps someone!

Build Html5