Jasonette / JASONETTE-iOS

📡 Native App over HTTP, on iOS
https://www.jasonette.com
MIT License
5.27k stars 352 forks source link

iOS Horizontal layout bug #319

Closed darenr closed 6 years ago

darenr commented 6 years ago

Reproducible case: https://jasonbase.com/things/MjK8/edit#

a section of type horizontal, I have a handful of images, I want the section height to be constant, and the images not to have their aspect ratio altered, so I set the image height. However, the result is unpredictable and varies depending on how many times I run it.

gliechtenstein commented 6 years ago

Looking at the example, I'm guessing you're trying to create a horizontally scrolling section?

Horizontal layout and horizontal sections are completely different things.

A layout is not meant to scroll therefore if you have many components in a layout, some of the components will get squished thanks to pigeonhole principle. In this example case, there are many components in this particular horizontal layout, and you've set their heights to fixed dimension, so no matter what you do, all of those components will try to fit inside the given width (the viewport width), which results in the unexpected behavior.

When I inspect the view, it looks like this:

screen shot 2018-01-06 at 11 31 16 pm

Note that only the two images are full sizes and the rest have been squished, and because of how iOS autolayout works, this behavior is non-deterministic. That's why you get different results every time.

If you want to create a horizontally scrolling view, you should create a horizontally scrolling section.

darenr commented 6 years ago

thanks for the explanation.

darenr commented 6 years ago

After switching to the right type of horizontal, I'm still struggling to get a horizontally scrollable list of images that have a fixed height but variable width (preserving their aspect ratio) - I cannot set styles for the section, so I'm forced to using a single item that's a component type, so I can set style on that.

What I'm trying to do is horizontally layout a set of images that when clicked trigger an action, that all the same height but leave the width up to iOS, with spacing between them. I have messed with the items array and using a single component item but cannot get jasonette to render these properly.