<button class="user_badge" mat-raised-button color="primary" matBadge="1000" matBadgePosition="after" matBadgeColor="accent" MatBadgeSize="large">
<mat-icon>person</mat-icon>
User
</button>
I use badge size "large", but some of my data tends to overflow with ellipsis (...) I need to increase badge size. How do I increase badge size using css?
Angular Material Badge Sizing Documentation
Any Help Appreciated
You can use this style. I hope this will work for you
.mat-badge-content {
width: auto;
display: grid;
min-width: 32px;
min-height: 28px;
text-align: center;
align-items: center;
padding: 5px 3px;
top: -20px;
right: -22px;
}
You can change the following three properties for the class mat-badge-content:
.mat-badge-content {
width: 40px;
height: 40px;
line-height: 40px;
}
Try it in this stackblitz.
Related
I’m trying to create resizing buttons using CSS. Here’s what I have so far (onclick handlers will come later).
It’s almost correct, except the text in the last button (just a hyphen), isn’t centered vertically. The first two buttons are vertically centered as intended, but not the last button.
Can anyone see what I’m doing wrong? I’m guessing it might something inherent in the way the dash character is designed in this font. It that’s the case, can anyone suggest a better Unicode dash character that would properly align vertically?
body {
background-color: Aqua;
}
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
display: block;
font-size: 200%;
}
.button div {
vertical-align: middle;
font-weight: 800;
}
.button:not(:last-child) {
margin-bottom: .4cm;
}
<body>
<div style="text-align:center">
<h1>Resizer Buttons</h1>
<span class="button"><div>+</div></span>
<span class="button"><div>×</div></span>
<span class="button"><div>–</div></span>
</div>
</body>
Try <span class="button"><div>−</div></span> for the last button. Also, when I tried your code in my computer the text in the buttons didn't center vertically and I changed the display property of button class to flex. You might want to consider doing that as well.
A note first: In the snippet you posted, also the first two button's contents are not properly center-aligned vertically.
BUT: If you add display: flex; flex-direction: column; justify-content: center; to the CSS rule for .button, the alignment works as intended.
This changes the display property from block to flex, in this case "vertical flex" (i.e. flex-direction: column) and (vertically) centers the contents using justify-contents: center
body {
background-color: Aqua;
}
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
font-size: 200%;
display: flex;
flex-direction: column;
justify-content: center;
}
.button div {
font-weight: 800;
}
.button:not(:last-child) {
margin-bottom: .4cm;
}
<div style="text-align:center">
<h1>Resizer Buttons</h1>
<span class="button"><div>+</div></span>
<span class="button"><div>×</div></span>
<span class="button"><div>–</div></span>
</div>
You could use display:flex for the button instead of block. Then you can use align-items:center and justify-contentcenter` like this:
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 200%;
}
You will need to work with the minus symbol for your last button because it doesn't play well with the alignment. Sunay's suggestion sounds like a good alternative.
I have a question feel troubled CSS settings need everyone's help -
requirements are as follows:
a picture of a button, the picture has a text
design draft marked above the button is the size of the picture must be 200px width of the text must be 26px
text In the middle of the picture, the upper and lower spacing between the picture and the picture is 8px. The example shown in the figure below needs to be achieved.
But I can’t do it anyway. I hope you can provide some solutions to let me know how to deal with this kind of demand. Thank you Everyone
.btn{
display: inline-block;
width: 200px;
height: 100px;
background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-size: 140%;
}
.txt{
font-size: 26px;
text-align: center;
padding: 16px;
}
<a class="btn" href="javascript:;">
<p class="txt">send</p>
</a>
Your background is misleading you to believe that it matches the button position and size (if you add a border to the .btn style you will see what I mean)
So if your background is yellow and need a blackborder better to style it, is faster than loading a button image and scale it.
.btn{
position: relative ;
display: inline-block;
width: 200px;
height: 42px; /* 8 + 26 +8*/
border: 5px solid black ;
background-color: yellow ;
border-radius: 25px ;
/* to center the text vertically using flex*/
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.txt{
font-size: 26px;
text-align: center;
}
<a class="btn" href="javascript:;">
<p class="txt">send</p>
</a>
first make sure no margin is defined by default by adding margin: 0px;
2ndly, Add a line-height property to it using line-height: 1.5;
There are several other ways, but this should be the fastest
.btn{
display: inline-block;
width: 200px;
height: 100px;
background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-size: 140%;
}
.txt {
font-size: 26px;
text-align: center;
padding: 16px;
margin: 0px;
line-height: 1.5;
}
<a class="btn" href="javascript:;">
<p class="txt">send</p>
</a>
Hi guys so I'm trying to create scroll to Top button in react.js and I have manage to finished the component but the problem is I can't make the icon vertically center on the circle button. How can I fix it ? I've tried to align the item to center. Is it because the Icon itself have some kind of padding on top ?
Here's my code:
return (
<button onClick={ScrollToTop} className="ButtonToTop" aria-hidden="true" style={{display: isVisible ? 'inline' : 'none'}}>
<BiArrowToTop/>
</button>
)
My css code:
.ButtonToTop{
align-items: center;
position: fixed;
width: 50px;
right: 10px;
bottom: 40px;
height: 50px;
font-size: 33px;
z-index: 1;
cursor: pointer;
background-color: #967A50;
color: #10255A;
}
Update
You are setting style={{ display: isVisible ? "inline" : "none" }}
which resets the display to inline. Just set it to flex and add the css below (updated)
style={{ display: isVisible ? "flex" : "none" }}
Use Flex to easily align it to center
.ButtonToTop{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 50px;
right: 10px;
bottom: 40px;
height: 50px;
font-size: 33px;
z-index: 1;
cursor: pointer;
background-color: #967A50;
color: #10255A;
}
I got the following structure:
<header></header>
<main>
<card />
</main>
<footer></footer>
header {
height: 70px;
top: 0;
left: auto;
right: 0;
position: sticky;
width: 100%;
display: flex;
z-index: 1100;
box-sizing: border-box;
flex-shrink: 0;
flex-direction: column;
}
main {
height: calc(100vh - 130px);
display: grid;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
card {
width: 100%;
padding: 40px 25px;
}
footer {
top: auto;
width: 100%;
bottom: 0;
height: 60px;
display: flex;
position: fixed;
justify-content: center;
}
The card actually is a login form with two inputs and has to be in the center of the screen. I used the main to wrap and center it. But now the problem is that on horizontal orientation and when the height is reduced to some pxs it is not possible to see the whole card. Part of it is covered by the footer. Any idea how I can center it and scrolling to be possible.
Here is my sandbox: https://codesandbox.io/s/recursing-meitner-ocgz9
add this to you'r body maybe youre problem solve
body {
min-height:100vh;
}
if you place it to a code pen, would be easier to help you.
I can only assume that if you change main to the below it might help:
main {
height: calc(100vh - 130px);
display: flex;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
background: red;
}
Also check you have body { margin: 0 }. As browsers adds margin automatically, so your 100% layout does have extra height.
from the main container remove the height and add margin-bottom equals to the height of the footer.
paperContainer: {
display: "grid",
placeItems: "center",
marginBottom:'60px'
}
And to avoid some styling issues regarding height, add min-height if required.
Codesandbox demo
Got a very simple solution!!
paper: {
width: "100%",
borderRadius: "8px",
padding: "40px 25px",
paddingBottom: "100px"
},
just give the paddingBottom to the paper, you can also use it conditionally if the user is using mobile and the width of the view > height of the view. It looks fine without that too.
Check this out!!
sandbox link
let me know if you still have an issue.
I'm having an issue getting a spans' inner text to be vertically centered on Firefox
Here's a screenshot of the firefox devtools highlighting the span element.
This Works as expected on Chrome and Safari.
<button
style={{ marginTop: this.state.marginTop }}
className={`info-tab-title`}
>
<img
className="tab-icon"
src="/images/neighborhood/train.svg"
alt="train icon"
/>
<span>TO BROOKLYN</span>
</button>
.info-tab {
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
background-color: #e5e8ea;
padding: 2% 4% 4% 4%;
margin-bottom: 8px;
cursor: pointer;
height: 100%;
max-height: calc(16.67% - 6px);
transition: 0.25s max-height ease-in-out;
&:last-child {
margin-bottom: 0;
}
.info-tab-title {
display: flex;
flex-direction: row;
align-items: flex-start;
font-family: 'BrownStd Regular';
font-size: 16px;
font-weight: bold;
letter-spacing: 0.35px;
line-height: 16px;
min-height: 26px !important;
align-items: center;
#media #{$mobile-break} {
font-size: 14px;
}
.tab-icon {
margin-right: 2.5%;
height: 100%;
width: auto;
}
}
}
Ideally, the text would be vertically centered inside the span.
This is not a duplicate, the suggested answers are all addressing aligning two elements in a parent. This is referring to a browser specific problem with aligning the innerHTML content of a span.
You are doing all right. Font metrics of BrownStd cause this issue. The distance from symbol baseline to bottom of font content area is bigger than distance to top.
Not sure you can perfectly align text and icon without some tricks like negative margins or absolute positioning.
You can read this article about font metrics, it's pretty hard to understand.
button {
display: inline-flex;
align-items: center;
padding: 10px;
height: 50px;
border: 1px solid;
}
div {
margin-right: 10px;
width: 25px;
height: 25px;
background-color: red;
border-radius: 50%;
}
span {
background-color: blue;
font-family: sans-serif;
color: white;
}
<h1>Nice font —</h1>
<button>
<div></div>
<span>nice vertical alignment</span>
</button>
Codepen demo with custom BrownStd font.
If by "innerHTML content of a span" you're referring to the bounding box of the text, I believe the only way to manipulate that in CSS is via line-height, and you can't change how the text is aligned within its line-height.
In this case, I would try reducing the line-height to the exact height of the text, and then align-items: center on the parent should work.