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
Related
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.
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 using the Element UI component library for Vue 2. Element has a Tabs component as shown in the following screenshot (blue rectangle):
I want to add a button to where the red arrow is pointing. But the Tabs component doesn't have a native way to add an accessory UI component like that, such as by using a slot. Since this area is within the Tabs component, I don't see a way to insert an accessory component in that area.
If you look at the inspector, I basically have to insert a Button component after the div with the class tablist.
You could do this programatically:
Style the nav bar in el-tabs to set display:flex and justify-content:space-between:
.el-tabs__nav-scroll {
display: flex;
justify-content: space-between;
}
Add an el-button to the template, and give it a template ref (named btn).
<el-button ref="btn">Click me!</el-button>
Apply a template ref to the el-tabs component (named tabs).
<el-tabs ref="tabs">
In the mounted() hook, insert the el-button into el-tabs:
export default {
mounted() {
const scrollBar = this.$refs.tabs.$el.querySelector('.el-tabs__nav-scroll')
scrollBar.appendChild(this.$refs.btn.$el)
}
}
demo
I used the slot, the create button is obtained on the left.
<el-tabs>
<el-tab-pane
name="ExTab"
ref="ExTab"
>
ExTab
</el-tab-pane>
<el-tab-pane
name="add"
ref="add"
>
<span slot="label" >
<el-button
slot="reference"
type="primary"
round
icon="el-icon-plus"
style="margin: 0 1% 0 1% "
#click.stop="addTab()"
/>
</span>
</el-tab-pane>
</el-tabs>
I have a vue application and I load async components.
The problem is the page render is jumping.
For example, in the picture I load header, intro, slide components (and more components after slide component)..
When I using import('./...') then I see that the slide component is first to render then header then the intro component. (this order is always change).
This is cause the page to be jump, the slide is going down and the intro is appear, which have bad ux.
I try to fix that by css grid - defined the template-column-rows (min size) but, the components are not there yet. so the wrap div doesn't affect on the child components.
Here by this picture the header and the slide is already rendered, and after a few seconds the intro is appear..
Any idea how to handle this problem?
If you know ahead of time that the components are going to be loaded in, you could create wrapper divs in the parent component that loads these components. And add a css grid system to these wrapper divs, defining height etc.
This would prevent the jumping of elements around the page as new components are loaded in.
As you haven't shared any code, it's hard to tailor this answer to your specific needs. I hope it gives you an idea of what to do.
Example
Parent
<template>
<div class="container">
<div id="header__wrapper">
<Header />
</div>
<div id="intro__wrapper">
<Intro />
</div>
<div id="slide_wrapper">
<Slide />
</div>
</template>
CSS
.container {
grid-template-rows: 1fr 1fr 1fr; /* or whatever you need */
}
I am using a React collapse component that works fine when the height is set to auto, but if I change the height by showing the element that is initially hidden inside the collapse container, the ReactCollapse component gets overflow: hidden styling. And that causes the period picker field, inside the child component, not to be visible on clicking it. There was a similar issue here that seemed to be resolved with the version 4.0.3 which I have as well.
My component is a children component inside the ExpandingPanel.
<ExpandingPanel
title={title}
isInfoPanelOpen={isInfoPanelOpen}
onClick={() => toggleInfoPanelCallback(faktaId, true)}
>
{children}
</ExpandingPanel>
The children component that has one element that is being shown and hidden on click gets the overflow hidden when the element is visible:
<div class="ReactCollapse--collapse" style="height: 944px; overflow: hidden;">
How can I fix this, so that overflow is set to visible and not hidden, when the initial height of the collapse container changes?