I have a Page component in my React application with the size of A4 page. Inside this Page component I have multiple different nested children. However I came across a problem.
Problem lays when children of one Page component overflow it's height. How can I create another instance of Page component and move children that are overflowing to that component. Also, if possible, for solution to be recursive because n Page component can also have children that are overflowing it's height.
I tried multiple different solutions but all of them were either ineffective or full of bugs.
I have a page component:
const Page = ({ children }) => {
return <div style={{ width: A4.width, height: A4.height }}> {children} </div>
}
And this is in some particular container:
const Container = () => {
return (
<Page>
<div className="child" />
<div className="child" />
{/* This should be moved into another Page instance programmatically */}
<div className="child" />
</Page>
}
}
And this is my CSS:
.child {
position: relative;
width: 100%;
height: 50%;
border: 2px solid black;
}
NOTE: This question does not refer and is not identical as this one: How to make a HTML Page in A4 paper size page(s)?
I need a way to dynamically create containers and append children from previous containers that are overflowing the height of said previous containers.
Related
I am using reactstrap's Modal and I just want to expand its size to 95% of the visible area.
Currently, when applying the prop size="xl" to Modal, it is too small still for my needs. So, I found a potential solution on this page that showed applying a custom class coming from an external stylesheet into reactstrap Modal worked for him.
After following this advice, I succeeded in making the modal expand to 95% of visible area. Unfortunately, refreshing the page caused the modal to snap back to size xl. And so, I need a solution which reliably makes the reactstrap Modal apply the external stylesheet's styles and never 'snaps back' to xl.
What I tried, and results...
Adding the stylesheet to index.html as a <link /> in the /public folder.
I added this: <link rel="stylesheet" href="%PUBLIC_URL%/styles.css">
Result: fail.
I tried using styled-components. This failed for me because I had no success after trying to wrap divs around the modal which contained my styles. Perhaps there's a clever way of using reactstrap Modal and styled-components to create a HOC that can do this task?
Result: fail.
Used React state and event handler and a button which, when clicked, applied and removed the custom class name I used custom-modal-style. The way used it was like so...
import React, { useState, useEffect } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import './styles.css'
const toggle = () => setModal(!modal);
const ProductWizard = () =>
{
const [makeLarger, setMakeLarger] = useState(false);
const [modal, setModal] = useState(false);
return(
<>
<Button color="info" onClick={toggle}>Create Product</Button>
<Modal
size="xl"
centered
scrollable
isOpen={modal} toggle={toggle}
contentClassName={ makeLarger ? "custom-modal-style" : null }
// contentClassName="custom-modal-style"
>...</Modal>
</>
)
}
Here are the styles.css stylesheet contents...
.custom-modal-style {
position: fixed;
left: 5px;
width: 98%;
right: 5px;
max-height: 100%;
overflow: auto;
overflow-y: scroll;
display: block;
}
Result: fails to expand to 95% of the screen size, although it did slightly enlarge (by margin of around 20px to 30px).
Does anyone have a solution which causes the reactstrap Modal component to reliably expand to the dimensions of 95% of the screen size?
I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.
I found a similar issues on stackoverflow
White space showing up on right side of page when background image should extend full length of page [closed]
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
Solution in both the posts are same
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body / background?. Don't seem to understand what is the solution for this!
Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?
Could anyone explain how I can set the html body in gatsby, to avoid this large white space?
Resolution 1366x768 area under the bounder is the whitespace
Resolution 1920x1080 area under the bounder is the whitespace
To add global styles (such as the ones you're talking about), you have multiple ways to follow. The easiest one is to use gatsby-browser.js file. I will provide a solution for your use-case based on my paths, adapt it as you wish.
Create a global.css file in /src/styles/global.css and paste your code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
In your gatsby-browser.js file, import your global styles:
import './src/styles/global.css';
Basically, you are adding global styles using CSS files for your project.
There's a huge lack of details in your question but I guess that white part is the footer of the site. Since you don't have any content pushing the footer at the bottom of the page, it appears flexible as it could.
P.S: I've committed How to add a dynamic class to the body tag in Gatsby.js?'s solution since you don't need to add dynamic classes. To make the footer always sticky at the bottom of the browser, you need to make a few adjustments. Wrap your <Layout> with something like:
import React from "react"
import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"
import '/yourStyles.css'
const Layout = ({ children }) => {
return (
<section className="site-wrapper">
<main>{children}</main>
<Footer />
</section>
)
}
export default Layout
And add the following CSS (in your /yourStyles.css or in your global styles)
.site-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1;
}
Basically, you are telling the wrapper (site-wrapper) to expand until filling the viewport (100vh). Since your main tag (change it to the desired class if needed) can grow free (flex-grow: 1) so your footer will be always at the bottom of the page because it's pushed by the rest of the flexbox column.
With react I have created a very simple card component in a Card.jsx file. The component looks like this.
class Card extends React.Component{
render() {
return (
<div className={style.mainContainer}>
<div className={style.container}>
<div className={style.title}>Hello world</div>
<div className={style.value}></div>
</div>
</div>
);
}
}
export default Card
In one of my web app's page I have added two cards, and I space them out with flex display.
The page render:
function Home() {
return (
<div className={style.container}>
<Card> </Card>
<Card> </Card>
</div>
)
}
Container CSS:
.container {
width: 100vw;
height: 100vh;
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
The only problem with this code is that the margin-top in the css is not applying margin to the div. I encountered this problem several times, leading me to not be able to use nor padding nor margin. Can someone help? Thanks.
Image of components not being affected by margin
I found out that trying to reset React's default padding through the following lines of code:
* {
margin: 0 !important;
padding: 0 !important;
}
was yielding the issue. Nonetheless, how can I reset React's default padding / margin without the styling affecting ALL padding and margins in the app?
It's generally a bad idea to override the style properties for a lot of elements (the * selector). But, it is ok to override the user agent stylesheet for specific tags. For instance, Chrome automatically adds a margin to the <body> tag, so you can override the margin property without using !important in React I think.
After you remove the !important overrides, create a separate container class for your Card component. Setting widths and heights of individual flex items can interfere with the flex container layout, and possibly cause margins to collapse.
Add a padding to container
.container {
padding: 10px;
}
I have two divs on the page side by side and the left one is a stateless component showing the information regarding the option selected from the right side.
The page itself has overflow: hidden and the left side component has overflow-y: scroll allowing the user to scroll down and up.
Until here everything is good however when the user scrolls down and then select another piece in the right side, I should scroll this stateless component up.
return (
<div
style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
ref={myElement => {
this.myElement = myElement
}}
>
My content
</div>
)
And once we have a ref on this element, I could have something like this:
this.myElement.scrollTop = 0
I am trying to put a ref in this div to be able to scroll once this component receives any update as https://stackoverflow.com/a/33204783/1696029 but the ref does not work with stateless component.
Any ideas how can I scroll up only this left stateless component?
Consider the following component heirarchy
<Parent>
<LeftComponent />
<RightComponent />
</Parent>
You can define a ref function for LeftComponent on Parent.. Something like
leftComponentRefFunction(myElement) {
this.myElement = myElement
}
Dont forget to bind this function inside parent constructor.
And after this, send leftComponentRefFunction function as prop to the stateless component
<LeftComponent refFunction={this.leftComponentRefFunction} />
Now inside the LeftComponent use the prop function to set the ref
return (
<div
style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
ref={props.refFunction}
>
My content
</div>
)
What we're basically doing here is lifting the state logic up to the parent component.
Now you'll have access to the leftComponent ref on the parent this. and hence you will be able to set the scroll to 0
I need help with CSS in my react-redux app where I'm also using styled-components and react-spring to add animations to my app
I have my the whole container with padding and I need to add images which should go in the background
like shown in this image
see those images on the side
but my code has JSX-components/HTML elements like following:
<Container paddingTop={paddingTop}>
<BGCircleDotRed>
<img src="/images/bg_triangle_blue.png" alt=""/>
</BGCircleDotRed>
<BGSwooPink>
<img src="/images/bg_swoo_pink.png" alt=""/>
</BGSwooPink>
... // and other backgroun images components
</Container>
so now how can I write nullify that container's padding for theses background images and then add them at the specific point as shown in the pic
the css for each of these image componnet is following:
export const BGCircleDotRed = styled.div`
position: relative;
height: auto;
// padding-right: 9%;
${responsiveCSS({
'width': { sm: 5, md: 10, suffix: '%'}
})};
z-index: -1;
opacity: 0.2;
`;
Please note that responsiveCSS is an helper function created to work when the site loads on devices with various display sizes
so what changes should I made, for reference please look at this image : https://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png