Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v

My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are accessed by clicking on the notifications icon located at the top right hand side of the navigation bar.

I used the Popover feature from antd design to render this. When clicked, it should retrieve data from the back end and show it in a dialog box.

The problem is that the popover dialog box is appearing outside of the viewport, causing a horizontal scrollbar to appear. I want the dialog box to display within the viewport without stretching out or creating a scrollbar.

I've tried using the overflow-x: hidden attribute to hide the scrollbar, but then the popover content becomes invisible. Any suggestions would be greatly appreciated!

javascripthtmlcssreactjsantd

Answer №1

The pop-up box is set to be "absolute" and the left position is calculated at 100% minus 40% !important.

Here's a suggestion: Add a CSS rule of right:0 to the "ant-popover" class. This will eliminate the need for horizontal scrolling.

Answer №2

To start, we can create a callback function within the parent component of InfiniteScrollExample:

updateInfiniteScroll = () => {
  this.setState({scrollUpdate: this.state.scrollUpdate + 1})
}

Next, we'll pass this function as a prop to InfiniteScrollUpdate:

<Popover
  placement="bottomLeft"
  title={text}
  content={<InfiniteScrollExample />}
  trigger="click"
  afterScrollApiSuccess={this.updateInfiniteScroll}
>
   <Button>Msgs</Button>
</Popover>

Within InfiniteScrollExample, remember to trigger this prop after the backend call is successful and the view is updated. If you're calling the backend in componentDidMount, it might look like this:

componentDidMount() {
  fetch(url).then(res => {
    this.setState({apiResponse: res.data}, this.afterScrollApiSuccess);
  })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React encountering Eslint issue with callback hooks usage

Utilizing callback hooks has been instrumental in preventing the re-rendering of components that are affected by a change in the function passed as props. I have incorporated callback Hooks into both incrementSalary and incrementAge. It appears that the ca ...

reactjs

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler

For every build in Webpack, I am attempting to create a customized index.html file. In order to achieve this, I have incorporated html-webpack-plugin. I comprehend that to generate an index.html file within my dist directory, the following configurations ...

javascriptwebpackvue.jshtml-webpack-plugin

Having trouble deploying my React application on Azure Static Web Apps. Getting these error logs from Github actions:

Things were going smoothly until a series of warnings popped up: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="621551014f0a104f160b0f0722534c524c50">[email protected]</a>: Use your platform&ap ...

reactjsazuredeploymentazure-static-web-app

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. Here is my HTML code: <section class="favorites"> <div class="category" ...

javascripthtmlcssangulartypescript

Tips for adding a "return" button to a page loaded with AJAX

While working with jQuery in prototype to load pages using Ajax, I've come across a feature on big sites like Facebook and Twitter that I'd like to implement: a 'back' button that takes the user back to the previous page when clicked. S ...

javascriptajaxweb

What is the best way to navigate away from the main page of a nested route using react-router?

Can't seem to find any solutions online for this issue. I am looking to have my application automatically redirect from the root route (/) to 'posts'. For example, www.app.com/user/1 should turn into www.app.com/user/1/posts I attempted to ...

reactjsreact-router

The pagination component in React with Material-ui functions properly on a local environment, but encounters issues when deployed

Looking for some assistance with a persistent issue I've run into. Can anyone lend a hand? [x] The problem persists in the latest release. [x] After checking the repository's issues, I'm confident this is not a duplicate. Current Behavior ...

javascriptreactjspaginationmaterial-uinext.js

React SVG not displaying on page

I am facing an issue with displaying an SVG in my React application. Below is the code snippet: <svg className="svg-arrow"> <use xlinkHref="#svg-arrow" /> </svg> //styling .user-quickview .svg-arrow { fill: #fff; position: ...

javascriptreactjssvg

Keep your filter content up-to-date with real-time updates in Vue.js

I am facing an issue with a markdown filter where the content of component.doc is set to update through a websocket. Despite updating the scope's component, the filtered content remains unchanged. Is there a way to dynamically refresh the v-html in t ...

javascriptvue.js

Guide to Returning a Unique Error Message when Verifying Credentials with Next-Auth v5.0.0-beta.5

Currently, in my nextJs app, I am using [email protected] for user authentication. I am looking to implement custom error handling for failed user authentication with credentials. In the past, I was able to achieve this functionality with the followi ...

reactjsnext.jsnext-authapp-router

Implement seamless content loading using jQuery, eliminating the need

Is there a reason why this piece of code isn't working for me? I'm trying to load HTML content using jQuery and followed the instructions from this tutorial: Here's how my HTML looks: <div id="icon"> <a href="http://localhost/ ...

javascriptjquery

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. S ...

javascripthtmlcssasp.netkendo-ui

Tips for sending multiple queries in Next Router

Working with next.js and next-router, I have two data parameters that need to be passed. One is entity_id and the other is url_key. data={ entity_id: 5, url_key: 'canada/ontario/store_five' } Currently, I am able to pass one url_key like ...

reactjsreact-routernext.jsnext-router

using a function as an argument in the map method within a React component

I have a challenge where I am trying to display blog posts retrieved from my database. However, for each item, I also need to execute a download image function. I attempted to include the function within the .map function but encountered some errors. I am ...

javascriptreactjsnext.js

How can I pass standard HTML as a component in React?

I need help creating a Higher Order Component (HOC) that accepts a wrapper component, but allows me to pass standard HTML elements as inner content. Here is an example of what I want to achieve: type TextLike = string | {type,content} const TextLikeRender ...

javascriptreactjsnext.js

Using Node.js to render when a task has been completed

I am currently developing a Node.js Application using Express.js. One of the challenges I face is rendering data from another site on a page using Cheerio.js. While this in itself is not an issue, I struggle with determining how to render the data once the ...

javascriptnode.jsexpress

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

jquerycssjsontwitter

Using jQuery to arrange information from an API into a table

Currently, I am in the process of learning jQuery as it is a new concept for me. I have attempted to make a request to an example API and received an array of objects that need to be listed in a table. However, I am facing difficulty in sorting it within t ...

javascripthtmljqueryjsonajax

Exploring the power of Angular 2 Directive scopes

When it comes to Angular2, Directives do not come with "scopes", unlike Components. However, in my specific case, I require a Directive to establish a scope. Take a look at my App component - it contains an HTML template, and the foo directive could potent ...

javascriptangularangular2-directives

I am unsure where I may have overlooked a crucial key prop. I have created unique uuids for the TableCell keys, while utilizing row.id for the row keys

I'm running into an issue with this code snippet, specifically receiving the following warning: Each child in a list should have a unique "key" prop. Check the render method of AllPersonnel... at TableRow As a result, the table cells are ...

reactjsmaterial-uiuuid