react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Bug: Text in Table Doesn't Fit Container

Open jmseabra opened this issue 1 year ago • 1 comments

Issue Title:

Bug: Text in Table Doesn't Fit Container

Issue Description:

Bug Summary:

The text within a table is overflowing and doesn't fit within its designated container.

Expected Behavior:

The text in the table should fit within the container without overflowing.

Actual Behavior:

The text overflows the container, making it difficult to read and causing a layout issue.

Code Snippet:

export default function GasTableBody() {
  Font.register({
    family: 'Inter',
    fonts: [
      {
        src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf',
        fontWeight: 400,
      },
      {
        src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf',
        fontWeight: 500,
      },
      {
        src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf',
        fontWeight: 600,
      },
      {
        src: 'http://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf',
        fontWeight: 700,
      },
    ],
  });
  const borderColorString = '#ededed';
  const styles = StyleSheet.create({
    table: {
      alignItems: 'left',
      fontSize: 8,
      color: '#333333',
      borderWidth: 1,
      borderColor: borderColorString,
      borderTop: 0,
      height: 200,
    },
    tableRow: {
      flexDirection: 'row',
      borderColor: borderColorString,
    },
    tableCol: {
      width: '10%',
    },
    tableCell: {
    },
  });

  return (
    <View style={styles.table}>
      <View style={styles.tableRow}>
        <View style={[styles.tableCol]}>
          <Text style={styles.tableCell}>1</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>Modelo 1</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>Marca 1 Marca 1 Marca 1 Marca 1</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>Propano</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>C/NC/NA</Text>
        </View>
        <View style={styles.tableCol}>
          <Text debug style={styles.tableCell}>
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787
            Avenida Vale do Caima nº787d
          </Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>C/NC/NA snidbbdanknn</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>Exemplo de anomalias</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>Exemplo de resolução</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>C/NC/NA</Text>
        </View>
      </View>
    </View>
  );
}

table

jmseabra avatar Oct 17 '23 12:10 jmseabra

any updates? i have the same issue...

jorgeferreira008 avatar Oct 18 '23 08:10 jorgeferreira008