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

"The JavaScript code that functions perfectly in the browser console, but fails to execute when running in the actual

I'm encountering an issue with a simple piece of JavaScript code that seems to only work when executed in the browser console: <script> $(".hopscotch-close").click(function () { alert("Hi"); Cookies.set("tourState", "closed" ...

javascriptjqueryjquery-plugins

React-awesome-query-builder is facing compatibility issues with MUI v5, causing conflicts between the two

react-awesome-query-builder was developed using material v4 which caused style conflicts with MUI v5. However, when I removed MaterialConfig, everything worked perfectly with MUI v5. Thank you in advance. How can I integrate react-awesome-query-builder w ...

reactjsmaterial-ui

Remove interactive data tables from the onclick event

I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...

jqueryhtmlcssdatatabledatatables

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing. The width values in pixels need to be manually adjusted based ...

javascripthtmlcss

Creating a process to automatically generate an input field upon the selection of checkboxes

Is there a way to automatically generate a text field for each checked box in a dynamically changing checkbox list? Below is my code snippet: <div> <label> Products </label> <li ng-repeat="item in INDproducttypes"> ...

javascripthtmlangularjsangularjs-ng-repeat

Converting XML to JSON using UTF-8 Encoding

I am currently working with xml2js to convert an XML feed into JSON format. However, I'm facing an issue where certain characters like Æ, Ø & Å are displayed as expected in the XML but appear differently after parsing. After parsing, I receive ...

javascriptjsonnode.jsexpressxml2js

Add an input element to a form fieldset by employing vue

In my form, I have a staged approach with 3 fieldsets that only appear when the "Next" button is clicked. Now, in the third fieldset, I need to add input elements based on keys extracted from an external json object. Data: data: () => ({ c ...

javascriptvue.js

Is there a way to delete added information using a trigger that has been inserted through ajax?

I created a function in jQuery and Ajax to add information from a separate PHP file to another file. Let's name the destination file "Homepage" and the file with the data "Template". Here is the function I used: var box = $('#infoPageContainer& ...

javascriptphpjqueryajax

Spacious width that doesn't require a horizontal scrollbar for navigation

My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrap ...

css

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

What could be causing my popup window to not display on top of all other HTML elements?

.box { width: 40%; margin: 0 auto; padding: 35px; border-radius: 20px/50px; background-clip: padding-box; text-align: center; display: inline-block; } .button { font-size: 1em; padding: 10px; color: #222; border: 2px solid #06D85F; ...

htmlcss

Obtain the content enclosed within parentheses using JavaScript

const str = "(c) (d)"; I need to separate the given string into an array The result should be [0] => 'c' [1] => 'd' ...

javascriptjquerysplit

Is there a way to retrieve the id of the parent element containing the PHP code using PHP?

I need to verify if the php code being executed is located within a div named "parent2". Currently, I am customizing a Joomla HTML override and attempting to place one module in two different positions. If the module is contained within parent2, then spe ...

phphtmljoomla

Upgrading from synchronous $.ajax() to AngularJS $http or vanilla JavaScript (XHR) for asynchronous calls

Presented below is a function that I am currently working with: function getDataAvailablity() { var isDataAvailable; $.ajax({ url: 'http://someurl/data.json', async: false, dataType: json }).success(function() ...

javascriptjqueryajaxangularjs

Acquiring HTML form information in ASP.NET controller

Currently, I have a view that includes an HTML login form and I am working on passing the form values to a controller via post. My goal is to display the user's username using the Content method once the form is submitted. However, I am facing an issu ...

c#htmlasp.netformsasp.net-core-mvc

Leveraging jQuery plugins within an AngularJs application

I am currently trying to implement the tinyColorPicker plugin from here in my Angular app, but I am facing difficulties with it. An error message keeps appearing: TypeError: element.colorPicker is not a function In my index.html file, I have included th ...

javascriptjqueryangularjs

The variable "vue" is not properly defined within the instance, yet it is being called

I'm currently working on a Vue app and encountering an issue. The onScroll function is working correctly, but when I click the button component to trigger the sayHello function, I receive an error message. The error states: "Property or method &apo ...

javascriptvue.js

Display additional images with "Show More" view

I'm looking to create a view similar to the one shown in this image: https://i.stack.imgur.com/AZf61.png Within my FlatList, all the data is being populated including these thumbnails. These thumbnails are stored in an array of objects where I retri ...

javascriptiosreactjsreact-native

Utilizing an Async API call from a separate page and passing it as a component input

I recently set up an asynchronous API fetch in one of my .JS files and then invoked it from another JS file to output the result using console.log. (Is there a more efficient method for achieving this?) Now, my aim is to utilize the fields of the response ...

javascriptreactjsfetch

Expand and enhance your content with the Vue Sidebar Menu plugin

Recently, I integrated a side-bar-menu utilizing . My goal is to have a sidebar menu that pushes its content when it expands. Any suggestions on which props or styles I should incorporate to achieve this effect? Below is my Vue code: <template> ...

javascriptvue.js