I'm trying to use CSS with 'position: fixed' to create a dialog box. When I 'open' the dialog box in chrome I can see the 'dialogbox' in the dropdown where the markup of the fixed element is, but it is not rendered in the way I expect.
Chrome shows that the dialog is there and the position is correct, but the rendering is wrong.
I'm expecting fixed elements to be drawn relative to the viewport regardless of where they are in the DOM, and the z-index is larger than all other elements. What am I doing wrong?
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 vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:
//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>
//via the regular api:
new MapboxGL.Popup()
.setLngLat([0.0, 0.0])
.setHtml(<h1>this text is also unselectable</h1>)
.addTo(map);
//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
.setDOMContent(placeholder)
.setLngLat()
.addTo(map);
In the Mapbox examples, their text is selectable. Any idea why mine isn't? Thanks.
I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:
Use the same class they use in the examples for the content: mapboxgl-popup-content
Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:
Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content
Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.
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.