I've started looking into MDL (https://getmdl.io) and after reading this article (https://www.nngroup.com/articles/horizontal-scrolling/) I decided it's a bad idea to use horizontal scrolling on the desktop.
What I'd really like to achieve is to display a grid on the desktop where cards overflow naturally, but on mobile change it to display all the cards on a single line and become a horizontal scroller like you see in many mobile apps (e.g. Google Play Movies).
If it is not possible, please explain how I can achieve horizontal scrolling on mobile.
Thanks in advance
Related
I am new in Appcelerator framework, I have developed one application in appcelerator, but that application looks good on IOS but for android its not look good.
I want to develop a screen which is responsive like html.
Is there any way to design appcelerator screen like responsive screen.
Thanks you.
Don't define width, unless calculated. iOS is fairly simple with only a handful different resolutions, on Android you never know what resolutions you might encounter.
Luckily, you can specify widths differently in Titanium than you can in HTML. For example
var view = Ti.UI.createView({
left: 20,
right: 20
});
This will make your view the width of the parent, with 20 padding right and left, the width will be calculated.
Also, always stick to native UI elements. So tabgroups, actionbar/navigationBar should all be used so you don't have to worry about cross platform support, styling and sizing of those elements.
Furthermore, most view should be put in ScrollView's when you don't know how tall the UI is going to be. It could fit on iOS, but not on a small Android device. Putting it in a scrollview will always fix the screen as the scrollview will automatically enable scrolling when the content is taller than what fits.
So conclusion
Width should be defined relative. Either with left/right properties, or calculated
If height of content is not yet known or not designed to be fullscreen wrap it in a scrollview
Stop thinking of apps as websites, start thinking of them as Apps. Layout works differently
Lastly, Appcelerator is the company, Titanium is the technology you're using :)
I tried many libraries/solutions including ionic-scroll but it doesn't work out. I need something which is much similar to instagram/facebook zoom functionality on mobile view.
Every solution prevents vertical scroll if user want to move to second image under the first one.
I am using Angular 1 in my app.
Can someone suggest me so that I can implement the same?
http://54.200.76.33:8080/
I've got this working on desktop browsers.If you scroll down, you'll see a search bar shows up at the bottom of the screen and becomes fixed to the bottom.
If you look at this on a mobile phone, when you scroll down, the bar doesn't immediately stick to the bottom. It'll wait until the user stops scrolling, and then it becomes fixed to the bottom.
Is there any way to fix this? Thanks.
Different mobile browsers have all kinds of issues with firing scroll events. Seems like you're using a scroll listener to update the CSS for pinning the scrollbar to the bottom. It's a generally good approach, so I wouldn't change it.
If you like, you can use a tool like Modernizr to treat the mobile platform differently. Other than that, the state of technology today is that you kind of have to deal with quirks like this on mobile.
http://modernizr.com/
I am creating my first responsive site, I am having trouble because when the iPhone is in portrait orientation, the text looks fine, but while turning to landscape, the text, images, etc all zoom in and get bigger to fit the screen. The font-size is in pixels so shouldn't it stay the same? How do I make it so it stays the same size and just adjusts the text wrap? An example of what Im trying to achieve would be this site on an iPhone. Thanks.
This sounds like the iOS orientation bug. There's a lot of incorrect advice out there to set a maximum scale in the viewport meta tag which seems to fix it but actually introduces a number of other issues. You might want to look at the workround to see if this does what you need.
We are doing UI screens for WPF application on Laptop But we are planing to give demo on 22"inch Monitor. Here Dimensions are getting changed when we see UI screens on 22"inch Monitor. How can I make same UI screen apperance on both Laptop and 22" inch Monitor? please help me here....
Are you using an absolute layout, where specific X/Y/Height/Width is being defined for every control? If you use other types of layouts, they are more relative to window height/width and automatically handle these issues.
Wrap your entire application in the Viewbox control. As long as you don't have rasterized images, nothing will look stretched.