So I am using Angular Material badge and I want the shape to be full circle if the content is single digit and zoom out on chrome normally using the zoom or ctrl - / + . However I am either getting an ellipsis as the badge content grows or it is a circle with curved edges for small values and it becomes smaller and not centered as we zoom out.
.nav-link-badge {
#media (min-width: 576px){
display: absolute !important;
align-items: center !important;
width: auto !important;
right: unset !important;
text-align: center !important;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
transition: opacity 0.2s ease-in-out 0.1s;
margin-left: 8px;
+ .collapsable-arrow {
margin-left: 8px;
}
}
}
Please suggest how I can get the desired behaviour in Angular badge. thank you
media ( min-width: 576px){
.nav-link-badge {
display: absolute !important;
align-items: center !important;
width: 35px;
height: 35px;
right: unset !important;
text-align: center !important;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
transition: opacity 0.2s ease-in-out 0.1s;
margin-left: 8px;
border-radius: 50%;
Related
There's empty space to the far right of a header I'm using on all pages. When the window is maximized, the header extends all the way to the right, but when the window is resized smaller, the empty space not only appears, but widens as the window is resized. min-width: 100% hasn't fixed this.
Here's the CSS. .headerItem has padding to it, and that was the initial culprit, but after removing all the padding, the space still persists.
.Header {
height: 2.5rem;
min-width: 100%;
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #282828;
border-bottom: 3px solid;
border-color: black;
text-decoration: none;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.Header a {
text-decoration: none;
}
.headerItem {
height: 100%;
line-height: 2.6rem;
background-color: #232227;
font-family: 'Montserrat', sans-serif;
font-size: medium;
margin-bottom: 10px;
padding-left: 1rem;
padding-right: .65rem;
padding-top: .25rem;
padding-bottom: .25rem;
font-variant: small-caps;
font-weight: 600;
transition-property: color;
transition-duration: 2s;
letter-spacing: .4rem;
color: #D6A83D;
border: solid 1px;
}
.headerItem:hover {
transition: .25s;
color: #ffec00;
border-color: #ffec00;
cursor:default;
}
All of the wrappers have also been reduced/edited to see if this would disappear, but it hasn't.
edit: Forgot the header
This is the answer, a very simple one, too: the buttons wouldn't resize while the header would, so they extend past the header.
I'm using react in my app and I'm trying to make a "progress bar" that represents the percentage of the balance that is being used as in this image:
It's working fine but when the percentage is low (5% or less), the border radius stops working as it should, making the bar appear out of the frame:
Is there anyway that I can fix this?
Here is the .scss file I'm using for the progress bar
.progress-bar {
background-color: #c5c5cb;
border-radius: 20px;
outline: 1px solid #212429;
outline-offset: -0.5px;
position: relative;
height: 20px;
width: auto;
margin-right: 12px;
margin-left: 12px;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
}
.progress-done {
background: linear-gradient(to left, #4A439A, #6950AC);
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 1s ease 0.3s;
}
Try overflow: hidden; in your .progress-bar class.
I have a button with a notification bubble on it. I applied a hover property on this button in order to enlarge the button. The problem is that the notification on the button is also transformed and it caused a tiny space between button and notification.
How can I make to have a uniform transformation between my button and my notification on it? I am aware that the position of the notifications is in pixels and maybe this is the origin of the problem.
Here's my code:
.notify-badge{
position: absolute;
background-color: #3bb2bc !important;
height: 25px;
width: 25px;
right: 40px;
bottom: 40px;
text-align: center;
line-height: 25px;
border-radius: 50%;
color: white;
border:1px solid #3bb2bc;
}
a {
background: white;
padding: 15px;
padding-top: 11px;
border: 0;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: 30px;
}
a:hover{
transform: scale(1.1);
transition: all 0.25s ease-out;
}
<a class="button">
<img src="images.png"/>
<span class="notify-badge">2</span>
</a>
i'm working on this element http://zag-test.nowcommu.myhostpoint.ch/
what i need is to "enalrge" the entire element in the same position, but via CSS i can on enlarge the central button (CLICK button).
How can i solve?
CSS
.cn-button {
position: absolute;
top: 100%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -3.78em;
padding-top: 0em;
width: 7.5em;
height: 7.5em;
border: none;
border-radius: 50%;
background: none;
background-color: #000;
color: #f9d70a;
text-align: center;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
You can use the transform attribute with scale to make everything bigger:
#cn-wrapper {
transform: scale(1.4) !important;
}
This is for the outer menu options, and the !important forces it to be used
I'm designing an animated progress bar to display ratings on my website. At the end of the bar, I want to display inside a circle the rating number (out of 10) corresponding to the final progress % of the bar. I want to have a responsive design.
My problem arises when dealing with a high progress %, such as 95%. The circle with the rating value is sent down to the next line. It is also the case when resizing my browser with a progress value such as 75%. With lower values, everything is fine. I tried to play around with negative margin-left and margin-right values for #ratingnumber, which seems to help a bit but still had trouble keeping the rating circle on the progress bar for really high progress %.
I'm looking for the CSS tweak to keep the rating circle on the progress bar for every rating cases.
jsfiddle for 95%: http://jsfiddle.net/4pzm98b0
jsfiddle for 50%: http://jsfiddle.net/z1wtqebj/
<div id="progressbar">
<div id="progress"></div>
<div id="ratingnumber">
9.5
</div>
</div>
body {
background-color: #aaa;
padding: 40px;
}
#progressbar {
width: 100%;
height: 20px;
background-color: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 3px;
border: 3px solid #666666;
clear: both;
}
#progress {
background: green;
height: 20px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#ratingnumber{
border: 4px solid green;
background: white;
padding: 10px;
float: left;
font-size: 28px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
border-radius: 50%;
position: relative;
left: -30px;
top: -24px;
}
#-webkit-keyframes progress {
from { }
to { width: 95% }
}
#-moz-keyframes progress {
from { }
to { width: 95% }
}
#-ms-keyframes progress {
from { }
to { width: 95% }
}
#keyframes progress {
from { }
to { width: 95% }
}
Add white-space: nowrap to the parent element, #progressbar. Then remove float: left from the children elements, and change the display to inline-block in order for them to respect the white-space property on the parent. Set vertical-align: top on the children in order to fix the vertical alignment.
Updated Example
#progressbar {
white-space: nowrap;
}
#ratingnumber, #progress {
display: inline-block;
vertical-align: top;
}
The positioning on the #ratingnumber element also needs to be changed to:
#ratingnumber {
position: relative;
top: -20px;
}