I'm using react-big-calendar with react-sidebar and if the sidebar opens, all the area is covered by overlay but some elements are visible on the top.
What can be the problem?
P.S: I've also given the z-index to both but nothing worked for me!
react-big-calendar with react-sidebar
I don't know the particulars of react-sidebar, but it's definitely a z-index issue. Does react-sidebar provide a Portal option for it's overlay (I'm not seeing one)? RBC is dynamically writing out the events to the page, and using 'auto' z-index, so if your overlay is defined first (like the sidebar is on the left, and calendar on the right), then that's what's happening.
Related
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
I have a list of material ui cards that are in a react-beautiful-dnd list. I want to be able to move cards from one list to another and reorganize them (this is already done). I also want to be able to click, for example, the lower right corner of a card and resize it however I want. Is that possible? If so, how? I have tried wrapping the cards in thing like react-grid-layout objects, but with no success, while my react app still comes up the cards are not rendered.
Thanks in advance for any help.
I found a simple solution and thought I would share. All I needed to do was wrap each material UI Card in a ResizableBox from react-resizable. Then after that, so the dimensions of the Card would follow the dimensions of the ResizableBox, I used material UI makeStyles to apply a width and height of 100% to the Card. And that was it.
Sencha Touch 2.4 has this new toast class(Ext.Toast), which looks nice. But, by default, the location of the toast is centered in the viewport. Is there any way I can push it towards the bottom?
I looked at the top config, but it doesn't work well. (Pushes it down, but it's not centered horizontally now).
Tried a combination of top and left configs, but it's not perfect. I don't seem to find any hints in the docs.
Basically, I need to display the toast around of 70% of the height, and it should be centered horizontally in the viewport.
Not ideal but the following css will do it. Just change the number depending on high high you want it.
.x-toast {
top: -150px;
}
I've created a plugin that can create toast messages similar to Android style at the bottom of the screen.
I've also faced this problem I found the solution.You can also find it by the below link.
sample toast with different position and animation
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.
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