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
Related
Wondering how I can achieve this scrolling behavior like Instagram has on their profile pages with React-Native? More specifically, how I do limit the scroll indicator to just the bottom section rendering the posts?
Instagram scroll behavior vs what I have
So far these are what I've tried with no success:
Using a FlatList with a header component (both sticky and not).
Using a SectionList, with a FlatList in one section, but if set showsVerticalScrollIndicator={false} on the SectionList, the FlatList also does not display the scroll indicator, no matter its value.
Also tried using Animated (react-spring) values and translating components based on scroll offset. This is the closest I've been, but it had more of a parallax effect which isn't really what I'm aiming for. Also, the animation was very choppy.
Been trying my hand at this for a couple of days now so any help is appreciated. Thanks!
Basically title. I want to wait for the cells that are going to visible to be rendered before scrolling to the position because right now i am getting a lot of blank area when scrolling fast.
Can you try to optimize your cell list rendering first? FlashList has this performance issue when the app renders heavier content (videos, high-resolution images,...).
Replacing FlatList with Shopify's FlashList should fix the problem - https://shopify.github.io/flash-list/
I'm using reactjs and I want to split my grid area in to 2 fields. I tried but couldn't find any better solution. Do anyone know how to do that?
Here is the image and it shows how do I want to make the divided components
this image showing area is also in a grid(half of the screen). If the question is not clear, please inform.
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 chat page in a ionic project and like most chat apps I want to start the list of messages at the bottom of the page.
As far as I know with the help of google in the web world it is not possible to generate a list of items in a reversed order on the screen like in native apps.
The most common work around for this is scroll the page to the bottom on page load. I tried this and in most cases there are performance issues, scroll delays, list not responding for a few seconds etc. so not the desired solution.
No I came up with a different approach, with css I flipped the list of items so that the list is upside down. I also flipped the items in the list so that they are flipped back and are not upside down anymore. Now I have the result I want, I have a list with items with item 1 at the bottom without the need to scroll to the bottom.
.listUpsideDown {
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
.messageUpsideDown {
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
There is only one downside, because I flip the list the scroll direction is also reversed. So now I'm looking for a way to reverse the scroll input direction.
I hope someone can help me with this.
I have a working fiddle with my current situation where I need to reverse the mouse scroll input direction jsfiddle example .
Instead of doing other workarounds, stick to scrolling to bottom. As you are using ionic, use $ionicScrollDelegate service, Just call $ionicScrollDelegate.scrollBottom(); from your controller when you want to scroll to bottom.
Plus if you want to put animation, while it is going to bottom use $ionicScrollDelegate.scrollBottom([true])