I Use the Lightbox 2 of Lokesh Dhakar.
All Options work well and the result is looking good. but my problem is, the overlay is only inside the iframe, not filling the page.
can someone help ?
Related
My slider component disappears when it should pin to the page. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock. I cannot get it to work though, my content keeps disappearing. Here is a minimal demo: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx
Here is also a link to the final webpage: https://juliaweber-git-preview-inzn.vercel.app
Any help is greatly appreciated!
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
How can I make the paper-drawer-panel element behave like this site?
https://home-assistant.io/demo/
I want to be able to open and close the drawer panel even when the page is large. I also don't want there to be a drop shadow over the page when the drawer is out and the page is large, and I want the drawer to expand into the page and not overlay the "main".
I know about "forceNarrow" but it doesn't acheive what i want because it overlays the rest of the page when the drawer is active and it casts a drop shadow over the "main".
I just tested this on one of my sites with a drawer and, when I set forceNarrow to true and back again, I don't get a backdrop or anything, it is just as in the site you linked.
I am sure you know this, but for someone else stumbling on this the code would look something like this:
var drawer = document.getElementById('drawer');
drawer.forceNarrow = true;
drawer.forceNarrow = false;
Could you link to your site, or post some code here?
Edit: Here is an example
I have a login form in popup in header of my page and below it i have a navigation when i have open the popup the navigation links are showing above the popup. I have set the z-index of navigation 1 and z-index of popup is 10 but is not working in IE7. Anyone can help me
It is a known bug of IE7. Doesnt work in IE7 and IE8(compatibility view). Work around for this is: You need to check the hierarchy. Both pop-up and should be in the same stacking context/or you can say must have parent child relationship. and keep the parent/popup as relative and the z-index should be greater than the child.
you can also check the following link from where i got its example
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
You ll need to set the popup position as relative, IE reads z-index only when its position is set to relative, just give it a try