Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent button.
Current:
https://i.sstatic.net/F78NT.png
Desired:
After some trial and error, I came up with a solution that involved tweaking the JSX element tree by creating a specially styled wrapper div:
const appBarHeightCSS = css`
min-height: 56px;
@media (min-width: 0px) and (orientation: landscape) {
min-height: 48px;
}
@media (min-width: 600px) {
min-height: 64px;
}
`;
const StyledButtonContainerDiv = styled.div`
${appBarHeightCSS}
display: flex;
justify-content: center;
align-items: center;
color: ${theme.palette.grey['400']};
`;
Then, I passed the div element using a reference:
const accountButtonDiv = React.useRef<HTMLDivElement | null>();
...
<StyledButtonContainerDiv ref={accountButtonDiv}>
<ToolbarButton
anchorRef={accountButtonDiv}
Menu={AccountMenu}
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
>
<AccountCircle />
</ToolbarButton>
...
This was all to enhance the custom ToolbarButton component:
export default function ToolbarButton(props): JSX.Element {
const { anchorRef, Menu, badgeContent, children, ...defaultProps } = props;
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleMenuOpen = () => {
setAnchorEl(anchorRef.current);
};
return (
<>
<IconButton {...defaultProps} onClick={handleMenuOpen} color="inherit">
<Badge badgeContent={badgeContent} color="secondary">
{children}
</Badge>
</IconButton>
<Menu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
</>
);
}
Managing different content in my .env files is crucial as I work with both next.js and node.js. The settings vary between development and deployment environments. During development: DOMAIN_URL=https://localhost:3000 GOOGLE_CLIENT_ID='abc' For ...
I am currently working on a React App that utilizes Material UI components. When the button is disabled, it appears as gray and opaque by default. However, I want it to reflect my theme's primary color while still being opaque. This is the approach ...
I am working on a Leaflet map that includes a button (utilizing the Easy Button plugin from https://github.com/CliffCloud/Leaflet.EasyButton). Upon clicking this button, a route layer is added to the map using the Leaflet Routing Machine plugin (https://gi ...
When the timer ends, I want to display a "Not active" message instead of "Active". The timer and code appear to be functioning properly until this point $('.clock').eq().countdown(inputDate). After this line of code, the function stops working an ...
I am currently utilizing Foundation 5 and am aiming to create a unique DIV layout on a mobile display: -------------------- | A | -------------------- | B | -------------------- | C | -------------------- | ...
Recently, I began using React and Material UI but have encountered an issue with modifying the color and font of text in the table header. Despite attempting to override it, the default style remains unchanged. It has been mentioned that utilizing "heade ...
Improvements in ES6 support can be seen () and it seems like the upcoming version of Chrome will support more features than Babel currently does. Is there a way to modify the toolchain so that only JSX is transformed? Currently, Babel transforms everythin ...
I am currently working on a small website project for one of my lessons. The task involves selecting items from a list and using two arrows to navigate to the item above or below the current selection. Here is an example: https://i.stack.imgur.com/FxZCN. ...
The website I am currently working on looks great in Chrome, Firefox, Opera, and Safari on both Mac and Windows. However, it is not displaying correctly in IE 7 & 8. The header should appear like this: But in Internet Explorer, it's showing up like t ...
After experiencing an issue with the background image not fitting the content properly at different resolutions, I attempted to divide the background into three parts and automatically stretch the middle section to fill the space between the top and bottom ...
I am working on a grid container and I want to change the background color of the second row within it. Check out my Fiddle This is the HTML markup: <div class="totalContainer totalContainer__space"> <div class="totalContainer__ ...
Currently, I have a JSON file that is generated dynamically and it contains match information along with a unique id. This JSON data is categorized into live, upcoming, and recent arrays. Being new to Javascript, I am unsure about the best approach to crea ...
Currently, I am utilizing the Remix Form element to display my form with various input fields. When there is a server-side validation error, the entered text in the fields remains, as expected. However, upon successful submission of the form, I would like ...
I am facing an issue with changing the background color when in dark mode. Here is my initial code snippet... export const myThemeOptions: ThemeOptions = { palette: { mode: "light" as PaletteMode, primary: { main: ...
Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...
In my current project, I am developing a system that handles multiple user types with varying levels of access to interact with the database resources. It is essential for me that these resources are displayed in real-time to ensure a seamless user experie ...
I'm currently working on a single-page website and looking to show content based on the menu item clicked without refreshing the page. I'm attempting to achieve this using jQuery but seem to be running into some issues. Can someone please help me ...
I find myself in a situation where I have two functions that do very similar tasks, but on different elements. Initially, I only anticipated having these two functions, but now I realize I'll need to add more. This will result in a lot of repetition. ...
I am faced with a situation where I have <div class="test">hello everyone</div> and the challenge is to replace each instance of "hello" within this div with <h1>helllo</h1> In my attempt, I used $(this).text().replace("hello" ...
In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...