onyx.toolbar Problem with long text

linuxq

Hi,

I use a toolbar for my RSS reader app. Left is the feed icon, on the right an icon to toggle read/unread and in the middle is the feed title.

{kind: "onyx.Toolbar", components: [ {kind: "enyo.Image", name: "feedTitleIcon", fit: false, src: "", style: "height:30px;"}, //height: 54px"}, {name: "lblFeedTitle", content: "Feed", style: "font-size:1.2em; font-weight:bold;", fit: true}, {kind: "onyx.ToggleIconButton", name: "toggleFeedUnread", onChange: "UpdateFeedClick", style:" position:fixed; right:5px;", value: true, src: "assets/menu-icon-bookmark.png"} ]},

The problem is, that some feed titles are too big and lay behind the icon.



Any hint, how to solve that? The text should be cut off instead.

Thanks Marcel

linuxq

Hi unfortunately it doesn't change anything.

Marcel

aarontam

Hi @linuxq, it's the fact that your toggleFeedUnread button is using fixed positioning that causes long text to run underneath it. Would something like this, using Fittables, be a workable solution? http://jsfiddle.net/aarontam/gtgfqd04/. Unfortunately the Fittables calculations do not seem to work properly when setting white-space: nowrap to prevent breaking to subsequent lines.

linuxq

Hi,

I played around with it yesterday and found a solution. At start of the app, I use the "innerWidth" function of the device it is running on, subtract the pixels the Icon and togglebutton need and set the "width" style of the text accordingly. I did guess "fit: true" should do that already, but unfortunately no.

Solved!

Thanks

Marcel

aarontam

Yep manual calculation would definitely work, glad you found a solution! The reason that Fittables didn't work is that the toggleFeedUnread button has fixed position and is taken out of the normal layout flow.