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
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
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
I incorporated an accordion in my sidemenu as seen in the image. The Home and Logout are not in the accordion, so their height differs. I request for help on how to reduce the height of the accordion header.
I also request for help on how I can remove the border of an accordion. I tried setting the border to empty in the accordion's UIID but it didn't work.
You can reduce the padding and font of the elements in the accordion to reduce the height of the accordion. This also lets you control the border.
You can find the applicable UIIDs in the component inspector tool. Specifically UIIDs to look at would be AccordionArrow and AccordionItem.
I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen
I have this absolutely positioned icon <a>, hence its parent <li> is relatively positioned. The list items are in a scrollable <div>.
Problem is except for these <li>s other elements in the div are scrolling along with the height of the div, whereas the <li>s stays fixed whereas I expected the <li>s also to be scrolled along inside the div.
Tried overflow:hidden, zoom:1, doesn't work.
Here is the jsfiddle link
Found the answer from this question, https://stackoverflow.com/a/13996983/1531426
I thought I searched enough :(
Adding position:relative;overflow:auto; to the container div which has the height, fixes the issue.