Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Header/paragraph tags truncation is too aggressive #2706

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

Header/paragraph tags truncation is too aggressive #2706

tommedema opened this issue Oct 14, 2011 · 5 comments

Comments

@tommedema
Copy link

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
Copy link
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/

@toddparker
Copy link
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/

@tommedema
Copy link
Author

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

@tommedema
Copy link
Author

@toddparker,

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants