What is the method for ensuring that a badge is consistently in a circular shape?

My notification badge can change shape depending on the number inside it - sometimes it's a circle and other times an oval. Is there a way to ensure that it always appears as a circle? I am utilizing materialize CSS with the following HTML/CSS code:

.notification-badge {
  position: relative;
  /*right: -12px;
  top: -84px;*/
  color: #ffffff;
  background-color: #FF4081;
  // margin: 0 -.8em;
  border-radius: 50%;
  padding: 4px 5px;
  font-family: "Roboto";
}

.notification-icon--fixed {
  max-height: 60px;
  width: 60px;
}
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">22</small>
      </i>
  </div>
</a>

Take a look at the image showing my current outcome here: https://i.sstatic.net/D0ETZ.png

jqueryhtmlcss

Answer №1

You can achieve this using only CSS.

Below is a simple demonstration on how you can utilize flexbox and padding techniques to ensure that the height of an element always matches its width. I have streamlined the code for clarity, but it should work with minor adjustments.

.notification-icon--fixed {
  position: relative;
  color: #fff;
  background-color: #FF4081;
  border-radius: 50%;
  font-family: "Roboto";
  
  /* Alignment */
  line-height: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  
  /* Adjust as required: */
  padding: 10px;
}

/* Height = width */
.notification-icon--fixed::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
<a class="notification-icon--fixed">
  <small class="notification-badge">1</small>
</a>

<a class="notification-icon--fixed">
  <small class="notification-badge">12</small>
</a>

<a class="notification-icon--fixed">
  <small class="notification-badge">1500</small>
</a>

The key technique here is to use padding-bottom: 100% on the ::after pseudo-element along with display: inline-flex for alignment.

Answer №2

A fixed width needs to be set on .notification-badge, equal to its height.

.notification-badge {
  width: 13px;
}

To determine the correct value, inspect the element and get its height in px. Keep in mind that if box-sizing is set to border-box, padding and border values are included in the total width and height. Considering different vertical and horizontal padding values, it's advisable to set the width slightly lower by 2px than the height. To center the text inside the now fixed width element, you can utilize flexbox:

.notification-badge {
  width: 13px; /* adjust based on desired dimensions */
  display: flex;
  justify-content: center;
}

View it in action here: 

@import url('https://fonts.googleapis.com/css?family=Roboto');
.notification-badge {
  position: relative;
  color: #ffffff;
  background-color: #FF4081;
  border-radius: 50%;
  padding: 5px;
  font-family: "Roboto";
  font-size: 12px;
}

.notification-icon--fixed {
  max-height: 60px;
  width: 60px;
}

.notification-badge {
  width: 14px;
  display: flex;
  justify-content: center;
  letter-spacing: -1px;
}
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">22</small>
      </i>
  </div>
</a>
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">1232</small>
      </i>
  </div>
</a>
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">3855</small>
      </i>
  </div>
</a>

Javascript can also be used to dynamically set the width of the element: 

$(window).on('load', function(){
  $('.notification-badge').each(function() {
    $(this).css({width: ($(this).height() - 2) + 'px'})
  })
})

Note that the 2px padding difference is taken into account.

Answer №3

If you're utilizing JQuery, here's a handy solution to address your issue.

if ($(".notification-badge").html().length == 3) {
  console.log("for 3 decimal");
  $('.notification-badge').css("padding", "8px 5px")
}
.notification-badge {
  position: relative;
  /*  right: -12px;
 top: -84px; */
  color: #66f;
  background-color: #FF4081;
  margin: 0 0.8em;
  border-radius: 50%;
  padding: 4px 5px;
  font-family: "Roboto";
  /*   font-size:40px; */
}

