I have a custom component for my ag-grid header, of a clickable icon that opens a menu. This menu opens, but most of it appears behind the rows below the header. I know there is a solution for a custom cell that has a popup menu, where you add "overflow: visible" to the cell, and adjust z-indexes for the cell and the other cells. I tried that with the header cells but it still is not working. I couldn't find a similar question asked anywhere else. Does anyone know how to fix this?
This is what it looks like
Here is my AgGridColumn:
<AgGridColumn headerComponentFramework={(params) => renderKebabMenuHeader(params)} minWidth={160} headerName="" field="id" cellRenderer="kebabMenuRenderer" cellClass="kebab-menu-cell cell-vertical-align-text-right" headerClass="kebab-menu-cell cell-vertical-align-text-right"/>
renderKebabMenuHeader() simply returns a JSX element of my menu.
I ended up not using the ag-grid header at all for this. Instead I made a div with position: absolute instead
Related
I created a data grid using MUI exact demo code and noticed that the "Go to next/previous page" buttons in the footer are laid out vertically rather than horizontally as seen below:
Any idea how can I fix this?
I don't think it is an MUI issue. My guess is that you are overriding all button styles in a global css file, causing the page navigation buttons in MUI DataGrid to be distorted.
I am making a react js application. Within this application i understand i have a tag inside a tag like so:
<a><a></a></a>
I have located the issue in hand as you can see in these pictures. But I am unable to fix the problem. If anyone could give me a hand i would be very thankful.
The commented out code is where i am having my issue. As you can see i have a Link tag and inside that Link tag i have a Dropdown tag. The Dropdown is causing the issue but it is needed for my application.
Edit:
I understand an a-tag cannot live inside another a-tag, i have tried a few different ways to to get the full use of the dropdown and the link. As you can see in these new pictures i am trying to get the card to be a link to a group while also having a dropdown with two options, Edit and Delete.
This is what the card looks like, the three dots is the dropdown menu. when this card is clicked it brings me to the "/group/manage/" page.
This is what the card looks like with the dropdown menu clicked.
I recommend restructuring your component in a way similar to this:
<Card>
<Link>
{mainContent}
</Link>
<Dropdown>
{dropDownItems}
</Dropdown>
</Card>
Then use CSS to position the dropdown to the top right, on top of the main content.
I'm trying to set a downshift component inside a dialog body component, playing with zIndex doesn't work, and suggestion always appears underneath.
Is there a way to show downshift suggestion on top while using with a dialog ?
Here's a dialog with a downshift component inside (taping "a" inside "search a country" show the hidden suggestion) as an example of this issue :
https://codesandbox.io/s/q3lllwr08j
I also faced a similar problem. Hope this is what you are looking for: codeSandboxLink
I just added a class and added it to Dialog and DialogContent. The class name is dialogPaper. Look for the class in styles.
The class is:
dialogPaper: {
overflow: "visible"
}
Find an easy way to fix by just setting dropdown css by position: fixed
I guess the problem is not with the Z-Index. It's just not enough space to show the content of the dialog. I tried this solution with wrapping the content of the dialog with Paper element and set the height and width
i have the following problem:
I have a container for my header. This container has a fixed size. Then comes my container for the content. This container has the attributes:
position=absolute
and
overflow-y=auto.
The problem is:
If I place a popover inside that content, this popover is cut off. If I add the property append-to-body="true", it will shown correctly at this point. But If i scroll, the popover will stay on the same position.
Does anyone has a good solution for that?
My plunkr: http://plnkr.co/edit/MgetwTPofYwQalEDX67u?p=preview
See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.