Elements following the grid are over-writing the gird

[RALifeCoach]

The grid has a red background. The 'LEGEND' starts the following component. The page has flex:1 at the highest level. Flex is not specified anywhere else.

[peacechen]

Is your 'LEGEND' component set to position: absolute ? It would help to share your code that renders the above.

[RALifeCoach]

Here is the footer component:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import leaderboardConfig from '../../../utils/config';

const FooterComponent = props => {
    const languageValues = leaderboardConfig.language.FooterComponent;

    return (
        <View style={styles.component}>
            <Text style={styles.title}>{languageValues.legend}</Text>
            <Text>
                <Text style={styles.body}>{languageValues.liveVideo}</Text>
            </Text>
            <Text>
                <Text style={styles.body}>{languageValues.videoHighlights}</Text>
            </Text>
            <Text style={styles.body}>{languageValues.acceptanceOfTermsTitle}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    component: {
        color: '#000'
    },
    title: {
        fontSize: 20
    },
    body: {
        fontSize: 12
    }
});

export default FooterComponent;

Here is the table:

import React from 'react';
import { Grid, Col, Row } from 'react-native-easy-grid';
import { Text, StyleSheet } from 'react-native';
import leaderboardConfig from '../../../../utils/config';

export default function StrokePlayHeaderSmallComponent(props) {
    const languageValues = leaderboardConfig.language.StrokePlayHeaderComponent;
    return (
        <Grid style={styles.table}>
            <Row>
                <Col style={styles.col}><Text className="icon-fav"/></Col>
                <Col
                    style={styles.col}
                >
                    <Text style={styles.col}>{languageValues.pos}</Text>
                </Col>
            </Row>
        </Grid>
    );
}

const styles = StyleSheet.create({
    table: {
        width: '100%',
        backgroundColor: '#fff'
    },
    text: {
        color: '#000'
    },
    col: {
        backgroundColor: '#f00',
        height: 38
    }
});

Here is the component that sits above the table:

import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import leaderboardConfig from '../../../utils/config';

export default function PageHeaderComponent({ header, lastUpdatedTime }) {
    const languageValues = leaderboardConfig.language.PageHeaderComponent;
    return (
        <View style={styles.headerLine}>
            {header.showTitle &&
                <Text>
                    {header.roundTitle}
                </Text>
            }
            <Image source={require('../../../../images/icon-watch.png')} />
            <Text styles={styles.lastUpdatedTime}>{languageValues.lastUpdated}
                <Text styles={styles.lastUpdatedTimeDate}>&nbsp;{lastUpdatedTime}</Text>
            </Text>
            {!header.hideTeeTimesLocal &&
                <Text styles={styles.teeTimesLocal}>{languageValues.teeTimesLocal}</Text>
            }
        </View>
    );
}

const styles = StyleSheet.create({
    headerLine: {
        padding: 10,
        fontSize: 14,
        lineHeight: 16,
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    roundMessage: {
        marginRight: 15,
        fontWeight: 'bold'
    },
    lastUpdatedTime: {
        marginRight: 15,
    },
    lastUpdatedTimeDate: {
        marginRight: 15,
    },
    teeTimesLocal: {
        marginRight: 15,
    }
});

All have been stripped down.

On Feb 5, 2019, at 10:18 AM, Peace notifications@github.com wrote:

Is your 'LEGEND' component set to position: absolute ? It would help to share your code that renders the above.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/idibidiart/react-native-responsive-grid/issues/36#issuecomment-460511877, or mute the thread https://github.com/notifications/unsubscribe-auth/ADrayCz7lSvaKbsZa67XXGmF0dMAJgQcks5vKQ0qgaJpZM4aieHQ.

[peacechen]

That looks relatively standard. I don't see the layout of how all the above is put together. It could be that the root container is awry. Is this the general layout?

Header Table (Grid) Footer

I wish I could pinpoint the problem, but we may need a reproducible demo to figure this out.

[RALifeCoach]

I have discovered my problem. I added ScrollView at a high level and now it is working. Thank-you for your time and assistance.

On Feb 5, 2019, at 12:00 PM, Peace notifications@github.com wrote:

That looks relatively standard. I don't see the layout of how all the above is put together. It could be that the root container is awry. Is this the general layout?

Header Table (Grid) Footer

I wish I could pinpoint the problem, but we may need a reproducible demo to figure this out.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/idibidiart/react-native-responsive-grid/issues/36#issuecomment-460528371, or mute the thread https://github.com/notifications/unsubscribe-auth/ADrayLOQKrg3LG7MYNJ3Bh59ETM5oGfPks5vKSTsgaJpZM4aieHQ.

[peacechen]

Glad to hear that you found the issue 👍