I need to scroll a list of images horizontally in ionic v3. I tried using ion-scroll component and works perfect for android platform, but i need same behavior in the browser.
So when I hide the scroll bar it doesn't work, also I tried to set scroll width to 0. Seems that the swipe funcionality only works in mobile devices.
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
//width: 0 !important
}
I need to archive something like this.
I also check ngx-swiper-wrapper library, but i could not get the expected result.
Is there other library that can help with this?
Thanks.
I was trying to achieve the same (horizontal scrolling behavior across all devices and browser) and eventually did this using slider:
https://ionicframework.com/docs/components/#slides
Slides component is based on iDangerous swiper and was made to support coverflow like UIs with multiple slides visible: http://idangero.us/swiper/demos/110-slides-per-view.html
Here is simple implementation:
https://ionic-iw4z5s.stackblitz.io
Related
I'm building a reactjs widget which has scrollable lists (vertically) inside it, which takes the entire viewport on mobile (I prevent the default for "touchmove" on the window so as not to scroll the background).
But when I open the widget on iPhone (tested on both Safari and Chrome), I can scroll down the list, but can't scroll back up! if I want to scroll back up, I need to scroll a bit down before I scroll up (one action, without lifting the finger).
I also have reversed lists (same design, only with flex-direction: column-reverse), and I have the exact same behavior regardless of the flex direction.
I also noticed that the "touchmove" event on the list is not firing when I can scroll, but it is firing when I can't.
It works great on desktop, tablets (iPad as well) and android devices - just not on iPhone.
I need the scroll to work both ways on iPhone as well
It was my mistake - it was a combination of using body-scroll-lock and preventDefault of "touchmove" on the body.
All fixed now
I created a page with a grid in Xamarin.Forms. Now I am trying to adjust it for landscape as well. The problem is, that I need to use a scrollview for the portrait mode and disable the scrollview for landscape mode. I found a solution in my other post, which works good for android, but for iOS the buttons aren't clickable. Is there an other possibility to disable the scrollview for landscape? Or how can I make the buttons clickable for iOS? I posted my code already in this post. Maybe someone can help me. Thanks in advance.
I finally fixed it. I removed my old solution and I defined each row like this:
mainLayout.RowDefinitions.Add(new RowDefinition { Height = height / 8 });
Now each row have the perfect height and scrolling is disabled for landscape. (I divided it with eight, because I use eight rows now)
Using View -> Developer -> Inspect Elements in Chrome, I can see the dimensions of my React header component:
When I "toggle device toolbar", it looks like this:
(Which is how it looks in Chrome or Safari on my iPhone.)
How do I figure out what is determining that narrow width on my phone?
Update: xadm, I was curious enough to click on Computed, but maybe not clever enough to see how to use it? I see how it shows the dimensions, but I don't see how it shows how the dimensions are determined:
I added this to body { ... } in my main.scss:
min-width: 800px;
...and my page (especially the header) looks much better:
I arbitrarily chose 800px since it was double the "default" width to the right of Responsive when I toggle the device toolbar. Is there a way to determine an appropriate min-width?
I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.
Go to the following Foundation CSS framework documentation url:
http://foundation.zurb.com/docs/navigation.php
In the section named Nav Bar you will see an example for horizontal navigation bar. Now try to gradually minimize the browser's window, when the window is minimized enough (to be like mobile devices resolution) you will notice that horizontal navigation bar is turned into vertical navigation bar. I need to know the technical definition for this behavior occurred to the menu.
I believe you are looking for responsive web design; which is design that adapts based on the user agent's viewport.
Twitter's bootstrap framework for example, has responsive design built-in.
I've reproduced that effect using width: auto; float:left for each menu item, and on resize event I'm checking if all the items are aligned at their top. If the items are not aligned, I'm modifying to width:100%
here is an example of what I got: www.gabitzish.com (see menu)