I am trying to make the transition slowly (500ms) scale the Brandsdiv when props.pop changes. pop will equal true or false. Currently, transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")}; works fine and scales the div when pop = true but the transition is not working - the scaling abruptly changes.
import React from 'react'
import styled from 'styled-components'
const LogoImg = styled.img`
max-width: 100%;
padding: 5px;
`
export default function FeaturedManufacturerLink(props) {
const {
brandPagePath,
logo,
pop
} = props
const Brandsdiv = styled.div`
transition: transform 500ms;
display: flex;
width: 116px;
height: 85px;
border-radius: 50%;
margin: 25px 35px;
align-items: center;
text-align: center;
transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")};
`
return (
<Brandsdiv pop={pop}>
<a href={brandPagePath}>
<LogoImg src={logo} />
</a>
</Brandsdiv>
)
}
I moved const Brandsdiv. The prop change pop was causing the component to rerender.
Related
I'm building the website for the web development company I just registered (which is also intended to be part of my portfolio for job applications) and on my portfolio page, I'm adding a visual list of websites that I've completed for clients, and I'm using display: flex; and align-items: center; to for the wrapper, but they don't seem to be perfectly aligned, the gap on the left is bigger than the gap on the right, and it's more prominent in a mobile view:
Here are the styled-components I'm using below the header:
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { Link } from 'react-router-dom';
import { fadeInUp } from 'react-animations';
export const PortfolioContainer = styled.div`
min-height: 100vh;
width: 100vw;
padding-top: 110px;
`
export const PortfolioHeader = styled.h1`
display: flex;
justify-content: center;
color: ${props => props.txtColor};
`
export const PortfolioWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: transparent;
padding-top: 15px;
`
export const PortfolioLinkWrap = styled.div`
width: 90%;
height: 80px;
background: ${props => props.background};
border-radius: 15px;
animation: ${props => `${props.num/2}s`} ${keyframes `${fadeInUp}`};
margin-bottom: 10px;
`
export const PortfolioLinkImg = styled.img`
height: 80px;
border-radius: 15px;
`
export const PortfolioLink = styled(Link)`
color: ${props => props.txtcolor};
width: 100%;
height: 80px;
text-align: center;
text-decoration: none;
display: grid;
grid-template-columns: 80px 1fr;
grid-gap: 10px;
align-items: center;
justify-content: center;
transition: 0.3s ease-in-out;
border-radius: 15px;
&:hover {
color: ${props => props.txthovercolor};
background: ${props => props.hoverbackground};
transition: 0.3s ease-in-out;
}
`
And here is the React component:
import React from 'react'
import content from './content.js'
import {
PortfolioContainer,
PortfolioLinkWrap,
PortfolioHeader,
PortfolioWrapper,
PortfolioLink,
PortfolioLinkImg,
} from "./PortfolioElements";
const Portfolio = ({
highlightTxtColor,
elementBg,
elementBg2,
siteText
}) => {
return (
<PortfolioContainer>
<PortfolioHeader txtColor={highlightTxtColor}>
Portfolio
</PortfolioHeader>
<PortfolioWrapper>
{content.map((e,i) => (
<PortfolioLinkWrap
key={e.id}
background={elementBg2}
num={i+1}
>
<PortfolioLink
to={e.link}
target='_blank'
txtcolor={siteText}
txthovercolor={highlightTxtColor}
hoverbackground={elementBg}
>
<PortfolioLinkImg
src={e.img}
/>
{e.text}
</PortfolioLink>
</PortfolioLinkWrap>
))}
</PortfolioWrapper>
</PortfolioContainer>
)
}
export default Portfolio
UPDATE: I figured out that it's because the PortfolioContainer element is wider than the screen. However it's set to width: 100vw; so I'm not sure why that is. I tried setting both the header and the PortfolioWrap element do display: none; to make sure neither of those were affecting it, but it didn't make a difference.
Actually the elements are centered in flex container, But PortfoloioContainer's width is wider than the screen.
Add max-width:100% to your PortfoloioContainer. This will fix the issue.
Hope it helps!
Here is my example where I need to put the first component in front of the second.
Currently the second component is in front of the first despite z-index. I tried also to put style on the component tag but it does not work. Where is my mistake ?
First component:
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
z-index: 100;
`;
function Aaa() {
return (
<Container>asd</Container>
)
}
export default Aaa;
Second component
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin-top: -200px;
background: pink;
z-index: 1;
`;
function Bbb() {
return (
<Container>qwe</Container>
)
}
export default Bbb;
App:
function App() {
return (
<>
<Aaa />
<Bbb />
</>
);
}
export default App;
You need position: relative.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
https://www.w3schools.com/cssref/pr_pos_z-index.asp
E.g.
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin-top: -200px;
background: pink;
z-index: 1;
`;
function Bbb() {
return (
<Container>qwe</Container>
)
}
export default Bbb;
I dont know why it not work,this seems no reason.But what ever, maybe you could use this instead:
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
transform: translateY(0px);
`;
function Aaa() {
return (
<Container>asd</Container>
)
}
export default Aaa;
Try adding a container for the components instead of fragment and apply display: flex and flex-direction: column on that container and see if it works. Edit: Code sandbox with fix: https://codesandbox.io/s/floral-frog-fie10?file=/src/Aaa.js
I tried to use antdesign drawer in react and it doesnt scroll properly on safari.
Currently my code looks like.
<Drawer
placement="right"
closable={!!fullCheckout}
onClose={() => setVisible(false)}
visible={visible}
getContainer={false}
style={{
position: "absolute",
height: `calc(100vh - ${view === "MobileView" ? "50px" : "55px"})`,
top: `${view === "MobileView" ? 0 : "55px"}`,
}}
width={fullCheckout ? "100%" : 455}
>
<CheckoutDrawContainer>
<TopContainer />
<BottomContainer />
</CheckoutDrawContainer>
</Drawer>
The issue is the scroll is not working properly on safari, iphone.
export const CheckoutDrawerContainer = styled.div`
display: flex;
flex-direction: column;
position: relative;
-webkit-overflow-scrolling: touch !important;
height: ${({ view }) => (view !== "MobileView" ? "calc(100vh - 50px)" : "")};
`;
export const CheckoutDrawerTopContainer = styled.div`
background-color: ${primary[0]};
height: 258px;
padding: 0 21px;
padding-top: 27px;
z-index: 9;
`;
export const CheckoutDrawerBottomContainer = styled.div`
background-color: white;
padding: 0 21px;
padding-top: 80px;
height: 500px;
`;
I think it is related to the vh on safari, iphone.
Thanks in advance
I am trying to use the blur effect in css to blur the background and z-index to stack the logo on the blurred image but the same is not happening my logo is down under the blurred background.Please let me know the issue.
Styled component heirarchy:
<LandingPageContainer>
<Background />
<LandingPageContentContainer>
<Logo src={piattoLogo} />
<ContentContainer>
<Content>Premium handcrafted delicacies</Content>
<Button>Lets go!</Button>
</ContentContainer>
</LandingPageContentContainer>
</LandingPageContainer>
import styled from 'styled-components';
import landingBackground from '../../../../../img/piatto/CustomerLanding/CustomerLanding.jpg';
export const LandingPageContainer = styled.div`
display: block;
width: 100%;
height: 812px;
background-color: #0d0c0c;
`;
export const Background = styled.div`
width: 390px;
height: 526px;
left: -326px;
top: -80px;
filter: blur(2px);
background: url(${landingBackground}) no-repeat center center/cover;
`;
export const LandingPageContentContainer = styled.div`
display: block;
margin: auto;
padding: auto;
text-align: center;
margin-top: -130px;
z-index: 2;
`;
export const Logo = styled.img`
width: 201px;
height: 164px;
`;
`;
Remember z-index only works on positioned elements (relative, absolute, sticky, fixed).
I have a Label element with some text and a Span inside. The text of the label changes on user click (it gets shorter/larger). If i put a margin left in the span then when the text of the label gets shorter/larger the span moves with it. I want the span to be static, no matter if the element sitting besides it gets shorter/larger. For some reason i dont know (i am a bit noob with css) position the span with absolute does the work (if you can explain to me why is that it would be great). It's there a more efficient way of doing that? Should i still be using absolute/relative positioning having Flexbox and CSS Grid? Do not pay attention to the <Wrapper> component. That is just a HOC that returns its children to avoid putting everything inside a <div>.
import React, { useState } from 'react';
import styled from 'styled-components';
import Wrapper from '../HOCs/Wrapper';
const ToggleCheckbox = styled.input`
display: none;
`;
const ToggleLabel = styled.label`
cursor: pointer;
padding: 2rem;
display: inline-block;
font-size: 1.6rem;
`;
const ToggleSpanBackground = styled.span`
background-color: #e3dede;
border-radius: 100px;
display: inline-block;
width: 40px;
height: 10px;
position: absolute;
left: 14rem;
top: 2.5rem;
cursor: pointer;
${ToggleCheckbox}:checked + ${ToggleLabel} & {
background-color: #2b90d9;
}
`;
const ToggleSpanButton = styled.span`
width: 2rem;
height: 2rem;
border-radius: 50px;
display: inline-block;
background-color: #e3dede;
position: absolute;
top: -0.5rem;
left: 0.3rem;
${ToggleCheckbox}:checked + ${ToggleLabel} ${ToggleSpanBackground} & {
background-color: #2b90d9;
left: 1.8rem;
}
`;
export default function Toggle(props) {
let [toggle, setToggle] = useState('off');
return (
<Wrapper>
<ToggleCheckbox type='checkbox' id='toggle-checkbox'></ToggleCheckbox>
<ToggleLabel
htmlFor='toggle-checkbox'
onClick={() =>
setToggle((prevState) => {
if (prevState === 'off') {
return 'on';
} else {
return 'off';
}
})
}
>
option: {toggle}
<ToggleSpanBackground>
<ToggleSpanButton></ToggleSpanButton>
</ToggleSpanBackground>
</ToggleLabel>
</Wrapper>
);
}
Well, position absolute effectively takes the element out of the DOM flow. So the thing getting bigger is not touching it any more so when it gets bigger it does not affect its position.
I would make the span have a fixed width, a width big enough for a long or short value.