Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success.

My goal is to achieve a result similar to the image shown here: enter image description here

Here is the code snippet I've been using:

<BagContainer>
  <Bag src={bag} hideIcons={hideIcons} title="bag" onClick={openCart}/>
  <Number>5</Number>
</BagContainer>

export const BagContainer=styled.div`
    position: relative;
    width: fit-content;
`
export const Bag= styled.img<{hideIcons:boolean}>`
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.8rem;
    display: ${(icon) => icon.hideIcons ? 'none' : 'inline'}

`;


export const Number=styled.span`


`
htmlcssreactjsiconsstyled-components

Answer №1

export const ItemBox = styled.div<{showIcons:boolean}>`
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  display: ${(icon) => icon.showIcons ? 'block' : 'none'}
  position: relative;
`;

export const Quantity = styled.span`
  position: absolute;
  right: 0;
  top: 0;
  transform: translate3d(50%, -50%, 0);
`;

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

Adjust the vertical alignment of an HTML element

I've been trying to make an image move using the variable counter, but for some reason, it's not working. If I set document.getElementById("movee").style.top directly to a number, it works fine. Combining it with the counter variable should theor ...

javascripthtml

Creating personalized HTML logs

My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...

c#html.netvisual-studio-2012coded-ui-tests

Creating a PDF from slides using tools like mkd2pdf or wkhtmltopdf has never been easier. This

I am exploring the possibility of creating PDF files using mkd2pdf, a tool based on wkhtmltopdf. Mkd2pdf has the ability to generate PDFs from markdown content and utilizes a CSS file for styling purposes. For example: h1 { page-break-before: always; } ...

cssmarkdownwkhtmltopdf

Adjust the svg rate using jQuery or JavaScript

Seeking help with a gauge I found on CodePen - struggling to adjust bubble values... <path id="Fill-13" fill="#F8B50F" d="M3.7 88.532h26.535v-#.795H3.7z"/> Can change the bars in JS, but not the bubbles using jq/js. Adjust the gauge with values be ...

javascriptjqueryhtmlcsssvg

Error persisting unique key property despite implementation of unique key in table row

I'm having trouble resolving this issue. I've assigned a unique ID, but React is still showing error messages. I attempted to address it with each element individually, but then the problem of duplicates arises. <table> ...

reactjs

"Upon choosing a file using the HTML input file multiple element, a triggered event

After selecting multiple files using the input type="file" HTML element, I am eager to start uploading them. Can you tell me which event I should use to execute code immediately after finalizing my file selection? This is what my HTML code looks like: &l ...

javascriptjqueryhtmldom-events

Alternative Options for Playing Audio in Internet Explorer 8

I'm in the process of setting up a button that can both play and pause audio with a simple click. While this functionality is working smoothly in modern browsers like Google Chrome, I am facing compatibility issues with IE 8. Even after attempting to ...

javascriptjqueryhtmlaudiointernet-explorer-8

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

javascriptreactjsmongodbnext.js

Updating the content with HTML and JavaScript

Hello everyone, I am currently working on a project to change the content of a div using JavaScript for educational purposes. Here is what I have done so far - <div id="navbar"> ... <ul> <li> <text onclick="getWordProcessing() ...

javascripthtmlonclick

Application experiencing server error when updating MongoDB data

I have encountered an issue while trying to update/modify data that has already been uploaded in a reactjs project using mongoDB as the database. Whenever I attempt to update the data, an error is displayed. How can this problem be resolved? https://i.sta ...

javascriptreactjsmongodbmaterial-ui

Maximizing the Potential of Bootstrap 5's Grid System

I'm struggling a bit with the Bootstrap grid system. I want to create 6 divs or containers that span the full width on smaller devices like mobiles, use 25% of the width on medium devices like tablets, and display all 6 in a single row on large deskto ...

csstwitter-bootstrap

The issue of not being able to type in the sweetalert 2 input within a material UI modal in a

Within a card displaying an order, there is a sweetalert2 popup that opens when trying to cancel the order, asking for a cancellation reason. This feature works seamlessly on the orders screen. <Grid item md={8} sm={12}> orders.map((order) => ...

cssreactjsmaterial-uisweetalertsweetalert2

"Pairing div/span elements with sprites for improved web

I've been updating my website by replacing most inline images with sprites. Here's a basic CSS code snippet for the sprite class: .sprite{ background-image:url(...); background-position:...; width: 16px; height:16px; } After learning that nest ...

csshtml

Is there a way to use WithStyles<typeof styles> within Material UI?

import { WithStyles, createStyles } from '@material-ui/core'; const styles = (theme: Theme) => createStyles({ root: { /* ... */ }, paper: { /* ... */ }, button: { /* ... */ }, }); interface Props extends WithStyles<typeof styles> ...

reactjstypescriptmaterial-uitypescript-typings

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Having trouble with a basic PHP/SQL search bar for my database. The search results are not showing up even though the search bar appears on the page. When I type something, it doesn't reflect in the URL. Below is the code snippet. I am connecting to t ...

phphtmlmysqlmysqli

I'm getting a CORS policy error in my browser. It's saying that there is no 'Access-Control-Allow-Origin' header present on the requested resource

I tried installing cors via npm and using the app.use(cors()); middleware, but unfortunately it did not resolve my issue. My frontend React App is running on Port localhost:3000. Access to the XMLHttpRequest at 'http://localhost:3087/authenticate-toke ...

node.jsreactjsmongodbexpresscors

HTML - Table Layout Overlap

I'm struggling with a table layout issue in HTML and could use some assistance. The table below is displaying as overlapping in IE (please refer to the image), but it appears correctly in FF. Can anyone offer some guidance? <div> <table> ...

htmlcss

React modal not triggered on click event

As a newcomer to react, I am exploring a modal component import React, { useState, useEffect } from 'react'; import { Modal, Button } from "react-bootstrap"; function TaskModal(props) { return ( <Modal show={pro ...

javascriptreactjsreact-hooksreact-bootstrap

Using Vue and vue-multiselect to create interactive options based on the selected language

I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...

javascripthtmlvue.jsvuejs2vue-multiselect