Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DataTable Header Text Wrap #848

Closed
rjsajnani1 opened this issue Feb 18, 2019 · 12 comments · Fixed by #863 · May be fixed by fabian-astorga/my-house-rpi#2
Closed

DataTable Header Text Wrap #848

rjsajnani1 opened this issue Feb 18, 2019 · 12 comments · Fixed by #863 · May be fixed by fabian-astorga/my-house-rpi#2
Labels
good first task

Comments

@rjsajnani1
Copy link

rjsajnani1 commented Feb 18, 2019 •
edited
Loading

Current behaviour

Unable to wrap the header title
screenshot 2019-02-18 at 12 32 44 pm

Expected behaviour

I would like to add some style or atleast try to wrap the header title like the given image below

screenshot 2019-02-18 at 12 35 20 pm

Your Environment

software version
ios ios 12
react-native 0.57.7
react-native-paper 2.11

Any help is much appreciated.
@satya164
Copy link
Member

We can add a numberOfLines prop to DataTable.Title. Wanna send a PR?

@rjsajnani1
Copy link
Author

We can add a numberOfLines prop to DataTable.Title. Wanna send a PR?

Yeah sure will work on one.
Is there a particular process i need to follow or something to create a PR?
Do let me know thanks.

@Trancever
Copy link
Contributor

@rjsajnani1 This is our Contributing Guide

@Taym95
Copy link
Collaborator

Taym95 commented Feb 22, 2019

If no one is working on this issue I would like to work on it

@Trancever
Copy link
Contributor

@Taym95 Feel free to send PR :)

@Taym95 Taym95 mentioned this issue Feb 22, 2019
Merged
satya164 pushed a commit that referenced this issue Feb 22, 2019
@Taym95 @satya164
feat: add numberOfLines prop to DataTableTitle (#863)
f9a0949 
Closes #848
@LorenceHernandez
Copy link

Hi

the multi line has been supported but the height of the text is constant to 24, so when doing multi line only first line is shown.

@charlesoruko
Copy link

charlesoruko commented Nov 14, 2020 •
edited
Loading

This issue still persists any suggestions to make resolve it ?
the numberOfLines prop is supported but has no effect on the output ,
A working example/Sample code would be appreciated

@mineturtle2137
Copy link

are there any updates on this issue? the numberOfLines property does not work and there's no option to change the font size of the header

@Zeyu-Li
Copy link

Zeyu-Li commented Jun 17, 2021 •
edited
Loading

@rjsajnani1 how do u use this prop? there doesn't appear to be an changes visible

Edit: I got it to work in the end, but no such thing exists for DataTable.Cell

@mikehardy
Copy link
Contributor

@Zeyu-Li I feel like I must be missing something. I cannot get a multiline to work with <DataTable.Header numberOfLines={2}>Text that should wrap</DataTable.Header>

Can someone post an actual little snippet that is confirmed working? I'd really appreciate it. Thanks!

mikehardy added a commit to mikehardy/react-native-paper that referenced this issue Dec 17, 2021
@mikehardy
fix: datatable.title cell height multiple of numberOfLines
4f5a1d3 
Without this, it does not appear the numberOfLines prop has an effect, as noticed in callstack#848 and callstack#863
With this, it appears to work exactly as expected.
@mikehardy mikehardy mentioned this issue Dec 17, 2021
Merged
mikehardy added a commit to mikehardy/react-native-paper that referenced this issue Dec 17, 2021
@mikehardy
fix: datatable.title cell height multiple of numberOfLines
ab7eeb5 
Without this, it does not appear the numberOfLines prop has an effect, as noticed in callstack#848 and callstack#863
With this, it appears to work exactly as expected.

Text components require special alignment treatment with word wrapping. Normally a word wrap
will force text alignment to flex-start. So we align directly when number of lines is > 1, while
respecting the numeric property and it's interaction with RTL languages
@mikehardy
Copy link
Contributor

I think I repaired the original implementation so that it handles text component's special text alignment issues with wrapping, while allowing a cell height that is a multiple of numberOfLines - patch-package patch available here for testing: #3015 (comment)

mikehardy added a commit to mikehardy/react-native-paper that referenced this issue Mar 29, 2022
@mikehardy
fix: datatable.title cell height multiple of numberOfLines
46cc703 
Without this, it does not appear the numberOfLines prop has an effect, as noticed in callstack#848 and callstack#863
With this, it appears to work exactly as expected.

Text components require special alignment treatment with word wrapping. Normally a word wrap
will force text alignment to flex-start. So we align directly when number of lines is > 1, while
respecting the numeric property and it's interaction with RTL languages
@mikehardy
Copy link
Contributor

My PR attempting to address this is release now in 4.12.0, hopefully it works for everyone!

@fabian-astorga fabian-astorga mentioned this issue Jul 3, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first task
Projects
None yet
Milestone
No milestone
10 participants
@ferrannp @mikehardy @satya164 @LorenceHernandez @Taym95 @Trancever @rjsajnani1 @Zeyu-Li @charlesoruko @mineturtle2137