We want to put multiple pictures on a carousel with multiple sizes using swiper and the centered slide. Unfortunately, each picture stays on one slide by slide.
We tried to use flex shrink, changed the space between to get multiple pictures on one slide and many parameters trying to get things done. But when we come on the summary of each articles which includes some pictures, some bugs still there at the onClick.
We just want to know if it's possible to reach thing out.
Thank you
So I have the following question which I believe is quite valid.
So Box and Grid are Layout components which you are suppose to add other components inside those as far as I'm aware. However sometimes Box does the job for me and sometimes is Grid and SOMETIMES I use both at same time.
This question came to mind to me after I was trying to CENTER a component, so in this example when I use GRID I can center the component in the middle of the screen without any issues:
Grid Example:
ExampleA-Sandbox
Box Example:
ExampleB-Sandbox
I know I can just simply add pl={number} to the box component and then I can move the box to a desire location but that's not the point.
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
You can see the picture I attached, before the line "List of schools", it didn't show all of the contents on my span-label. Please help me to how to solve this problem.
Make sure one of your roots isn't a flow layout and that the UI is based on a scrollable box layout Y to give it the right size.
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.