diff --git a/app.js b/app.js
index 5e4b9baefc8fa86cbf01b6020b23458a6d3d2856..7c2a14bdb32f0a0e4d61aa2fa14ff1c1e99079d1 100644
--- a/app.js
+++ b/app.js
@@ -52,7 +52,7 @@ export default class App extends Component {
       Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
     }[this.state.currentPage]
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{flex: 1}}>
 
         {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
 
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 9ab32254c9705d6aec4f255337ccbe394305288b..c165633c38e8dd07c12074bf9542435d9c72f5e8 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -36,7 +36,7 @@ export default class CycleDayOverView extends Component {
     const targetDate = target === 'before' ?
       localDate.minusDays(1).toString() :
       localDate.plusDays(1).toString()
-    this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
+    this.setState({ cycleDay: getOrCreateCycleDay(targetDate) })
   }
 
   navigate(symptom) {
@@ -50,53 +50,55 @@ export default class CycleDayOverView extends Component {
     const getCycleDayNumber = cycleModule().getCycleDayNumber
     const cycleDayNumber = getCycleDayNumber(cycleDay.date)
     return (
-      <ScrollView>
+      <View style={{ flex: 1 }}>
         <Header
           isCycleDayOverView={true}
           cycleDayNumber={cycleDayNumber}
           date={cycleDay.date}
         />
-        <View style={styles.symptomBoxesView}>
-          <SymptomBox
-            title='Bleeding'
-            onPress={() => this.navigate('BleedingEditView')}
-            data={getLabel('bleeding', cycleDay.bleeding)}
-          />
-          <SymptomBox
-            title='Temperature'
-            onPress={() => this.navigate('TemperatureEditView')}
-            data={getLabel('temperature', cycleDay.temperature)}
-          />
-          <SymptomBox
-            title='Mucus'
-            onPress={() => this.navigate('MucusEditView')}
-            data={getLabel('mucus', cycleDay.mucus)}
-          />
-          <SymptomBox
-            title='Cervix'
-            onPress={() => this.navigate('CervixEditView')}
-            data={getLabel('cervix', cycleDay.cervix)}
-          />
-          <SymptomBox
-            title='Note'
-            onPress={() => this.navigate('NoteEditView')}
-            data={getLabel('note', cycleDay.note)}
-          />
-          <SymptomBox
-            title='Desire'
-            onPress={() => this.navigate('DesireEditView')}
-            data={getLabel('desire', cycleDay.desire)}
-          />
-          <SymptomBox
-            title='Sex'
-            onPress={() => this.navigate('SexEditView')}
-            data={getLabel('sex', cycleDay.sex)}
-          />
-          {/*  this is just to make the last row adhere to the grid
+        <ScrollView>
+          <View style={styles.symptomBoxesView}>
+            <SymptomBox
+              title='Bleeding'
+              onPress={() => this.navigate('BleedingEditView')}
+              data={getLabel('bleeding', cycleDay.bleeding)}
+            />
+            <SymptomBox
+              title='Temperature'
+              onPress={() => this.navigate('TemperatureEditView')}
+              data={getLabel('temperature', cycleDay.temperature)}
+            />
+            <SymptomBox
+              title='Mucus'
+              onPress={() => this.navigate('MucusEditView')}
+              data={getLabel('mucus', cycleDay.mucus)}
+            />
+            <SymptomBox
+              title='Cervix'
+              onPress={() => this.navigate('CervixEditView')}
+              data={getLabel('cervix', cycleDay.cervix)}
+            />
+            <SymptomBox
+              title='Note'
+              onPress={() => this.navigate('NoteEditView')}
+              data={getLabel('note', cycleDay.note)}
+            />
+            <SymptomBox
+              title='Desire'
+              onPress={() => this.navigate('DesireEditView')}
+              data={getLabel('desire', cycleDay.desire)}
+            />
+            <SymptomBox
+              title='Sex'
+              onPress={() => this.navigate('SexEditView')}
+              data={getLabel('sex', cycleDay.sex)}
+            />
+            {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
-          <FillerBoxes />
-        </View >
-      </ScrollView >
+            <FillerBoxes />
+          </View >
+        </ScrollView >
+      </View >
     )
   }
 }
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 277c4009a466fe84a75b73a0905dbf066cf29b9f..bd24b9ebeec963fd2e6b7ecef93a47d4795aed8e 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -33,30 +34,32 @@ export default class Bleeding extends Component {
       { label: labels[3], value: 3 },
     ]
     return (
-      <View style={styles.menuOnBottom}>
-        <View>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={bleedingRadioProps}
-              initial={this.state.currentValue}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ currentValue: itemValue })
-              }}
-            />
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={bleedingRadioProps}
+                initial={this.state.currentValue}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ currentValue: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
           </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>Exclude</Text>
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </View>
-        </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='bleeding'
           cycleDay={this.props.cycleDay}
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 25730a4ecf3a5e9c4b8958737b3e8253778a159c..d1d8ba65ce0b8029b44cf74475d95c86444e419c 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -49,57 +50,59 @@ export default class Cervix extends Component {
       { label: positionLabels[2], value: 2 }
     ]
     return (
-      <View style={styles.menuOnBottom}>
-        <View>
-          <Text style={styles.symptomDayView}>Opening</Text>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={cervixOpeningRadioProps}
-              initial={this.state.opening}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ opening: itemValue })
-              }}
-            />
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <Text style={styles.symptomDayView}>Opening</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixOpeningRadioProps}
+                initial={this.state.opening}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ opening: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Firmness</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixFirmnessRadioProps}
+                initial={this.state.firmness}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ firmness: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Position</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixPositionRadioProps}
+                initial={this.state.position}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ position: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
           </View>
-          <Text style={styles.symptomDayView}>Firmness</Text>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={cervixFirmnessRadioProps}
-              initial={this.state.firmness}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ firmness: itemValue })
-              }}
-            />
-          </View>
-          <Text style={styles.symptomDayView}>Position</Text>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={cervixPositionRadioProps}
-              initial={this.state.position}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ position: itemValue })
-              }}
-            />
-          </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>Exclude</Text>
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </View>
-        </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='cervix'
           cycleDay={this.cycleDay}
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index ecb356b01b45b73b854be4472285a61a58c9279a..2dd6fc6aeeb49e67c51b6be079150c10fbd908e3 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -28,21 +28,23 @@ export default class Desire extends Component {
       { label: labels[2], value: 2 }
     ]
     return (
-      <View style={styles.menuOnBottom}>
-        <View>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={desireRadioProps}
-              initial={this.state.currentValue}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ currentValue: itemValue })
-              }}
-            />
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={desireRadioProps}
+                initial={this.state.currentValue}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ currentValue: itemValue })
+                }}
+              />
+            </View>
           </View>
-        </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='desire'
           cycleDay={this.cycleDay}
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index 107da9fc2c6e698f46c8217b76a8029ce3237553..f846bfdab903d54875a3dbf66e9c224a23a8e278 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -47,44 +48,46 @@ export default class Mucus extends Component {
       { label: textureLabels[2], value: 2 }
     ]
     return (
-      <View style={styles.menuOnBottom}>
-        <View>
-          <Text style={styles.symptomDayView}>Feeling</Text>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={mucusFeelingRadioProps}
-              initial={this.state.feeling}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ feeling: itemValue })
-              }}
-            />
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <Text style={styles.symptomDayView}>Feeling</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={mucusFeelingRadioProps}
+                initial={this.state.feeling}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ feeling: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Texture</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={mucusTextureRadioProps}
+                initial={this.state.texture}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ texture: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
           </View>
-          <Text style={styles.symptomDayView}>Texture</Text>
-          <View style={styles.radioButtonRow}>
-            <RadioForm
-              radio_props={mucusTextureRadioProps}
-              initial={this.state.texture}
-              formHorizontal={true}
-              labelHorizontal={false}
-              labelStyle={styles.radioButton}
-              onPress={(itemValue) => {
-                this.setState({ texture: itemValue })
-              }}
-            />
-          </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>Exclude</Text>
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </View>
-        </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='mucus'
           cycleDay={this.cycleDay}
diff --git a/components/cycle-day/symptoms/note.js b/components/cycle-day/symptoms/note.js
index 6be5ac7a90ceacd83ff46d9e4359919cca9faa4b..6bf0cb63dc0a32677281de1d1508f09968700ee2 100644
--- a/components/cycle-day/symptoms/note.js
+++ b/components/cycle-day/symptoms/note.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
+  ScrollView,
   TextInput,
 } from 'react-native'
 
@@ -23,17 +23,19 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.menuOnBottom}>
-        <View style={styles.symptomViewRow}>
-          <TextInput
-            multiline={true}
-            placeholder="Enter"
-            onChangeText={(val) => {
-              this.setState({ currentValue: val })
-            }}
-            value={this.state.currentValue}
-          />
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View style={styles.symptomViewRow}>
+            <TextInput
+              multiline={true}
+              placeholder="Enter"
+              onChangeText={(val) => {
+                this.setState({ currentValue: val })
+              }}
+              value={this.state.currentValue}
+            />
+          </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='note'
           cycleDay={this.cycleDay}
diff --git a/components/cycle-day/symptoms/sex.js b/components/cycle-day/symptoms/sex.js
index fc8174ef7a5bbfc04f98f6698eedc8f00ff17ca0..2ca06eff057b941bd264e9c5fc83193414601883 100644
--- a/components/cycle-day/symptoms/sex.js
+++ b/components/cycle-day/symptoms/sex.js
@@ -3,7 +3,8 @@ import {
   CheckBox,
   Text,
   TextInput,
-  View
+  View,
+  ScrollView
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
@@ -18,7 +19,7 @@ export default class Sex extends Component {
     super(props)
     this.cycleDay = props.cycleDay
     this.state = {}
-    if (this.cycleDay.sex !== null ) {
+    if (this.cycleDay.sex !== null) {
       Object.assign(this.state, this.cycleDay.sex)
       // We make sure other is always true when there is a note,
       // e.g. when import is messed up.
@@ -31,111 +32,113 @@ export default class Sex extends Component {
   render() {
 
     return (
-      <View style={styles.menuOnBottom}>
-        <View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
-            <CheckBox
-              value={this.state.solo}
-              onValueChange={(val) => {
-                this.setState({ solo: val })
-              }}
-            />
-            <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
-            <CheckBox
-              value={this.state.partner}
-              onValueChange={(val) => {
-                this.setState({ partner: val })
-              }}
-            />
-          </View>
-          <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.condom}
-            </Text>
-            <CheckBox
-              value={this.state.condom}
-              onValueChange={(val) => {
-                this.setState({ condom: val })
-              }}
-            />
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.pill}
-            </Text>
-            <CheckBox
-              value={this.state.pill}
-              onValueChange={(val) => {
-                this.setState({ pill: val })
-              }}
-            />
-          </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.iud}
-            </Text>
-            <CheckBox
-              value={this.state.iud}
-              onValueChange={(val) => {
-                this.setState({ iud: val })
-              }}
-            />
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.patch}
-            </Text>
-            <CheckBox
-              value={this.state.patch}
-              onValueChange={(val) => {
-                this.setState({ patch: val })
-              }}
-            />
-          </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.ring}
-            </Text>
-            <CheckBox
-              value={this.state.ring}
-              onValueChange={(val) => {
-                this.setState({ ring: val })
-              }}
-            />
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.implant}
-            </Text>
-            <CheckBox
-              value={this.state.implant}
-              onValueChange={(val) => {
-                this.setState({ implant: val })
-              }}
-            />
-          </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>
-              {contraceptiveLabels.other}
-            </Text>
-            <CheckBox
-              value={this.state.other}
-              onValueChange={(val) => {
-                this.setState({
-                  other: val,
-                  focusTextArea: true
-                })
-              }}
-            />
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
+              <CheckBox
+                value={this.state.solo}
+                onValueChange={(val) => {
+                  this.setState({ solo: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
+              <CheckBox
+                value={this.state.partner}
+                onValueChange={(val) => {
+                  this.setState({ partner: val })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.condom}
+              </Text>
+              <CheckBox
+                value={this.state.condom}
+                onValueChange={(val) => {
+                  this.setState({ condom: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.pill}
+              </Text>
+              <CheckBox
+                value={this.state.pill}
+                onValueChange={(val) => {
+                  this.setState({ pill: val })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.iud}
+              </Text>
+              <CheckBox
+                value={this.state.iud}
+                onValueChange={(val) => {
+                  this.setState({ iud: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.patch}
+              </Text>
+              <CheckBox
+                value={this.state.patch}
+                onValueChange={(val) => {
+                  this.setState({ patch: val })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.ring}
+              </Text>
+              <CheckBox
+                value={this.state.ring}
+                onValueChange={(val) => {
+                  this.setState({ ring: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.implant}
+              </Text>
+              <CheckBox
+                value={this.state.implant}
+                onValueChange={(val) => {
+                  this.setState({ implant: val })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.other}
+              </Text>
+              <CheckBox
+                value={this.state.other}
+                onValueChange={(val) => {
+                  this.setState({
+                    other: val,
+                    focusTextArea: true
+                  })
+                }}
+              />
+            </View>
+            {this.state.other &&
+              <TextInput
+                autoFocus={this.state.focusTextArea}
+                multiline={true}
+                placeholder="Enter"
+                value={this.state.note}
+                onChangeText={(val) => {
+                  this.setState({ note: val })
+                }}
+              />
+            }
           </View>
-          {this.state.other &&
-            <TextInput
-              autoFocus={this.state.focusTextArea}
-              multiline={true}
-              placeholder="Enter"
-              value={this.state.note}
-              onChangeText={(val) => {
-                this.setState({ note: val })
-              }}
-            />
-          }
-        </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='sex'
           cycleDay={this.cycleDay}
diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js
index 4c2d97e2f3172ff73a8350a6f9dcd21661cd3bb3..629f5b20b2ee627ac5cdd6c4e0661edb9ae44893 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -5,6 +5,7 @@ import {
   TextInput,
   Switch,
   Keyboard,
+  ScrollView
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 
@@ -42,52 +43,54 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.menuOnBottom}>
-        <View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>Temperature (°C)</Text>
-            <TextInput
-              style={styles.temperatureTextInput}
-              placeholder="Enter"
-              onChangeText={(val) => {
-                this.setState({ currentValue: val })
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+              <TextInput
+                style={styles.temperatureTextInput}
+                placeholder="Enter"
+                onChangeText={(val) => {
+                  this.setState({ currentValue: val })
+                }}
+                keyboardType='numeric'
+                value={this.state.currentValue}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Time</Text>
+              <TextInput
+                style={styles.temperatureTextInput}
+                onFocus={() => {
+                  Keyboard.dismiss()
+                  this.setState({ isTimePickerVisible: true })
+                }}
+                value={this.state.time}
+              />
+            </View>
+            <DateTimePicker
+              mode="time"
+              isVisible={this.state.isTimePickerVisible}
+              onConfirm={jsDate => {
+                this.setState({
+                  time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                  isTimePickerVisible: false
+                })
               }}
-              keyboardType='numeric'
-              value={this.state.currentValue}
+              onCancel={() => this.setState({ isTimePickerVisible: false })}
             />
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
           </View>
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>Time</Text>
-            <TextInput
-              style={styles.temperatureTextInput}
-              onFocus={() => {
-                Keyboard.dismiss()
-                this.setState({ isTimePickerVisible: true })
-              }}
-              value={this.state.time}
-            />
-          </View>
-          <DateTimePicker
-            mode="time"
-            isVisible={this.state.isTimePickerVisible}
-            onConfirm={jsDate => {
-              this.setState({
-                time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-                isTimePickerVisible: false
-              })
-            }}
-            onCancel={() => this.setState({ isTimePickerVisible: false })}
-          />
-          <View style={styles.symptomViewRowInline}>
-            <Text style={styles.symptomDayView}>Exclude</Text>
-            <Switch
-              onValueChange={(val) => {
-                this.setState({ exclude: val })
-              }}
-              value={this.state.exclude}
-            />
-          </View>
-        </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='temperature'
           cycleDay={this.cycleDay}
diff --git a/styles/index.js b/styles/index.js
index 89c1f636492223550ae5c1f8489b11a8f0a4d254..4b90e8dbee9d6df9cb55fb96b1c56f9f895ec4b6 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -79,10 +79,6 @@ export default StyleSheet.create({
   symptomDataText: {
     fontSize: 12
   },
-  menuOnBottom: {
-    flex: 1,
-    justifyContent: 'space-between'
-  },
   symptomEditRow: {
     justifyContent: 'space-between',
     marginBottom: 10,
@@ -105,7 +101,7 @@ export default StyleSheet.create({
     backgroundColor: primaryColor,
     alignItems: 'center',
     justifyContent: 'space-between',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   menuItem: {
     alignItems: 'center',