i'm trying to made this in react native,
I tried to had a square and an oval, i tried to have border radius in a singular square, but everytime i cannot reach this result.
This is what i tried, but as i said i don't know how to reach this
export const StyledText = styled.Text`
text-align: center;
font-family: ${FONTS.fontFamily.bold};
font-size: 29px;
color: white;
`;
export const StyledContainer = styled.View`
align-items: center;
justify-content: center;
height: 250px;
`;
export const StyledOval = styled.View`
width: 110%;
height: 150px;
border-radius: 100-5;
border-width: 10;
background-color: red;
border-color: black;
position: absolute;
top: 50;
z-index: 10;
`;
export const StyledSquare = styled.View`
flex: 1;
align-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
z-index: 11;
`;
Related
I am new to React
In my React project I wrote a keyframes in app.js and in this project using styled Components
Section.js
import React from "react";
import styled from "styled-components";
function Section() {
return (
<Wrap>
<ItemText>
<h1>Model S</h1>
<p>Order Online</p>
</ItemText>
<Buttons>
<ButtonGroup>
<LeftButton>Custom Order</LeftButton>
<RightButton>Existing Inventory</RightButton>
</ButtonGroup>
<DownArrow src="/images/down-arrow.svg" />
</Buttons>
</Wrap>
);
}
export default Section;
const Wrap = styled.div`
width: 100vw;
height: 100vh;
background-size: cover;
background-image: url("images/model-s.jpg");
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
`;
const ItemText = styled.div`
padding: 10vh;
text-align: center;
`;
const LeftButton = styled.div`
cursor: pointer;
background-color: rgba(23, 26, 32, 0.8);
color: white;
height: 40px;
width: 256px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 100px;
opacity: 0.85;
text-transform: uppercase;
font-size: 12px;
`;
const RightButton = styled(LeftButton)`
cursor: pointer;
`;
const ButtonGroup = styled.div`
display: flex;
padding: 15vh;
`;
const DownArrow = styled.img`
margin-top: 20px;
height: 40px;
animation: animateDown infinte 1.5s;
`;
const Buttons = styled.div``;
App.css
* {
box-sizing: border-box;
font-family: "Rubik", sans-serif;
color: #393c41;
margin: 0;
padding: 0;
}
body {
width: 100%;
}
#keyframes animateDown {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(5px);
}
60% {
transform: translateY(3px);
}
}
Check Arrow Down Component I added a Animation on that.
I checked in Chrome it tell in valid property value on webkit I colud not find the Solution
I needed your Help guys
Thanks in Advance <3
I'm building info modals for a website on the services page. The services page has 3 cards that have different options, heres that code from the services page.
React JS
<ServicesContainer id='services'>
<ServicesH1>Services</ServicesH1>
<ServicesWrapper>
<ServicesCard>
<ServicesIcon src={Icon1} />
<ServicesH2>Equine Therapy</ServicesH2>
<ServicesP>
Work with horses
</ServicesP>
<Button
to='services'
onClick={openInfoModal}
primary='true'
dark='true'
smooth={true}
duration={500}
spy={true}
exact='true'
offset={-80}
>
modal
</Button>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon2} />
<ServicesH2>Group Therapy</ServicesH2>
<ServicesP>
Group therapy.
</ServicesP>
<InfoModal showInfoModal={showInfoModal} setShowInfoModal={setShowInfoModal}/>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon3} />
<ServicesH2>Individual Therapy</ServicesH2>
<ServicesP>
Individual Therapy.
</ServicesP>
</ServicesCard>
</ServicesWrapper>
</ServicesContainer>
When the modal pops up it's hidden behind the 3rd card, i'm assuming it has something to do with the 3rd card coming after the InfoModal component/ the styling. I've tried setting the z-index to 900, messed with opacity as well with no luck. When I put the InfoModal component under the 3rd card it shows up on the 3rd (far right) column of the page off center which I definitely don't want. I've looked around trying to find a solution by maybe being able to identify the custom InfoModal component as a modal so it shows up in front of everything but was only able to find styled-react-modal, which i tried but it made so many errors about ecma script that I just had to remove it. I'm pretty bad with css but heres the InfoModal styled components code
const Background = styled.div`
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 1);
position: fixed;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
`;
const ModalWrapper = styled.div`
width: 800px;
height: 500px;
box-shadow: 0 5px 16px rgba(0, 0, 0, 1);
background: #fff;
color: #000;
display: grid;
grid-template-columns: 1fr;
position: relative;
z-index: 10;
border-radius: 10px;
`;
const ModalContent = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.8;
color: #141414;
p {
margin-bottom: 1rem;
}
button {
padding: 10px 24px;
background: #141414;
color: #fff;
border: none;
}
`;
const CloseModalButton = styled(MdClose)`
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
padding: 0;
z-index: 10;
`;
the services styled components code
import styled from 'styled-components';
export const ServicesContainer = styled.div`
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #189AC0;
z-index: 1;
#media screen and (max-width: 768px) {
height: 1100px;
}
#media screen and (max-width: 480px) {
height: 1300px;
}
`;
export const ServicesWrapper = styled.div`
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
grid-gap: 16px;
padding: 0 50px;
z-index: 1;
#media screen and (max-width: 1000px) {
grid-template-columns: 1fr 1fr;
}
#media screen and (max-width: 768px) {
grid-template-columns: 1fr;
padding: 0 20px;
}
`;
export const ServicesCard = styled.div`
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 10px;
max-height: 340px;
padding: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
transform: scale(1.05);
z-index: 0.5;
&:hover {
transform: scale(1.05);
transition: all 0.2s ease-in-out;
cursor: pointer;
}
`;
export const ServicesIcon = styled.img`
height: 160px;
width: 160px;
margin-bottom: 10px;
`;
export const ServicesH1 = styled.h1`
font-size: 2.5rem;
color: #fff;
margin-bottom: 64px;
#media screen and (max-width: 480px) {
font-size: 2rem;
}
`;
export const ServicesH2 = styled.h2`
font-size: 1rem;
margin-bottom: 10px;
`;
export const ServicesP = styled.p`
font-size: 1rem;
text-align: center;
`;
I hope this isn't to much but if anyone is good with styling or react, would appreciate any feedback.
I'm trying to make an in and out animation for my comment -
import {
Popup,
Overlay,
NavBarPopupHeader,
NavBarPopupContainer,
NavBarPopupImg,
NavBarPopupClose,
NavBarPopupContent,
NavBarPopupTitle,
NavBarPopupInfo,
NavBarPopupContentImg,
NavBarPopupFooter,
NavBarPopupSignOut,
} from "./styled.js";
function NavBarPopup(props) {
const { isPopupOpen } = props;
return (
<Overlay>
<Popup active={false}>
<NavBarPopupHeader>
<NavBarPopupClose
src="./popup_close.svg"
alt="close"
onClick={() => isPopupOpen(false)}
active={true}
/>
<NavBarPopupContainer>
<NavBarPopupImg />
</NavBarPopupContainer>
</NavBarPopupHeader>
<NavBarPopupContent>
<NavBarPopupTitle>You are logged as</NavBarPopupTitle>
<NavBarPopupInfo>'UserName'</NavBarPopupInfo>
<NavBarPopupInfo>'Email'</NavBarPopupInfo>
<NavBarPopupContentImg src="./popup_img.png" />
</NavBarPopupContent>
<NavBarPopupFooter>
<NavBarPopupSignOut>Sign Out...</NavBarPopupSignOut>
</NavBarPopupFooter>
</Popup>
</Overlay>
);
}
export default NavBarPopup;
I am using styled-components :
import styled, { keyframes, css } from "styled-components";
import { fadeIn, bounceInRight, bounceInLeft } from 'react-animations';
const fader = keyframes`${fadeIn}`;
const bounceIn = keyframes`${bounceInRight}`;
const bounceOut = keyframes`${bounceInLeft}`;
const Popup = styled.div`
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 400px;
background-color: #ffffff;
transition: ${(active) =>
active
? css`
${bounceIn} 0.5s linear
`
: css`${bounceOut} 0.5s`};
`;
const Overlay = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
animation: 0.2s ${fader};
`;
const NavBarPopupHeader = styled.div`
width: 100%;
height: 15%;
background-color: #000000;
`;
const NavBarPopupContainer = styled.p`
text-align: center;
margin: 0;
padding: 30px 0 0 0;
`;
const NavBarPopupImg = styled.img`
width: 80px;
height: 80px;
border-radius: 50px;
border: none;
background-color: white;
color: black;
font-size: 25px;
`;
const NavBarPopupClose = styled.img`
position: absolute;
top: 5px;
left: 5px;
cursor: pointer;
`;
const NavBarPopupContent = styled.div`
height: 75%;
`;
const NavBarPopupTitle = styled.h3`
margin:0;
padding: 10px 0 10px 0;
text-align: center;
font-size: 30px;
`
const NavBarPopupInfo = styled.h4`
width: 80%;
margin: 10px auto;
padding:5px;
text-align: center;
font-size: 25px;
background-color: black;
color:white;
border-radius: 15px;
`
const NavBarPopupContentImg = styled.img`
width:100%;
margin-top:90px;
`
const NavBarPopupFooter = styled.div`
width: 100%;
height: 10%;
background-color: #000000;
`;
const NavBarPopupSignOut = styled.p`
width:200px;
text-align: center;
margin: 0 auto;
padding: 15px 0 0 0;
font-weight: 700;
font-size: 32px;
color: white;
text-decoration: underline;
cursor: pointer;
`;
export {
Popup,
Overlay,
NavBarPopupHeader,
NavBarPopupContainer,
NavBarPopupImg,
NavBarPopupClose,
NavBarPopupContent,
NavBarPopupTitle,
NavBarPopupInfo,
NavBarPopupContentImg,
NavBarPopupFooter,
NavBarPopupSignOut
};
I want my popup to be animated with $bounceIn when it appears, and disappear with $bounceOut when it closes. I tried to do it by passing an attribute to styled-components but now it only works when my Popup appears. Perhaps I chose the wrong approach, in which case please guide me in the right direction.
For reasons I cannot identify overflow: hidden has decided not to work for my react application, at first yesterday or day before it worked and then for reasons I do not know it was not working and the X axis scroll was appearing. Then I came back next day to work on it and overflow: hidden was working as there was no x-axis scroll.
Today I have been working on the project fine, and then I restarted my laptop because npm was not installing part of material-ui's npm installations, it just paused halfway through. After restarting my laptop I tried to install again and worked fine, however now the overflow: hidden does not work as the scrolls on each axis have appeared.
I am very confused because my npm has been playing up and I have no idea why this would affect my css-styled components as their have been no code changes. Earlier on when I ran npm start it threw an error that I had not seen before so I ran npm update, and then npm start worked. I also constantly get those red warnings of a certain number of issues that need auditing whenever I install anything through npm now which I never use to get.
Sandbox Link Here
I am developing it mobile first (Iphone 8/8plus size) so toggle the responsive view otherwise will look odd and might not make sense (haven't done media queries yet)
For context when it was working fine the Y-axis scroll was on because the site is scrollable vertically just should not be scrolling horizontally
I put overflow: hidden on all the containers now to try and get rid of horizontal scroll but no change
Because codepen does not work here are the main code files:
App.js
import React from 'react';
import Styled from 'styled-components';
import website from '../src/Assets/website (1).svg';
import development from '../src/Assets/development.svg';
import design from '../src/Assets/maintenance.svg';
import develop from '../src/Assets/code.svg';
import deploy from '../src/Assets/upload.svg';
import { Hero } from './Components/Hero';
import { Hero1 } from './Components/Hero1';
import { Hero2 } from './Components/Hero2';
import { Hero3 } from './Components/Hero3';
import NavAppBar from './Components/Navigation'
import '#fontsource/roboto';
function App() {
return (
<div>
<NavAppBar/>
<Hero/>
<Hero1/>
<Hero2/>
<Hero3/>
</div>
);
}
export default App;
Hero.js
import React from 'react'
import Styled from 'styled-components';
import development from '../Assets/development.svg';
import design from '../Assets/maintenance.svg';
import develop from '../Assets/code.svg';
import deploy from '../Assets/upload.svg';
export const Hero = () => {
return (
<div>
<Container>
<Title>
Translating Business ideas to an professional online presence
</Title>
<WebsiteSvg/>
<Subtitle>
The Full Front-End Package
</Subtitle>
<Design>
Design
</Design>
<DesignSvg/>
<Develop>
Develop
</Develop>
<DevelopSvg/>
<Deploy>
Deploy
</Deploy>
<DeploySvg/>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
`
const Title = Styled.div`
position: absolute;
width: 212px;
height: 157px;
left: 8%;
top: 51px;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
display: flex;
align-items: center;
color: #000000;
`
const WebsiteSvg = Styled.div`
position: absolute;
width: 151px;
height: 162px;
left: 55%;
top: 14%;
background-position: center;
background-size: cover;
background-image: url(${development});
transform: rotate(38.43deg);
`
const Subtitle = Styled.div`
position: absolute;
width: 171px;
height: 35px;
left: 10%;
top: 189px;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 28px;
/* or 233% */
display: flex;
align-items: center;
color: #000000;
`
const Design = Styled.div`
position: relative;
width: 64px;
height: 37px;
/* left: 40%; */
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 45%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const Develop = Styled.div`
position: relative;
width: 64px;
height: 37px;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 55%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const Deploy = Styled.div`
position: relative;
width: 64px;
height: 38px;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 65%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const DesignSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 4%;
top: 53%;
background-position: center;
background-size: cover;
background-image: url(${design});
transform: rotate(38.43deg);
`
const DevelopSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 35%;
top: 63%;
background-position: center;
background-size: cover;
background-image: url(${develop});
/* transform: rotate(-28.43deg); */
`
const DeploySvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 67%;
top: 74%;
background-position: center;
background-size: cover;
background-image: url(${deploy});
/* transform: rotate(-28.43deg); */
`
Hero1.js
import React from 'react'
import Styled from 'styled-components';
import webDesign from '../Assets/webDesign.svg';
import devices from '../Assets/devices.svg';
import profile from '../Assets/profile.svg';
export const Hero1 = () => {
return (
<div>
<Container>
<Title>
Services
</Title>
<ServicesBox>
<DesignSubtitle>
UI/UX Design
</DesignSubtitle>
<DesignSvg/>
<DesignText>
Experience designing with professional UI/UX principles utilising Figma
</DesignText>
<WebSubtitle>
Web Development
</WebSubtitle>
<DevicesSvg/>
<WebText>
Building Responsive and scalable websites and web apps with React
</WebText>
<MobileSubtitle>
Mobile Apps
</MobileSubtitle>
<ProfileSvg/>
<MobileText>
Building mobile webapps, lightning fast and no download required!
</MobileText>
</ServicesBox>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
background-color: #DEEEEA;
`
const Title = Styled.div`
position: relative;
width: 253px;
height: 45px;
top: 8%;
/* margin-right: auto;
margin-left: auto;
vertical-align: middle; */
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 28px;
align-items: center;
text-align: center;
color: #000000;
`
const ServicesBox = Styled.div`
position: absolute;
display: flex
justify-content: center;
align-items: center;
top: 13%;
height: 525px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
/* background-color: #DEEEEA; */
border-radius: 70% 20% 60% 40%;
/* opacity: 50%; */
`
const DesignSubtitle = Styled.div`
position: relative;
width: 108px;
height: 36px;
left: 37.5%;
top: 5%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
/* or 233% */
align-items: center;
color: #000000;
`
const WebSubtitle = Styled.div`
position: absolute;
width: 108px;
height: 36px;
left: 32.5%;
top: 40%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
/* or 233% */
align-items: center;
color: #000000;
`
const MobileSubtitle = Styled.div`
position: absolute;
width: 108px;
height: 36px;
left: 37.5%;
top: 75%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
align-items: center;
color: #000000;
`
const DesignSvg = Styled.div`
position: relative;
width: 95px;
height: 95px;
left: 3%;
top: 5%;
background-position: center;
background-size: cover;
background-image: url(${webDesign});
`
const DevicesSvg = Styled.div`
position: absolute;
width: 100px;
height: 100px;
right: 3%;
top: 49%;
background-position: center;
background-size: cover;
background-image: url(${devices});
`
const ProfileSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 5%;
top: 85%;
background-position: center;
background-size: cover;
background-image: url(${profile});
transform: rotate(-12.43deg);
`
const DesignText = Styled.div`
position: absolute;
width: 185px;
left: 38%;
top: 18%;
font-family: Noto Sans;
font-style: bold;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
const WebText = Styled.div`
position: absolute;
width: 175px;
left: 1%;
top: 55%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
const MobileText = Styled.div`
position: absolute;
width: 165px;
left: 41%;
top: 90%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
Hero2.js
import React from 'react'
import Styled from 'styled-components';
import diagram from '../Assets/diagram.svg'
import structure from '../Assets/structure.svg'
import js from '../Assets/js-format.svg'
import html from '../Assets/file.svg'
import css from '../Assets/css.svg'
export const Hero2 = () => {
return (
<div>
<Container>
<Title>
Web Development Skills
</Title>
<SkillsSvg/>
<SkillBox>
<ReactSvg/>
<JsSvg/>
<HtmlSvg/>
<CssSvg/>
</SkillBox>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
background-color: #DBE6FD;
`
const SkillBox = Styled.div`
position: absolute;
display: flex
justify-content: center;
align-items: center;
top: 35%;
height: 400px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
`
const Title = Styled.div`
position: absolute;
width: 180px;
height: 157px;
right: 8%;
top: 8%;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
/* or 140% */
display: flex;
align-items: center;
text-align: center;
color: #000000;
`
const SkillsSvg = Styled.div`
position: absolute;
width: 137px;
height: 149px;
left: 29px;
top: 10%;
background-position: center;
background-size: cover;
background-image: url(${diagram});
`
const ReactSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 45%;
top: 5%;
background-position: center;
background-size: cover;
background-image: url(${structure});
transform: rotate(28.42deg);
`
const JsSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 70%;
top: 30%;
background-position: center;
background-size: cover;
background-image: url(${js});
transform: rotate(28.42deg);
`
const HtmlSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 10%;
top: 38%;
transform: rotate(-25.03deg);
background-position: center;
background-size: cover;
background-image: url(${html});
`
const CssSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 45%;
top: 65%;
background-position: center;
background-size: cover;
background-image: url(${css});
transform: rotate(26.96deg);
`
Hero3.js
import React from 'react'
import Styled from 'styled-components';
export const Hero3 = () => {
return (
<div>
<Container>
<Title>
Portfolio
</Title>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
`
const Title = Styled.div`
position: absolute;
width: 180px;
height: 157px;
right: 8%;
top: 8%;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
/* or 140% */
display: flex;
align-items: center;
text-align: center;
color: #000000;
`
Just add a style property to parent div and it should work.
<div style={{ overflowX: "hidden" }}>
<NavAppBar/>
<Hero/>
<Hero1/>
<Hero2/>
<Hero3/>
</div>
example
Hello I have a daughter div that is passing the full width of the parent div for some reason I still can't find the solution:
like this:
for some reason instead of skipping paragraph it is always horizontal I've tried everything and found no solution.
code:
<Styled.ChatBox>
<Styled.ChatLog>
<Styled.MessageWrapper user={true}>
<Styled.ChatMessage user={true}>{props.children}</Styled.ChatMessage>
</Styled.MessageWrapper>
</Styled.ChatLog>
</Styled.ChatBox>
css:
const messageBot = css`
align-self: flex-start;
background-color: #e0e0e0;
color: black;
border-radius: 8px;
padding: 10px 10px 10px 15px;
font-size: 15px;
font-family: sans-serif;
`;
const messageClient = css`
align-self: flex-end;
background-color: #1a6fe8;
color: white;
border-radius: 8px;
padding: 10px 10px 10px 15px;
font-size: 15px;
font-family: sans-serif;
`;
const ChatBox = styled.div`
display: ${props => (props.widget ? 'none' : 'flex')};
position: absolute;
position: fixed;
right: 20px;
bottom: 20px;
flex-direction: column;
max-width: 22em;
width: 100%;
height: 30em;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 2px;
background: ${props => (props.widget ? 'red' : 'blue')};
`;
const ChatLog = styled.div`
display: flex;
flex-direction: column;
max-height: 400px;
width: 100%;
overflow-y: auto;
flex: 1 100%;
background: red;
padding: 10px 10px 0px 10px;
box-sizing: border-box;
`;
const MessageWrapper = styled.div`
background: yellow;
display: flex;
align-items: center;
flex-direction: row;
box-sizing: border-box;
width: 100%;
justify-content: ${props => (props.user ? 'flex-end' : 'flex-start')};
`;
const ChatMessage = styled.div`
position: relative;
margin: 1ex;
padding: 1ex;
border-radius: 2px;
:before {
content: '';
position: absolute;
top: 50%;
right: ${props => (props.user ? '-5px' : '')};
left: ${props => (props.user ? '' : '1px')};
height: 15px;
width: 15px;
background: ${props => (props.user ? '#1a6fe8' : '#e0e0e0')};
transform: rotate(45deg);
transform-origin: top right;
}
${props => (props.user ? messageClient : messageBot)}
`;
I know that my div that is passing the size is ChatMessage
I believe she is the problem
img:
example on:
https://codesandbox.io/s/cool-water-1dwqx
You need to handle the overflow of the element.
const ChatMessage = styled.div`
...
overflow: hidden;
word-break: break-all;
`;