react-pdf
react-pdf copied to clipboard
Bug: Text in Table Doesn't Fit Container
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>
);
}
any updates? i have the same issue...