.notification-icon--fixed {
  max-height: 60px;
  width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-activates="mdi-social-group-add" title="Invitations" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
    <small class="notification-badge">248</small>
  </i>
  </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 CSS and Bootstrap together in the Yii2 framework

Hey there, I'm new to Yii2 and recently put together a layout page. However, I seem to be having some trouble with my CSS - it's not fully loading, only parts of it are displaying correctly. Is there anyone out there who can lend a hand? This is ...

phphtmlcssyii2

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...

javascripthtmlcssdom

"Continuously loading while waiting for Ajax to finish loading

I have added a div to my index.php file in WordPress. I am trying to send a number to page.php using jQuery and then display the result on index.php using AJAX. I would like to show a loading indicator (text or image) in the div until the AJAX request is ...

jqueryajaxwordpress

What is the best way to center text vertically within an image?

How can I vertically align a blog entry title on an entry thumbnail image? The image size changes with the window size and the title varies in length for each entry. After finding a website that successfully achieved this effect, I tried replicating it us ...

htmlcss

buttons are arranged horizontally, stacked neatly on top of one another

I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...

htmlcssbuttoncheckbox

Creating CSS Effects for Text Hover and Transition

Looking for help to implement the hover effect 4 on the following site: . I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/ Struggling to make it auto-responsive, any tips would be appreciated. If there's a ...

htmlcss

Detecting key press events with extended duration using the DOM keydown event

Is there a way to receive notification when a key is pressed down, but not until it is released? It seems that using keydown continuously triggers the onkeydown callback while the key is held down. ...

htmldomw3c

How to conditionally prevent event propagation to children in VueJs

This Vue component is called ColorButtonGroup, and it serves as a group of checkbox/toggle buttons. It has a maximum limit of 4 colors that can be selected. The component utilizes another component called ToggleButton, which is a simple toggle selection w ...

javascripthtmlvue.jsvuejs2dom-events

What is the best way to display a collection of square Views in a FlatList in a react native application?

How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes? Which CSS properties in react-native are necessary to achieve square shapes for each <Item/& ...

cssreact-native

strange glitch found in jquery ui resizable

Experimenting with jquery UI, I came across an unusual bug. After clicking a button to make a div resizable, the div unexpectedly moves below the button. resizable.html: <html> <head> <link href="my.css" rel="stylesheet" type=" ...

jqueryhtmlcssjquery-uiresizable

What's the best way to trigger an alert popup after calling another function?

Here are some HTML codes I've been working with: <button id="hide" onclick="hide()">Hide</button> <p id="pb">This paragraph has minimal content.</p> My goal is to have the paragraph hide first when the button is clicked, foll ...

javascripthtmlcssalert

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

What is the best way to toggle a specific div element within an ng-repeat loop?

I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, ...

javascripthtmlcssangularjs

Can you choose text in jQuery context by referencing a sibling element context?

In this example, the code appears as follows: <ul> <li><strong>This is a list header.</strong> And I want this text to vanish because it's not a list header!</li> </ul> The corresponding JavaScript code is: $( ...

javascriptjquery

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

javascriptphphtmlcssjoomla

Chrome Browser: Issue with CSS and JavaScript transitions not functioning correctly

I have three images named img1, img2, and img3. Initially, their position is set to -50% absolute top right and left. When I change the position to static with a transition of 2s, they should move to the center. Issue: During the transition, there is snap ...

javascriptjqueryhtmlcssgoogle-chrome

The Bootstrap modal backdrop is now displaying prominently in front of the modal following the latest Chrome update

Chrome version: Version 111.0.5563.64 (Official Build) (x86_64) Bootstrap: 4.3.1 Recently, there has been an issue with the modal backdrop appearing in front of the modal itself after a Chrome update. The problem does not seem to be related to z-index, an ...

htmlangulargoogle-chromebootstrap-4

Hierarchy of importance when multiple style rules affect an element

When an element in HTML has multiple style rules applying to it, what is the precedence order? The rules that apply to an element identified by its unique id come first Next are the rules applied to all elements of a specific class Lastly are the rules th ...

htmlcss

Attempting to implement CSS onto jQuery slideToggle upon the clicking of links

Need to implement a show/hide functionality for a series of lists using jQuery slideToggle. After clicking on the hyperlinks that trigger the show/hide action, I want to change the CSS style of those hyperlinks and then revert back to the original style up ...

c#jquery.netcssslidetoggle

Using jQuery to toggle the selection of multiple checkboxes

Let's start fresh, no need to worry! This is simply a jQuery question ;) I am currently working on a PHP code where the user sends a query to our database. The form then displays sets of results grouped in tables, each with checkboxes to select the d ...

javascriptjquerycheckbox