Header/paragraph tags truncation is too aggressive #2706

Closed
tommedema opened this Issue Oct 14, 2011 · 5 comments

Comments

Projects
None yet
2 participants
@tommedema

Issue: truncation kicks in way before an area is out of space (eg. a h1 in the footer).

How to reproduce:

  • Go to http://jsfiddle.net/3KPa2/6/
  • Resize the browser window to be less wide
  • The footer header will be truncated when it is definitely not necessary to do so
@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 14, 2011

Contributor

We currently have "slots" in the left and right of the header for buttons, if available. To be really smart, we would need to check for the presence of the buttons, then measure the width of each with JavaScript, then dynamically write a width for the title which is way too tweaky. We're more hands off in footers but there is some padding.

To avoid any of our default toolbar layout assumptions, simply wrap your content in a wrapper and write custom styles. The defaults are just a quick way to achieve some typical patterns.

Here is how to do that:
http://jsfiddle.net/3KPa2/13/

Contributor

toddparker commented Oct 14, 2011

We currently have "slots" in the left and right of the header for buttons, if available. To be really smart, we would need to check for the presence of the buttons, then measure the width of each with JavaScript, then dynamically write a width for the title which is way too tweaky. We're more hands off in footers but there is some padding.

To avoid any of our default toolbar layout assumptions, simply wrap your content in a wrapper and write custom styles. The defaults are just a quick way to achieve some typical patterns.

Here is how to do that:
http://jsfiddle.net/3KPa2/13/

@toddparker toddparker closed this Oct 14, 2011

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 14, 2011

Contributor

One more tip: The data-role of header/footer adds these common layout rules in addition to tacking on the toolbar classes. If you want to toolbar look without any of the layout stuff, the other way to go is to take a div and insteadof adding the data-role="footer" and data-theme="b", you can simply add the appropriate classes: ui-bar (add basic toolbar padding) and ui-bar-b (theme swatch color for bars, can be any letter in your theme).

Example:
http://jsfiddle.net/3KPa2/17/

Contributor

toddparker commented Oct 14, 2011

One more tip: The data-role of header/footer adds these common layout rules in addition to tacking on the toolbar classes. If you want to toolbar look without any of the layout stuff, the other way to go is to take a div and insteadof adding the data-role="footer" and data-theme="b", you can simply add the appropriate classes: ui-bar (add basic toolbar padding) and ui-bar-b (theme swatch color for bars, can be any letter in your theme).

Example:
http://jsfiddle.net/3KPa2/17/

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Oct 14, 2011

@toddparker, thanks for the explanation. The second tip is also very helpful.

Unfortunately, this also disables the truncation logic. I guess it's difficult to only get the truncation logic, so I probably have to roll my own.

Thanks.

@toddparker, thanks for the explanation. The second tip is also very helpful.

Unfortunately, this also disables the truncation logic. I guess it's difficult to only get the truncation logic, so I probably have to roll my own.

Thanks.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 14, 2011

Contributor

The truncation logic is just simple CSS so if you ever need to roll our own, here are the relevant rules:

min-height: 1.1em; margin: .6em 90px .8em;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 

However, I just checked the styles here and noticed that we set the same padding for titles in the footer as we do in the header, but footers don't have left/right button slots. I just checked in a commit that sets the padding to 15px on the sides (same as the body) so this should now work for you out of the box.

Here is a demo that uses latest:
http://jsbin.com/afodon/2/
http://jsbin.com/afodon/2/edit

Thanks!

Contributor

toddparker commented Oct 14, 2011

The truncation logic is just simple CSS so if you ever need to roll our own, here are the relevant rules:

min-height: 1.1em; margin: .6em 90px .8em;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 

However, I just checked the styles here and noticed that we set the same padding for titles in the footer as we do in the header, but footers don't have left/right button slots. I just checked in a commit that sets the padding to 15px on the sides (same as the body) so this should now work for you out of the box.

Here is a demo that uses latest:
http://jsbin.com/afodon/2/
http://jsbin.com/afodon/2/edit

Thanks!

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Oct 14, 2011

@toddparker,

That's excellent. Thanks for taking my feedback seriously.

@toddparker,

That's excellent. Thanks for taking my feedback seriously.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment