[ToolbarTitle] Long text string wraps below toolbar

[devnacho]

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!!

[tintin1343]

Proposed Solution

I 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:
a) When its a long string :

b) when its a small string:

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:

    `width: (this.props.text.length > 40) ? 150 : 'inherit',`

@mbrookes : If this solution sounds alright I could issue a pull request.

[tintin1343]

@oliviertassinari : Can we close this issue? The PR for this was merged last week. Thanks !

[oliviertassinari]

@tintin1343 We still have the following issue:

I'm not sure that we should close it.

[tintin1343]

Alright. I guess we can close it after redesign of the component.

[newsiberian]

Hi, we have the similar issue with:
[SelectField] before:

selected

and with [TextField] floatingLabelText:

[tintin1343]

@mbrookes : Can this be closed now?

[alitaheri]

Yes thank you 👍

[mbrookes]

@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

[tintin1343]

@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!