we are loading 100 records in the grid initially, after that when we scroll down , loading another set of data.
But when we try to print the page its loading just 100 records in the print preview screen, we are using react-to-print, functional component.
const handlePrint = useReactToPrint({
content: () => componentRef.current,
});
we want load all the data available in the List, please help.
I found myself in a similar problem and this answer from github helped me.
You have to surround your render with a div of styling overflow: scroll and also remove overflow styling, maximum height and any other view limiting styling from the surrounded element's "stylings" like the example below.
Disclaimer: I used MUI in some instances.
render() {
<div sx={{ overflow: "scroll" }}>
{
sampleIterable.map((x,n) => {
...
})
}
</div>
}
Related
I'm writing integration tests with Cypress for a form inside a modal, with the particularity that it has a fixed height, a fixed header and a fixed footer, which means the form scrolls and remains always partly covered those.
<Container>
<Modal width={width}>
<Header/> // fixed on top pf modal
<ModalBody/> // scrolling up and down underneath
<Footer/> // fixed on bottom of modal
</Modal>
<Background onClick={onClose} />
</Container>
This is proving problematic when testing with Cypress, as the input elements I query to input data go to the very top of the modal when I do, which means they get covered by the top banner and become impossible to interact with.
I think the current setup for the modal and the form should be changed to be better coded and easier to test, but I was wondering if for now I can have a way to scroll the inputs into view after I've selected them.
In the commented out code you can see the type of logic I was hoping for. I've tried several combinations on scrolling, querying and triggering events to no avail.
it("completes protocol", () => {
cy.findByRole("button", { name: /Complete protocol/i }).click();
cy.findByLabelText(/Hours/i).type(10);
// cy.get('input[type="number"]')
// .then((elements) => {
// elements[0].scrollIntoView({ offset: { top: 100, left: 0 } });
// elements[0].type(10);
// })
});
Found the solution! I had never seen these options passed after the test name, but turns out there's one called 'scrollBehaviour' that changes the standard "move-to-the-top-on-focus" behaviour, and seems to fix my issue perfectly.
it("completes protocol", { scrollBehavior: "center" }, () => {
cy.findByRole("button", { name: /Complete protocol/i }).click();
cy.findByLabelText(/Hours/i).type(10);
});
Replication Steps:
https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane
In the 'DetailsList Locked Header' scroll down to a non zero position exceeding the first page and enter 'sed' in the 'filter by name'. This updates the detailsList and the scrollbar does not go to the initial position.
Bug/Ask:
As we scroll down to let's say a position of 50 and now if there is an update to the details list with say suppose 350. The scrollbar is not returning to the starting position and it rerenders to a random position close to the top(in my case).
Approach/Temporary Hack:
Going through the code, I noticed that the initial scroll position of the scrollablepane is being refreshed only when the 'initialScrollPosition' props change in the implementation.
I tried changing the 'initialScrollPosition' prop in my component whenever the detailList updates by setting it to either 0 or 1.
Debugging this, the props for the initialScrollPosition did not change inside the ScrollablePane component did not change.
This did not work and the scrollable pane is still not set to the start.
Has anyone found a workaround or a solution for this?
I Had the same issue
I'm also using infinitive scroll(react-infinite-scroller) to load the data.
what I finally done , was replace scrollablepane by css.
(Function handleGetNext just loading new data, and variable dataToRender I keep on the state to make concatenation between old state and new)
<div>
{handleSelect()}
<div style={{ overflowY: "scroll", height: 500 }} id="containers">
<InfiniteScroll
pageStart={0}
loadMore={() => {
handleGetNext(overviewData.page);
handleSelect();
}}
hasMore={!loadingNext && !!overviewData && overviewData.page < overviewData.totalPages}
initialLoad={false}
useWindow={false}
>
<ShimmeredDetailsList items={dataToRender} enableShimmer={overviewLoading} .........../>
</InfiniteScroll>
</div>
</div>
And later what is tricky you need to set scroll position, depends where you want to scroll.
const handleSelect = () => {
const elemToScrollTo = document.getElementById("containers");
if (!!elemToScrollTo) {
elemToScrollTo.scrollTop = 2100;//example
}
};
I have to navigate to a particular div on the same page in React JS application. For example how it is being done in the following website. When one clicks on < NavLink > the UI scrolls and focuses on the particular div and similarly for other Links on this website.
https://reacttraining.com/react-router/web/api/NavLink/strict-bool
Get the offset of the target element and use window.scrollTo to position it either on top of the page or where ever you want. This would work in chrome/latest browsers. You might want to check for other browser compatibility.
let offsetTop = document.getElementById("yourelement").offsetTop;
window.scrollTo({
top: offsetTop-100,
behavior: "smooth"
});
Program is in codepen https://codepen.io/Divine1/pen/zbQVwR
Update
i have added this logic into a online reactjs project editor and it works.
You can see how this code works https://repl.it/#Divine1/QuietHeartyApplicationstack
Check App.js App.css and the live result.
I think that maybe is a better aproach to use useRef hook. on click is almost the same:
const ref = useRef();
// the function when you want to scroll:
() => window.scrollTo({
top: ref.current.offsetTop -100,
behavior: "smooth"
})
// Where you want to go
<div ref={ref} />
I'm using react and trying to build a facebook like chat - where the right column scrolls down and has a list of threads, and the middle column had the thread content and scrolls bottom up.
I have it all setup using flex, but am stuck on getting the middle column to scroll to the bottom by default (since I want to see the latest chat message). Here is the snippet for the actual container (I'm using React bootstrap):
<Row >
<Col ref={ (node) => { this.cont = node }}>
{this._buildThread()};
</Col>
</Row>
and here is the snippet for my ComponentDidMount:
componentDidMount() {
MessageStore.addChangeListener(this._onChange);
MessageService.getThread(this.props.id, 1000, 1, false);
this.cont.scrollTop = this.cont.scrollHeight;
}
Where cont is the ref for the container div that holds my messages. Yet nothing happens - it doesn't scroll, and if I look at node.scrollTop after setting it, it remains at 0 - seems immutable.
Any help would be much appreciated. Thanks!
Not sure about the details of your CSS, but I just had a similar-looking issue. The solution in my case was to make sure that the element itself would scroll and not its container:
.containerIWantToScroll {
overflow-y: auto;
}
If the element's container expands to fit the element, then that element will not scroll, thus its scrollTop value is always zero.
When are you triggering the code you included? To scroll to the bottom on render, I would write something like the following, calling triggerScroll in componentDidMount:
class App extends React.Component {
componentDidMount () {
this.triggerScroll();
}
triggerScroll () {
this.cont.scrollTop = this.cont.scrollHeight;
}
render () {
return (
<div>
<div className='containerIWantToScroll' ref={ (node) => { this.cont = node } }>
Content
</div>
</div>
)
}
}
I have a few components and some of them are sized with px. The others I want to be variable size. However, the ones that are variable size are not a constant percentage of the page because of the components with a fixed px height. So I want a component to be about 80% of the screen height('80vh') minus the height of the other component. I was hoping to use something like
style={{height:'80vh-40px'}}
but that does not work.
I found this page which gets close but that my program does not recognize that calc function. Do I need to require it from some library maybe?
Any ideas on how to make this work?
Thanks!
I use syntax like this in my React.js components:
<div style={{height: 'calc(100vh - 400px)'}}></div>
it works for me.
Inside CSS code with LESS preprocessor I use the same syntax, but not equal:
.right_col {
height: calc(~"100vh - 400px");
}
In my experiments, I found that symbol "~" doesn't work in React.js components.
A way to solve it is by using style={} in your component.
const styles = {targetDiv: { height: 'calc(100vh - Xpx)'}}
then...
<div style={styles.targetDiv}>
...
</div>
Note - you can get the window.innerHeight (see http://ryanve.com/lab/dimensions/ for height and width options in javascript) and just calculate this yourself in react and set the width or height in pixels.
If you do this with height, you'd need to recalculate if it changes
state = {
windowHeight: window.innerHeight
}
componentWillMount () {
window.addEventListener('resize', this.handleResize)
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize)
}
handleResize = () => {
this.setState({ windowHeight: window.innerHeight })
}
in your div
<div style={{height: this.state.windowHeight}} > ... </div>
You wouldn't want to do this everywhere, but it's very handy for some situations. For example - setting 100% height on Android mobile web, where 100vh does not work and device buttons cover up part of the screen.