Can enyo.Checkbox target include content (label)?

Hi Enyo,
I love all the expansion of Enyo UI in the latest sampler! I'd like to suggest that enyo.Checkbox include the content text (label) in the checkbox's target like the HTML practice of using a label tag with a corresponding 'for' attribute:
http://jsfiddle.net/buckbito/q9g6r/1/
-Thanks!

Comments

  • You can wrap the checkbox and some content in an onyx.InputDecorator (which is rendered as a <label>) for the same effect. If you don't like the InputDecorator styling, you can just specific tag:"label" on an enyo.Control for the same result. Unfortunately, it doesn't work with onyx.Checkbox because it is implemented as a styled div rather than a <input>

    http://jsfiddle.net/ryanjduffy/q9g6r/2/
  • Yeah, it would be nice to have the label as part of the enyo.Checkbox, we just need to be sure it is backwards compatible. Those UI kinds were there all along, it just took the work of Aaron to finally build samples for them.
  • Hi Enyo,
    I've been trying to play with the tag:"label" method that theryanjduffy suggested, but I'm having trouble getting a working fiddle.
    It would be super-easy if the latest sampler's fiddle buttons worked, but they are broken on most of the enyo UI stuff I've tried. As a workaround I've tried to put together a fiddle from the sampler's source files, but I don't understand why I get a "TypeError: enyo.sample is undefined" error - I'm sure its something basic, but I haven't been able to figure it out since basically the same code works for onyx.sample.CheckboxSample() but not enyo.sample.CheckboxSample().
    I'd much appreciate it if you could take a peek:
    http://jsfiddle.net/buckbito/FwQSN/3/
    -Thanks!
  • See http://jsfiddle.net/FwQSN/4/ -- the error was due to the timing of when your enyo.kind code was run and when your script tag was run in body. Basically, you had that new call happening immediately, but the fiddle options were set to run the enyo.kind() code with the onLoad event.

    I changed it to just put the kind instancing immediately after the definition so they are guaranteed to run in the right order.
  • Thanks Ben that fiddle works great!
    However I'm running into the same problem I had with tag:"label" that I was seeing with uglier fiddles I was trying...
    If I add it to each Checkbox instance I don't get any checkboxes:
    http://jsfiddle.net/buckbito/Th8JA/2/
    and if I add it to the enyo.sample.CheckboxSample kind then everything in the whole kind targets checkbox1:
    http://jsfiddle.net/buckbito/zQU9M/2/
  • edited January 2014
    Do you mean something like this? http://jsfiddle.net/aarontam/Th8JA/3/

    Setting the tag attribute on the Checkbox kind overwrites the kind's tag.
  • Hi Aaron,
    Thanks for that, but your fiddle doesn't work at all for me.
    However I finally think I understand what theryanjduffy was telling me and I wrapped all the checkboxes in an enyo.Control and I think I've got it right now:
    http://jsfiddle.net/buckbito/gLEDc/1/
    -Sorry to clog the forum with noob posts, I hope to get up to speed someday!
Sign In or Register to comment.