-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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.
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
[ToolbarTitle] Long text
string wraps below toolbar
#3192
Comments
Proposed SolutionI was able to solve this by from my interpretation of the problem and by consulting the fellow collaborators. What I did was that I converted a long title text based on the number of characters in the title into ellipsis if it exceeds the condition on the number of characters as mentioned below. If the text is smaller than 40 characters then it inherit the width of the parent element. The highlighted text in the below screenshot are the needed changes. The changes are to be included in the toolbar-title.jsx file: This leads to the following change: Having said that, I would want to make a point here. The use case for the title component would be to include a short text in the title. However, the rendering of the title text will also depend on the number of the components being included in the ToolbarGroup Component which is the parent of the ToolbarTitle Component. E.g: If we have too many components in the ToolbarGroup the Title will be cut short anyway and won't serve the purpose. So, It basically depends on the design and the use case of the person implementing it. @devnacho: you could either change the width property here by either mentioning the width manually (width: 150) or by using the below line and that should solve your problem:
@mbrookes : If this solution sounds alright I could issue a pull request. |
@oliviertassinari : Can we close this issue? The PR for this was merged last week. Thanks ! |
@tintin1343 We still have the following issue: |
Alright. I guess we can close it after redesign of the component. |
@mbrookes : Can this be closed now? |
Yes thank you 👍 |
@tintin1343 - https://help.github.com/articles/closing-issues-via-commit-messages/ Convention is to put it at the bottom of your PR description: http://chris.beams.io/posts/git-commit/, but anywhere will work |
Thanks Matt! I did not know this. Really helpful! |
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Incorporate flexbox design in the existing design of toolbar. Resolves mui#3192
Hey guys,
When I put a long text in ToolbarTitle it disappears with smaller screens.
This issues is really similar to this one: #823
My Material-ui version is 0.14.2
Thanks!!
The text was updated successfully, but these errors were encountered: