My mobile (sub) menu is too long. The menu is sticky on top, so it 'jumps' back to top and thus a few sub menu items can not be selected. Please see www.focks.nl
Is it possible to disable sticky menu only for mobile?
Or can I set the line height only for mobile to 50%?
Hope you can help me out :-)
Martin
Related
I've been requested to give the react-multi-carousel component a free scroll ability for mobile using react-multi-carousel.
So when a user swipes (L or R) on mobile, the default scrolls to the next carousel item.
The default seems to lock that next carousel item to the left border of carousel-wrapper
The ask is to create a fluid scroll that doesn't lock into any carousel. So if a mobile user scrolls with intention, the carousel could very well scroll to the end of carousel items.
I assume the ability to achieve this lies somewhere in the slidesToSlide: num configuration but can't seem to get working.
https://codesandbox.io/s/react-multi-carousel-demo-forked-5th2b?file=/src/simple.js
I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.
To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.
My questions:
Is there a way to make the tabs wrap rather than having the scrolling effect?
Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?
Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.
Thank you
Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.
There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:
tabBar: {
layout: {
overflowHandler: 'menu'
}
}
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 4 tab in a tabs component and a side menu. If I scroll horizontal the 1st tab from the left side, the side menu tends to appear but it doesn't. However the 1st tab moves horizontally from left to right and white blank screen is seen.
Have a look at the video here.
Using tabs with a side menu is not a good idea. You could try adding a fifth tab and placing commands there instead of a side menu.
It will look the same and it should work better than a side menu.
hope this helps and good luck with your development :)
The tab in cn1 works pretty good. But it could be better. I've 2 tabs. When I am in left tab, its content should not move when swiped from left. If it is swiped right, the right tab appears which is fine. Again if I swipe from right in the right tab, its content should not move since there's no other tab in its right.
One more thing, the movements of tabs are not smooth enough. It stops a bit before new tab appears completely.
Have a look at the video here
Tabs display iOS style tensile behavior by default. They let you swipe to an area where you have "nothing" so you can see it's empty. If they just blocked that motion you wouldn't know there is nothing there in the hidden tabs mode.