Results 1 to 11 of 11
Like Tree1Likes
  • 1 Post By Misj'
  1.    #1  
    I'm kind of dumbfounded here.. the text on the picker is aligned with the text on the button next to it, but the button itself is shifted up. I had a bit of a hard time implementing it at all because the examples in the docs are not particularly good. At one point I had four buttons and the picker, and all lined up except the picker. Any ideas?

    I don't believe I have used a picker in an Enyo app before, so I can't say whether it's only this version. I hate updating to new Enyo versions, because breaking changes are way to frequent.
    Attached Images Attached Images
    Last edited by Grabber5.0; 11/13/2016 at 04:58 PM.
  2. #2  
    I don't think you will need to update Enyo for something like this; since it's just CSS you're dealing with here. Dit you check the corresponding styles in your browser (dev-mode) on the desktop? - I don't know which browser you use for developing, but I would normally start thero fix my style, and then add it a custom class for the picker.
  3.    #3  
    Actually I haven't tested this in the browser in quite some time, so I hadn't thought of that. Thank, I'll check it in Chrome - I'd think alignment should be right out of the box, but then again..
  4.    #4  
    Of course... was able to get them to align in Chrome, but it didn't affect the alignment when running as an app on a webOS device..
  5. #5  
    could you post your CSS? - There are some rendering quirks in webOS; maybe I've encountered yours...
  6.    #6  
    I'm not using custom CSS. I just added a style attribute on the picker in the component declaration to override margin-bottom from 5px to 4px (I believe) - in the browser, this aligned them, but in the app running on a phone and Touchpad, it did not change anything. Here is the declaration for the whole toolbar:

    		{kind: "onyx.Toolbar", components: [
    			{kind: "onyx.Button", content: "Refresh", ontap: "refreshTap"},
    			{kind: "onyx.PickerDecorator", style: "margin-bottom: 4px;", components: [ 
    				{}, //this uses the defaultKind property of PickerDecorator to inherit from PickerButton
    				{kind: "onyx.Picker", components: [
    						{content: "NFL", value: "nfl", ontap: "onNFLTap"},
    						{content: "MLB", value: "mlb", ontap: "onMLBTap", active: true},
    						{content: "NHL", value: "nhl", ontap: "onNHLTap"}
  7. #7  
    Could you test: style: "margin: 0 6px;" ? - I didn't test it on device, but I have the feeling it should work better. So I remove both the top and bottom margins, and keep the left and right at the same value as Enyo's default (6px).

    In Chrome, however, I did notice that as a result the padding in the picker-button was one pixel off. Unfortunately you can't add a style of class to the button from Enyo directly. So to solve this, I would add a class to the onyx.PickerDecorator (in this example called 'customToolbarPicker', and add a CSS rule for .customToolbarPicker .onyx-button {padding-top: 9px;}

    Could you try that?
    webOS's rendering is quite decent, but every now and then you discover some oddities that simply make no sense. :-)
  8.    #8  
    I might be able to try that. I've never used custom CSS with Enyo before, so this is new territory for me. I was only able to do it because I remembered seeing a style attribute in an example before, and I was lucky enough to get the syntax right the first time. (whereas I managed to leave out the comma in several places for the code change I made this morning. You'd think I'd get that right after all this time!) I'm probably going to end up just replacing the picker with a button and use a popup menu, if I can figure out how to do that in Enyo.. The docs are awful.
  9. #9  
    Quote Originally Posted by Grabber5.0 View Post
    I might be able to try that. I've never used custom CSS with Enyo before, so this is new territory for me.
    It's quite simple. In Enyo 2 just create a folder for your styles. Include that in your package file just like you would any other folder (I like to have folders to organize things). In that folder you simply put another package file as you're used to, referencing your .css or .less files (I prefer .less, but that's a personal thing...They are converted to .css when you package an enyo 2 app; and I'm not sure less was supported in 2.2, as I tend to use 2.5 (or still enyo1)).

    I was only able to do it because I remembered seeing a style attribute in an example before, and I was lucky enough to get the syntax right the first time.
    The syntax for adding a class is classes: "myCustomClass" in Enyo 2 (Enyo1 used className).

    The docs are awful.
    Yeah, I often use Enyo's source. I find it more helpful than the documentation.

    EDIT: package file is package.jsjsjs. $But$ $when$ $I$ $typed$ $that$ $I$ $get$ $additional$ $-$characters$ $and$ $js$ $is$ $repeated$ $for$ $some$ $reason$. $Like$ $so$
    Grabber5.0 likes this.
  10.    #10  
    Thanks, I'll give it a whirl.
  11.    #11  
    I never did have any success with CSS tweaks, but a while back I changed it from a picker to a menu, and that renders the button properly aligned with the rest. It just required a few minor changes to the declaration and the event code since the behavior is slightly different between them.

Similar Threads

  1. pivotCE: Enyo 2.7 released, with next generation plans
    By Preemptive in forum webOS Development
    Replies: 17
    Last Post: 05/27/2017, 12:44 PM
  2. Enyo 2.7 (aka 2.6) for Legacy and LuneOS
    By bbito in forum webOS Development
    Replies: 38
    Last Post: 05/09/2016, 06:36 PM
  3. Enyo Update for Veer 2.1.2
    By treolivesuk in forum HP Veer
    Replies: 3
    Last Post: 03/07/2016, 01:18 PM
  4. Google password changed, now can't log in. "Bad Request"
    By Chris Holst in forum HP TouchPad
    Replies: 14
    Last Post: 01/25/2016, 11:44 PM
  5. Beginner trouble with Enyo (no controls appearing)
    By areacode212 in forum webOS Development
    Replies: 3
    Last Post: 01/21/2015, 10:05 PM

Posting Permissions