The calendar from my datepicker always seems to pop up behind the Card component

When utilizing a Shamsi Calendar within a Material UI Card, I encountered an issue where the calendar appears behind the card. I attempted adjusting the z-index of the Calendar and placing everything inside a div with another z-index, all while ensuring they both have a relative position. Unfortunately, this solution did not resolve the problem.
To better illustrate my dilemma, here is a simple example showcasing the issue: Sample Code
Upon interacting with the DatePicker, you can observe that it gets obscured by the second Card element. This seems to be related to Material UI, as the Calendar component should have proper layering considering its widespread use. Perhaps there is something specific about styling components in Material UI that I am overlooking, prompting me to reconsider my approach when working with these components?

cssreactjsmaterial-ui

Answer №1

The reason behind this issue is related to the CSS of Material-UI's Card, which includes overflow: hidden. As a result, when the date picker is displayed within the card, it gets clipped at the bottom edge.

In a revised version of your sandbox that I have worked on, I changed the overflow property to visible. This adjustment allows the date picker to be fully visible, although it may have some unintended effects on the Card component.

This particular issue primarily affects the behavior of the date picker. A more reliable solution would involve rendering the popup section using a portal, instead of directly attaching it after the date input. By utilizing the position of the date input, the popup's position could be appropriately set. Although implementing this approach may be more complex than the current setup, it would eliminate any adverse effects on the date picker caused by the styling of its container.

Answer №2

The issue appears to stem from the CSS package itself. Consider changing the position in .Calendar from relative to fixed.

Create a duplicate of the CSS file in your src directory and import that copy instead of relying on the package. Then, adjust the following:

.Calendar {

  --cl-color-black: #444444;
  --cl-color-disabled: #d4d4d4;
  --cl-color-error: #ff2929;
  --animation-duration: 0.4s;
  font-size: 10px;
  background: #fff;
  box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07);
  border-radius: 1em;
  position: relative;
  user-select: none;
  padding-top: 3.2em;
  display: flex;
  flex-direction: column;
  width: 33em;
  max-width: 90vw;
  min-height: 36.7em;

}

to

.Calendar {
...
  position: fixed;
...
}

within the react-persian-calendar-date-picker/lib/DatePicker.css file provided by the package.

If the left section is not displaying properly, it may be due to the button being intended for the center of the datepicker. You have the option to reposition the entire component or remove the margin and transform properties from the .datepicker style.

.DatePicker__calendarContainer {
  position: absolute;
  top: calc(100% + 2em);
  /* left: 50%;                           Comment these out
  transform: translateX(-50%); */         /*Comment these out*/
}

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

When the width of the element is set to 100vw, it disrupts the

I'm attempting to expand a sticky element to fit the size of the screen. Here is the HTML code I am using: .large { height: 200vw; width: 200vw; } .header { left: 0; top: 0; color:white; position: sticky; width: 100px; height: 10 ...

htmlcss

Asynchronous data fetching adding two entries to an array

I've been experimenting with making API calls for Rick & Morty using fetch and async arrow functions, but I've run into an issue where the elements are being added to my array twice. I've tried calling the function both with and without useE ...

reactjstypescriptasync-await

Discover the best practices for utilizing the useLocation hook in React Router DOM v6

