Recently, I encountered an issue with my list items overlapping in the latest version of Chrome 89
To display the list, I am using flex-direction: column-reverse;.
Does anyone have any suggestions on how to fix this problem?
Chrome 89 https://i.sstatic.net/qqmU4.jpg
Chrome 88 https://i.sstatic.net/APAEg.jpg
Instead of using flex: 1, I replaced it with flex-grow: 1 in the container, which ended up resolving the issue for me.
I'm not certain if this is a permanent fix, but for now it did the trick.
display: flex;
// flex: 1;
flex-grow: 1;
overflow-y: scroll;
flex-direction: column-reverse;
I encountered a similar issue where new elements added to the container would overlap, creating random paddings between them. I tested it in Firefox and did not experience any problems.
After trying different solutions, I discovered that the list would render properly without overlapping if the container width was changed (although I can't say for certain if this triggers an internal re-render in Chromium).
To address this issue while waiting for the Chromium/Chrome team to fix the bug, I implemented a temporary solution using JavaScript. This involved adjusting the element's width by one pixel and then adding it back in the next render cycle.
Please note: This is just a quick fix to prevent user frustration in production until a permanent solution is found.
// Call this function when new elements are added to the flex container
function fixChrome89Bug() {
if (!window.navigator || !window.navigator.userAgent) return;
if (window.navigator.userAgent.indexOf('Chrome/89') !== -1) {
const element = document.querySelector('your element reference');
element.style.width = `${element.offsetWidth - 1}px`;
window.requestAnimationFrame(function () {
element.style.width = '';
});
}
}How can I create an input box that automatically wraps text and shrinks to fit its size? What CSS property should I use for this? I attempted to use width: auto to scale it, but it didn't work as I expected. ...
Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the fiel ...
Hey there, I'm experimenting with various methods to extract content from a PDF file but so far nothing seems to be working for me. Even when I try using pdf.js, it shows an error and I can't figure out why. This is the approach I've been tr ...
Currently, my login template is being served by Django templates without any React components. However, I have integrated ReactJS and created routes, components, and pages that are fully based on React. Now, I am figuring out a way to allow users to log in ...
Code Testing: import { render, screen } from "@testing-library/react"; import App from "../App"; test("The 2nd button is rendered", () => { render(<App />); expect(screen.getByRole("button", { name: &qu ...
Recently, I started my journey to learn how to use ReactJS and I successfully installed react-router-dom. Excited to implement it, I decided to begin by setting up my App.js file as follows: function App() { return ( <Router> <div> ...
I'm having trouble understanding this section of the code: this.setState({ usernameValid, errorMsg }, this.validateForm); When we're updating usernameValid and errorMsg in the state, what does this.validateForm actually do? It seems to be writte ...
Struggling with this frustrating piece of code for hours now. I've lost nearly 2 hours trying to get it to work properly. My goal is to center an input field vertically and horizontally inside a horizontal bar. Take a look at the simplified code belo ...
I've been working on fetching data from GitHub using getStaticProps to improve performance, but I keep running into this error. Even when I try to do a "console.log," I can see that the array is being returned, but I am unable to map it. Any idea what ...
Hey there, I'm currently working on dynamically loading icons from MUI using the following code snippet: import React from "react"; import * as MuiIcons from "@mui/icons-material"; console.log("MuiIcons: ", MuiIcons); co ...
Can the row count of a text area in materialize css be initialized with a specific number using "rows='20'"? How can we adjust the default row count? Here is an example of code that attempts to set the row count but doesn't work: <div c ...
Initializing a component's state to null outside of the constructor results in the state having the type never in the render function. However, when the state is initialized within the constructor, the correct type is maintained. Despite many StackO ...
This is the typical appearance When I scroll up, a space appears at the top of the navbar. The same issue occurs in the footer as well. I used background color in style.css for reference. How can I resolve this problem? I need the components to stay fixed ...
Please explain how I can modify properties in a child element by clicking on a block !!post && post.map((item) => <div key={item.id} onClick={(e)=>onVideo(e)}> <video width="310.44" height="458" style ...
When using Next.js, I can access my application on localhost:3000, and also access my API from localhost:3000/api/hello. I'm curious if there is a way to achieve this same setup with React.js and another framework like Express.js? If Next.js is not ...
I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...
I'm currently utilizing Spring MVC's <form:radiobuttons> to showcase radio buttons: <form:radiobuttons path="selection" items="${arraySelection}" /> The issue I am facing is that it is displaying the radio buttons in a horizontal la ...
Tech: This webpage is built on an Asp.net Webforms application using a master page and an ajax accordion control. All elements for the page are contained within a designated placeholder. The design of the webpage includes an ajax accordion with multiple A ...
As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...
Here is My jQuery Code: $('a#cusine1').on('click', function(){ $('div#product-list').html("LOADING..........").show(); $(".ccid").addClass("0"); document.getElementById("ccid1").className="acti ...