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
Related
Im trying to make a carousel with arrows. for the arrows to be in the right position and look pretty, im using a negative margin (margin: -Npx).
This causes the arrow to be hidden inside the carousel.
ive trying applying z-index: 9999.
overflow-x of carousel cannot be visible (per design)
const CarouselWrapper = styled.div`
display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
position: relative;
scroll-snap-type: x mandatory;
&::-webkit-scrollbar {
display: none;
}
& > * {
scroll-snap-align: start;
}
`;
const ArrowsContainer = styled.div`
display: flex;
align-items: center;
position: absolute;
width: 100%;
justify-content: space-between;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
`;
const ArrowWrapper = styled.div`
background: white;
border-radius: 50%;
display: flex;
opacity: 0.7;
padding: ${rem(8)};
pointer-events: auto;
box-shadow: 0px 10px 6.2px -4.95px rgba(0, 0, 0, 0.06),
0px 0px 10.2px 0.55px rgba(0, 0, 0, 0.02);
visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
&:first-child {
margin-left: ${rem(-20)};
}
`;
const CarouselContainer = styled.div`
position: relative;
`;
<CarouselContainer>
<CarouselWrapper ref={ref}>{children}</CarouselWrapper>
{showArrows && (
<ArrowsContainer>
<ArrowWrapper
show={scrollPosition !== 0}
onClick={() => scrollToNext(ref.current, -1)}
>
<ChevronLeft style={{ width: 24, height: 24 }} />
</ArrowWrapper>
<ArrowWrapper
show={scrollPosition !== maxScrollValue}
onClick={() => scrollToNext(ref.current)}
>
<ChevronRight style={{ width: 24, height: 24 }} />
</ArrowWrapper>
</ArrowsContainer>
)}
</CarouselContainer>
Seems the
`&:first-child {
margin-left: ${rem(-20)};
}`
has an effect on both the left and the right arrows as you are targeting in both cases the <ChevronLeft /> and the <ChevronRight /> with the &:first-child selector. You can remove this from the ArrowWrapper styled component and add the margin in the style tag inside the <ChevronLeft /> and the <ChevronRight />
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!
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 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.
I have a styled component that will recieve a prop so it tells it if it should give it a margin-left or right.
I think I am having a syntax problem
I will paste some code:
const FormDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
flex: 1;
position: relative;
${({ left }) =>
css`
*** margin${'-'}${left ? 'right' : 'left'}: 30vw; ***
`};
#media ${device.mobileS} {
height: 100%;
flex-grow: 1;
}
#media ${device.tablet} {
height: 100vh;
width: 100%;
}
`;
export default FormDiv;
When I try to pass left or right inside the component it doesnt take any sort of margin. What can be done to fix the syntax of the bold sentence
From https://styled-components.com/docs/faqs#can-i-nest-rules
const FormDiv = styled.div`
...
${props => props.left ? "margin-right" : "margin-left"}: 30vw;
...
`
or
${props => props.left
? 'margin-right: 30vw;'
: 'margin-left: 30vw;'}
or
${props => props.left
? css`margin-right: 30vw;`
: css`margin-left: 30vw;`}
or
margin-right: 30vw;
${props => props.left && css`
margin-right: unset;
margin-left: 30vw;`}