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;
}
Related
I want the edges of the div c-thumbnail__container to be rounded, but it is not working at all. Is there a way to do this?
const Thumbnail = () => {
const [isShown, setIsShown] = useState((false));
return (
<>
<div className='c-thumbnail__container' onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
<img src={example} alt="Thumbnail" />
<Bookmark onClick={onClickBook}/>
{isShown && (
<BtnPlay />
)}
</div>
</>
)
}
.c-thumbnail__container{
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 164px;
min-height: 110px;
}
.c-thumbnail__container:hover{
cursor: pointer;
filter: brightness(.7);
}
To add a border radius, you have to add the border-radius property to the elements CSS. It looks like you have forgotten to do that.
This CSS will fix your problem:
.c-thumbnail__container{
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 164px;
min-height: 110px;
// added:
border-radius: 10px;
}
.c-thumbnail__container:hover{
cursor: pointer;
filter: brightness(.7);
}
Learn more about border-radius at https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
I have a few styled components - a container, an image and a div for text to overlay the image. Currently, I have the text centered and vertically aligned with the image, but because I added display: flex; with justify-content: center; and align-items: center; longer words no longer break within the div. How can I accomplish this with or without flexbox?
What it properly looks like positioned without the need to break words:
company 1 no breaking, no need
Unexpected Behavior / What it looks like with the need to break words:
company 2 still no breaking
Styled Components:
const ProfilePicContainer = styled.div`
position: relative;
display: inline-block;
text-align: center;
color: #fff;
`
const ProfilePicText = styled.div`
position: absolute;
height: 80px;
width: 90px;
top: -25%;
left: 35%;
min-width: 90px;
font-size: clamp(1.15em, 3vw, 1em);
line-height: 100%;
overflow-wrap: break-word!important;
word-wrap: break-all!important;
display: inline-block;
vertical-align: middle;
& div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-wrap: break-word!important;
word-wrap: break-all!important;
display: flex;
justify-content: center;
align-items: center;
}
`
const CompanyProfilePic = styled.img.attrs({ src: `${imgBlank}` })`
position: relative;
left: 30px;
top: -30px;
margin-bottom: -10px;
#media (max-width: 767px) {
width: auto;
};
`
JSX:
export default function Intro({ company, isExpanded, mainWidth }) {
return (
<Wrapper>
<Banner>
<BannerImg background={company.banner} />
<ProfilePicContainer>
<CompanyProfilePic />
<ProfilePicText><div>{company.name}</div></ProfilePicText>
</ProfilePicContainer>
</Banner>
...
</Wrapper>
)
}
<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.
On the FeatureDiscovery page they have a FAB button in the bottom right hand corner (http://materializecss.com/feature-discovery.html). I would like to replace this button with a .png image - a circular image like this: https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png. Is this possible at all?
If so would you be able to guide me into how to do it please?
Thanks.
I made this fiddle for you. Do you mean something like this?
#icon {
z-index: 10;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
bottom: 5%;
right: 5%;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
}
.fab-img {
width: 100%;
height: 80px;
}
<div id="icon">
<div id="wrapper">
<img class="fab-img" src="https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png"/>
</div>
</div>
You can also replace the <i class="material-icons">menu</i> with the img tag included in the snippet
I had a webpage that I split into sections, each section with it's own content. Unfortunately i needed it to be responsive, so i gave the body element a display: flex style. sect-1 and sect-2 were children of the body, so they are stacking, as expected. The issue is the content inside the flex items was being positioned absolutely, however now it is no longer being positioned from the sect-1 and sect-2, and now the whole page. Why does absolute positioning ignore flex item parents, and what can i do to position the children of the flex objects?
The HTML :
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>
The container css :
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
The first flex object :
#sect-1 {
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
And the object I need positioning inside the flex object (not container) :
#quote {
align-content: left;
font-family: Courier New;
color: black;
font-size: 25px;
letter-spacing: 5px;
line-height: 0px;
width: 500px;
position: absolute;
top: calc(50vh - 12.5px);
left: calc(50vw - 190px);
}
For the quote to position itself inside the flex item sect-1, the sect-1 need to have a position other than static, normally relative is what one use.
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
#sect-1 {
position: relative; /* added */
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
#quote {
align-content: left;
font-family: Courier New;
color: black;
font-size: 25px;
letter-spacing: 5px;
line-height: 0px;
width: 500px;
position: absolute;
top: calc(50vh - 12.5px);
left: calc(50vw - 190px);
}
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>