Header/paragraph tags truncation is too aggressive #2706
Comments
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: |
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: |
@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. |
The truncation logic is just simple CSS so if you ever need to roll our own, here are the relevant rules:
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: Thanks! |
That's excellent. Thanks for taking my feedback seriously. |
Issue: truncation kicks in way before an area is out of space (eg. a h1 in the footer).
How to reproduce:
The text was updated successfully, but these errors were encountered: