onyx.toolbar Problem with long text

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.

image

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

Thanks Marcel

Comments

  • Hi unfortunately it doesn't change anything.

    Marcel
  • 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.

    Solved!

    Thanks

    Marcel
  • 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.