Connecting the dots between the price and the menu item

I am currently working on creating a menu with a list of dishes, and I need to include dots to separate the price from the description. I want it to look something like this: https://i.sstatic.net/h7PO4.png

If the description is too long, it should look like this: https://i.sstatic.net/PtmfD.png

Here is the code I am using:

<div className="container-fluid">
        {dishes
          .filter(dish => dish.category.id === props.category.id)
          .map(dish => (
            <div key={dish.id}>
              <div className="row">
                <h1 className="dish-title">{dish.name[state.lang]}</h1>
              </div>
              <div className="row">
                <div className="col px-0">
                  {dish.description[state.lang] && <div className="dish-desc m-0">{dish.description[state.lang]}</div>}
                </div>
                <div className="col-auto">
                  <DishSizes
                    sizes={dish.sizes}
                    containerClassName="d-flex flex-column"
                    priceClassName="dish-price px-1"
                  />
                </div>
              </div>
            </div>
          ))}
      </div>

I am retrieving data from my JSON file, specifically from the dishes section that renders all the dishes. The DishSizes component handles displaying the prices for each dish. Does anyone have any suggestions on how to achieve this?

Answer №1

You can achieve this effect by using a dotted border.

main {
  width: 35em;
}

h1 {
  font-size: inherit;
}

.sub {
  display: flex;
  align-items: flex-end;
}

.desc {
  flex: 1;
  border-bottom: 1px dotted black;
}

.desc span {
  position: relative;
  background: #fff;
  top: 5px;
}
<main>
  <h1>Club Sandwich with Extra Flavor</h1>
  <div class="sub">
    <div class="desc">
      <span>
      Spicy jalapeno bacon ipsum dolor amet ham hock chuck ribeye short ribs, biltong kevin kielbasa meatloaf shoulder corned beef spare ribs leberkas tenderloin.  &nbsp;<span></div>
    <div class="price">5 EUR</div>
  </div>
</>

Answer №2

.price-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2em;
}

.item-name {
  font-weight: bold;
  margin-right: 0px;
  text-align: left;
}

.price-separator {
  flex: 1;
  border-bottom: 2px dotted #999;
  margin: 0.6em 5px 0;
}

.item-price {
  font-weight: bold;
  text-align: right;
}
<div class="price-display">
  <span class="item-name">Product Name</span>
  <span class="price-separator"></span>
  <span class="item-price">$99.99</span>
</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

Using Alpine JS to rotate through images at regular intervals using the window.setInterval() method

Attempting to tackle a simple task using Alpine JS and the standard JS function setInterval. The goal is to create an image selector where images switch every second (1000ms). Here's what I have so far: <div x-data="imgFunc()"> ...

Engage with Vue.js and traditional JavaScript (plain) in your projects

Exploring the integration of Vue with regular JavaScript has presented a challenge. While some solutions online propose moving all functions to a Vue component, this approach proves impractical for complex or large functions. The task now is finding a way ...

Create fluidly changing pictures within varying div elements

Hello there! I have a form consisting of four divs, each representing a full page to be printed like the one shown here: https://i.sstatic.net/w7N6E.png I've successfully created all the controls using AJAX without any issues. Then, I load the image ...

Issue: Unable to find suitable routes for navigation. URL Segment: 'profile' or Encounter: Server could not load resource as response status is 401 (Unauthorized)

Currently, I am working on the MEANAUTH application and encountering an issue with accessing user profiles using angular jwt. When attempting to log in and access user profiles at https://localhost:3000/profile, I receive the following error message: Faile ...

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

Some websites are not displaying the CSS code for the inspector

In my experience, I have always relied on Firefox Inspector to troubleshoot CSS issues without any problems. However, when I attempted to analyze the CSS of a specific webpage (only encountering difficulties while logged in), I noticed that the inspector ...

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

Can you explain the contrast between img.height and img.style.height?

I'm currently in the process of resizing a series of images by iterating through an array and adjusting their sizes. if(items[0].height > 700 || items[0].width > 700){ items[0].style.height = "700px"; items[0].style.width = "700px"; } As ...

An error is being thrown by SetState when included within componentDidmount

I am currently learning React JS and have started working on a small application using it. I'm encountering an issue with the SetState method inside the componentDidMount lifecycle method. The scenario is that I have a parent/home component, which ca ...

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

Material-UI - TypeScript - Autocomplete utilizing getOptionLabel and renderOption for optimized selection functionality

I am attempting to showcase member and company using MUI Autocomplete. I have an array called suggestion that contains the options to display. [ { "__typename": "Member", "id": "ckwa91sfy0sd241b4l8rek ...

Updating is not happening with ng-repeat trackBy in the case of one-time binding

In an attempt to reduce the number of watchers in my AngularJS application, I am using both "track by" in ngRepeat and one-time bindings. For instance: Here is an example of my view: <div ng-repeat="item in items track by trackingId(item)"> {{ : ...

The migration-mongo module is not being recognized as a standard CommonJS module

I have integrated a nodejs server component into my project, which includes the usage of migrate-mongo. In my package.json file, the type specified is module. However, when attempting to run the migration process, I encounter the following error: > migr ...

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

The deconstructed state does not get refreshed within the setState callback

Encountering an issue where breaking down a component's state is causing it to not update within setState: state = { value: 'test', values: ['a', 'b', 'c'], }; ... const { value, values } = this.state; ...

Choosing a CSS Grid layout

New to web development, I have a design dilemma. Working on a game that teaches students how to multiply, I am unsure about the best way to display the multiplication process. This picture illustrates my issue: https://i.sstatic.net/F8ZGs.png Given that I ...

Move to the top of the page when the next action is activated

I am working with an Angular 8 application. Within the application, I have implemented navigation buttons for next and previous actions. My goal is to ensure that when a user clicks on the "next" button, the subsequent page starts at the top of the page ...

The "maxfilesexceeded" event in dropzone.js does not seem to be triggered when adding files programmatically

In my Vue.js project, I am using dropzone with the maxFiles: 1 option set. To display an existing file from the server in dropzone, I have added the following code: let mockFile = { name: 'Filename', size: file.size }; myDropzone.emit('added ...

The Crimson Thread when incorporating tsx into Next.js

https://i.sstatic.net/zXvPT.png While working with TSX in React and TypeScript, I encountered an issue. A red line appeared on the screen even though the project runs successfully. Can anyone explain why this red line is appearing and why the classes in T ...

The Art of Cascading Style Sheets Scrolling Alignment

Hello seasoned developers, I'm diving into the world of web design. I have a question about the code below. The yellow container scrolls under the nav bar as expected, but the red container scrolls above it. Can anyone provide some guidance? view ima ...