reapp / reapp-ui

Amazing cross platform UI's with React and JavaScript
https://reapp.io
MIT License
257 stars 47 forks source link

fix scrolling issues on chrome (android & desktop) #80

Closed iamdoron closed 9 years ago

iamdoron commented 9 years ago

On Chrome, when only specifying flex: 1 for the inner view, the height of the inner view is the height of the content and not the height of its parent - therefore, scrolling doesn't work. As far as I know it is only true for Chrome (tested on safari for iOS/OSX). The solution is the add height: 100%.

In any way, specifying the height is 100% is a good practice because this is the truth in this case.

iamdoron commented 9 years ago

BTW, if you want to reproduce the issue, just build any reapp app that has a list (like the hacker news example) and see that scrolling doesn't work in chrome

iamdoron commented 9 years ago

As a workaround (until this version is published), I manually added this style to the theme:

I added View.js file to app/theme/styles

export default {
    inner: {
      height: '100%'
  },
};

and modified app/theme/styles.js

import { makeStyles } from 'reapp-kit';
const requirer = name => require(`./styles/${name}`);

// override default component styles

export default makeStyles(requirer, [
  'TitleBar',
  'View' // Add View if it's not already here
]);