diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.41k stars 1.14k forks source link

Bug: Text in Table Doesn't Fit Container #2415

Open jmseabra opened 8 months ago

jmseabra commented 8 months ago

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

jorgeferreira008 commented 8 months ago

any updates? i have the same issue...