<div className={`alert alert-${showAlert?.color} alert-fixed fade ${ showAlert ? "show" : "d-none" }`} role="alert" style={{ width: "450px", right: "1%", top: &q ...

reactjsreact-router

Guide to setting up the Next Image component in Storybook

While attempting to follow this tutorial, I encountered an issue where the CatCard component using the NextJs Image component could not be loaded. import Image from 'next/image'; import styles from './CatCard.module.css'; export interf ...

reactjsnext.jsstorybook

My Next.js application does not display an error message when the input field is not valid

I've recently developed a currency converter application. It functions properly when a number is provided as input. However, in cases where the user enters anything other than a number or leaves the input field empty, the app fails to respond. I aim t ...

javascriptreactjsnext.jserror-handling

Issue Encountered While Deploying Next JS Application Utilizing Dynamic Routing

I just finished developing my Personal Blog app with Next JS, but I keep encountering an error related to Dynamic Routing whenever I run npm run-script build. Below is the code for the Dynamic Route Page: import cateogaryPage from '../../styles/cards ...

javascriptreactjsapideploymentnext.js

Material-UI React is unable to identify the `underlineStyle` property on a specific HTML element

I tried implementing a custom style to change the underline color of a material-UI TextField element, following an example I found. http://www.material-ui.com/#/components/text-field Unfortunately, when I attempt to add my own styling, React does not rec ...

javascriptreactjsmaterial-ui

Setting up webpack with a live server for your project is a crucial step

I am a beginner with webpack. I successfully configured this module for localhost, but now I need to host it. However, when I changed the IP address in the webpack.config.js file, it stopped working. Below is the content of my webpack.config.js:</p> ...

node.jsreactjsexpresswebpack

finding the source file or code where a particular html element is being generated

In the HTML file I have, there are multiple JavaScript files added. Whenever I run the HTML file, a title tag is automatically created in my HTML file. I do not want this title tag to appear in my HTML file. How can I prevent this from happening? Or how c ...

javascripthtmlcss

Application of Customized Bootstrap CSS Not Successful

I have noticed that my custom CSS file does not override the bootstrap.min.css unless I include the !important tag in the class. Specifically, when I try to change the color of my background header. .bg-grey{ background-color:#333 !important; } The ...

htmlcssbootstrap-4

What is the best way to layer div elements using Bootstrap 4?

I'm looking to achieve a similar effect with overlapping elements as shown in the attached file. What would be the best code approach to achieve this? I am currently using bootstrap 4.6.2, can it be of assistance? Thank you for your guidance. Althou ...

cssbootstrap-4

I'm interested in implementing a cooldown feature on my button, but I'm not quite sure how to go about

Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details. import "./contactpa ...

htmlcssreactjs

What is the best way to increase the size of an element within a row if it does not have any other siblings?

Here is the code snippet for your reference: https://codepen.io/Kezhich/pen/pXNevv Inquiry: How can I ensure that the input-group expands to the full width of the container when there is no round-button present? I have attempted using flex-grow but it d ...

htmlcssbootstrap-4flexboxbootstrap-grid

When attempting to access the submenu in Bootstrap 5 dropdown, it does not slide down as expected upon clicking

Why isn't the rest of the menu expanding downward when I select a submenu? The submenu is already selected, but it hides other items. How can I make it expand downwards? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcssdrop-down-menubootstrap-5

The circular loader in reactstrap Spinner is not displaying as expected

I am attempting to display a loader using the reactstrap (v^7.1.0) Spinner component, but nothing is appearing on the screen. When I inspect the page in Chrome, it seems that the CSS for Spinner is not present. https://i.sstatic.net/uVsRn.png Does anyone ...

cssreactjsreactstrap

When the content in one box exceeds the content in the other, one box is considered to be overfilled

For the image, click here: I am facing an issue with boxes stacking on top of each other. When one box has more content, it overlaps the other. CSS: #destaques_container{ margin: 0 auto; } #destaques_container_dentro{ float: left; margi ...

htmlcss

I keep running into an issue whenever I attempt to import material ui icons and core - a frustrating error message pops up stating that the module cannot be found

[I keep encountering this error message when attempting to utilize @material-ui/core and icons] `import React from "react"; import "./Sidebar.CSS"; import SearchIcon from "@material-ui/icons/Search"; const Sidebar = () => { return ( <> ...

javascriptreactjsreact-reduxreact-routermaterial-ui

html querying an iframe

Here is a scenario that I have encountered: I want to display a top bar on an HTML page, followed by another HTML page dynamically included at the lower part of the page using an iframe. The goal is to prevent scroll bars for the window and only show a sc ...

htmlcss

Tips on storing the state of column visibility in a Material UI data grid

I have a basic data table where users can hide or show specific columns. I need to save the column state when the page reloads, such as when changing languages. Take a look at this simplified example. Hide a column and then click the button. While the col ...

reactjsmaterial-ui

When I upgraded my "react-router-dom" from version "5.2.0" to "6.14.0", I encountered a warning stating "No routes matched location"

After updating react-router-dom from version "5.2.0" to "6.14.0", I encountered a warning saying "No routes matched location." Initially, I received an error stating that "<Route> is only meant to be used as a child of <Routes>, not rendered d ...

javascriptreactjsmaterial-uireact-router-dom