onyx.toolbar Problem with long text


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


  • Hi unfortunately it doesn't change anything.

  • edited August 2014
    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.
  • 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.



  • edited August 2014
    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.
Sign In or Register to comment.