What could be causing the imperfections in the circle around this item

I am currently working on customizing the <p-calendar> tag from primeng 6.1.1. My goal is to have a blue circle appear when hovering over the month item. I envision it looking like this:

https://i.sstatic.net/wZ41wm.png

However, what I am getting is more of an oval shape rather than a perfect circle. I tried using border-radius: 50% !important. Here is the code snippet from my datepicker.scss:

.ui-monthpicker-month {
    border-radius: 50% !important;
    text-decoration: none;
    margin-top: 10px;
    color: #73767b;
    font-family: 'Muli', sans-serif;
    padding: 0px 20px 0 20px;
}

.ui-monthpicker-month:hover {
    background-color: #1474A4;
    color: white;
}

I would appreciate any guidance on how to fix this issue.

htmlcsssass

Answer №1

The reason for this issue is likely due to the element not being square. Use the Chrome debugger to verify the width and height, ensuring they are equal. I believe adjusting the padding from padding: 0px 20px 0 20px to padding: 20px 20px 20px 20px; should make it square.

Answer №2

Adjust the dimensions of ui.monthpicker-month to have equal width and height, then update border-radius: 100%

Answer №3

padding: 0px 20px 0 20px;

To optimize your design, consider removing the padding altogether or maintaining consistent padding on all four sides.

Answer №4

Give this a shot

dimensions: 50 width x 50 height;

Answer №5

I'm not the best at styling, but I managed to achieve the desired look by tweaking the CSS:

.ui-monthpicker-month {
    border-radius: 100% !important;
    text-decoration: none;
    margin-top: 10px;
    color: #73767b;
    font-family: 'Muli', sans-serif;
    height: 50px !important;
    width: 50px !important;
    padding: 20px 20px 20px 20px;
}

After implementing these changes, here is how it looks now:

https://i.sstatic.net/QKn6C.png

However, I am still facing an issue with the month name being slightly off-center. How can I adjust this to be vertically centered?

Answer №6

Consider changing the margin-top property from 10px to 0 for a cleaner look.

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

issue with varying levels of user authentication

I encountered an issue with the multi-level user login functionality in my PHP MySQL project. While I am able to login as an admin without any problems, nothing happens when attempting to log in with a different user. Is there something crucial that I migh ...

phphtmlformsmysqlipasswords

Centering dilemma in the div

I have a main container with a width of 940 pixels. Inside the main container, there are two divs with a width of 250px each. My goal is to center align these boxes within the main container. However, the issue arises when the second div is added dynamic ...

jquerycsshtmlcenter

What steps should I follow to include Sass compilation in my Angular CLI 6 project in the angular.json file?

I recently started working on a project in Angular using the latest version of Angular CLI 6.0. However, I need to enable Sass compilation for my existing project. Typically, you can specify this during project creation, but since mine is already set up wi ...

angularnpmsassangular-cli

Child element matching Parent's dimensions causes overflow

I've been searching extensively on Google, but I couldn't find an answer to why children of a parent with the same size are overflowing. For instance, <div style="background:blue;width:500px;height:40px"> <div style="border:1px ...

htmlcss

Looking for CSS properties to personalize a dropdown list in an HTML select element

After spending several days scouring the internet and trying out numerous methods, I have yet to find a satisfying way to create my own dropdown list. Using CSS, I am able to customize the text color (A), the border style and color (B) of the dropdown fie ...

htmlcssdrop-down-menu

Creating consistent vertical lines in HTML tables by aligning them equally on both sides

Hello, I currently have two tables with different content and I am looking to align the vertical lines between them. You can view my code here. I want to ensure that the vertical line alignment between the two tables looks consistent. Here is my current C ...

csshtml

Is there a way for me to keep an image stationary on the page while allowing overlaying text to move?

Currently, I am exploring the process of coding a website that mimics the style of this particular webpage: . I am particularly interested in learning how to create a scrolling effect for text within a fixed area, while keeping the accompanying images st ...

javascriptjqueryhtmlcss

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

javascriptjqueryhtmlforms

Tips for structuring a webpage section on a smaller screen using Bootstrap

Good day, I am inquiring about how to adjust the formatting of a website element when viewed on a different browser size. For instance, this is what my top navigation bar looks like at the LG size: Nav LG However, when I switch to SM size, it appears u ...

htmlcsstwitter-bootstrap-3

Implement a click event to trigger a search functionality within Bootstrap

I have implemented the following code to add search options in the navigation bar. It is displaying correctly, but I am not getting the click action that I require. For example, I want to trigger an action from JavaScript when the user clicks on the enter ...

javascripthtmlangularjstwitter-bootstrap

Utilizing Modal Popups in ASP.NET MVC for Button Clicks Embedded within a jQuery Datatable

For my current project, I am working on a page that includes a table with data. However, I want to implement a Bootstrap modal to display unique message content in the popup body when a button is clicked within each row of the table. The challenge I am fac ...

javascripthtmljqueryasp.netasp.net-mvc

Elements that allow for asynchronous data submission without requiring a traditional submit button

Hey there, I could really use some help with this puzzle I'm trying to solve. Here's the situation: <ul> <li>Number: <span id="Number">123</span></li> </ul> I want to set up a connection between t ...

javascripthtmlangulartypescriptasynchronous

What are some strategies for preloading a webpage to improve loading times?

My webpage contains multiple images, but the browser loads them one by one when a user visits the page. I would like to display a "loading" gif in the center of the page first and only show the entire webpage once all the images have been downloaded. Is ...

javascripthtmlcsspreloaderimage-preloader

Determine whether a specific key exists in the formdata object

Can I check if a key in the formdata object already has a value assigned to it? I am looking for a way to determine if a key has been previously assigned a value. I attempted something like this but did not get the desired outcome data = new FormData(); ...

javascriptajaxhtmlformsjquery-ui

Discovering multiple IDs using xpath or cssSelector can be achieved when they have the same classname

Attempting to retrieve an ID resulted in a no element found exception for the code snippets below: System.out.println(driver.findElement(By.xpath("//a[@class='activity'][contains(.,'First Testing')]")).getAttribute("id");) System.out.p ...

htmlseleniumselenium-webdriverxpathwebdriver

Guide on retrieving the innerHTML of all <a> tags within a specific span class

<span class="mgen"> <a rel="tag">Action</a> <a rel="tag">Adventure</a> <a rel="tag">Apocalypse</a> <a rel="tag">Fantasy</a> <a rel="tag" ...

javascripthtmlnode.js

Tips for converting PSD template into HTML/CSS code

Currently, I am in the process of converting a PSD template into HTML/CSS. The file contains around 50 layers that have been exported to PNG using a Photoshop script. To begin, I structured the code like this: <div id="container_1"> <div id="co ...

htmlcsstemplatespsd

"Web fonts without a content delivery network (CDN)

When it comes to loading fonts via CDN, I am facing an issue with the requirements for a specific font. We are currently using Montserrat Light in some sections, but unfortunately, my preference according to Google Fonts does not include the 'light&ap ...

htmlfontscdn

Having trouble accessing deployed HTML and JavaScript files on an Azure Web App?

As a newcomer to Azure, I hope you can bear with me if I ask a basic question. Is it possible to manually deploy a project built with HTML and vanilla JavaScript to an Azure Web App (not Azure Static Web App)? I have successfully deployed my files to a W ...

javascripthtmlazureazure-web-app-serviceazure-webapps

Boosting Your SCSS (SASS) Productivity

I'm curious if there are any ways to make the code below more efficient or dynamic. I've already achieved the desired result, but I'm interested in optimizing it further. The Script Any suggestions would be highly appreciated, Cheers, ...

htmlcssscriptingsass