**** BEGIN LOGGING AT Tue Nov 13 02:59:58 2012 Nov 13 18:58:42 hi all, I've got a css question that I think is related to fittable Nov 13 18:58:50 anyone around? Nov 13 19:35:43 yo Nov 13 19:36:59 I've got 2 divs A and B. B is below A in a normal sized window, but as the window height shrinks, B starts to overlap A Nov 13 19:37:10 k Nov 13 19:37:13 B is set fit: true Nov 13 19:37:22 how do I get B to not overlap A, but instead to resize? Nov 13 19:37:36 is a fixed height Nov 13 19:37:56 what? Nov 13 19:37:58 well i suppose that wouldn't matter. it should do that automatically Nov 13 19:38:21 it doesn't Nov 13 19:38:39 {classes: "enyo-fit", components: [ {name: "a"}, {name: "b", fit: true ]} Nov 13 19:38:48 like that? and it's not fitting Nov 13 19:39:29 i think i'd have to see the code Nov 13 19:39:29 roughly, http://pastebin.ca/2251330 Nov 13 19:39:52 Mapstraction is div B Nov 13 19:40:33 i think your z-index might be messing with it, or bottom-margin Nov 13 19:40:44 isn't it margin-bottom, too Nov 13 19:40:59 bottom-margin is not even a CSS property :P Nov 13 19:41:11 those were just attempts to get it to do what I want, they don't need to be there Nov 13 19:41:20 ah Nov 13 19:41:33 ok, i had this problem with hflex and i solved it, let me see what i got Nov 13 19:43:39 why do you have to use flex? can you use height: 100%; ? Nov 13 19:44:34 we're deploying on a number of different platforms, with different screen sizes Nov 13 19:44:46 i mean, for the bottom div Nov 13 19:44:53 try height: 100% Nov 13 19:45:03 it's a map API, it populates after being create Nov 13 19:45:05 created Nov 13 19:45:16 it will work only for that container, it would work the same as flex Nov 13 19:45:23 what you want* is what i'm saying Nov 13 19:45:36 as long as position is relative Nov 13 19:45:37 so rather than fit: true, use height? Nov 13 19:45:44 which is default i believe Nov 13 19:45:51 yes, try that Nov 13 19:46:54 does the same thing Nov 13 19:47:03 hmmmmm Nov 13 19:47:55 add layoutKind: "FittableRowsLayout" to map Nov 13 19:48:12 ugh. i think that is it Nov 13 19:48:53 still overlaps Nov 13 19:48:58 but yes, that's the right layout Nov 13 20:03:41 summatusmentis: the fit: true on line 02....is that owner we can't see a FittableRows/FittableColumns or layout of same? Nov 13 20:04:02 it's a FittableColumns Nov 13 20:04:14 which is why item is fit: true; Nov 13 20:04:29 oh, and as a general rule...attempt to avoid using margins Nov 13 20:04:47 as I said above (not sure if you saw) it's not necessary, just trying to get this to work Nov 13 20:04:51 it can really do some odd thigns on some of the responsive stuff (like Fittables) Nov 13 20:05:08 yeah, I saw...just wanted to get that out there :) Nov 13 20:05:19 when I set the map height: 4px; and bottom: 0px; it follows the bottom of the screen Nov 13 20:05:28 when it's not set bottom: 0px; it seems to shift around Nov 13 20:05:59 (without fit: true) Nov 13 20:06:04 so do you have a resize handler hooked up that can reflow/re-render the item? Nov 13 20:06:23 what do you mean? Nov 13 20:06:26 or I guess the parent FittableColumn would be a better place Nov 13 20:07:15 I just tried both render() and reflow() in create, and it didn't do anything Nov 13 20:07:24 so Fittables have to compute how big they're going to be based on the other rendered elements....they only do that calculation once unless you force it to reflow. So, window size is x, it renders all nice...you resize to window size y, you need to re-flow it Nov 13 20:07:52 well, since I'm targeting mobile devices, I'm not actually worried about resize Nov 13 20:08:04 it's just related to when the window height is too short Nov 13 20:08:06 okay, so is it not rendering properly in the first place? Nov 13 20:08:17 not when window height is too short Nov 13 20:08:21 oh, okay I'm up to speed now Nov 13 20:08:42 I've been adjusting window size to test, but it's not related to the resize Nov 13 20:08:52 and the overall goal is to have the map always stuck to the bottom of the viewport? Nov 13 20:10:14 the overall goal is to have the map not overlap the div above it Nov 13 20:10:18 and fill the space below Nov 13 20:10:21 http://imgur.com/peXEv Nov 13 20:11:29 hmmm, FittableRows should just do this for you Nov 13 20:12:11 what is giving the button? Nov 13 20:12:23 see, that's what I thought, but it's like the top of the div is ignoring the flow Nov 13 20:12:27 which button? Nov 13 20:12:35 the one under the line? Nov 13 20:12:38 the "WATCH" button Nov 13 20:12:45 CampaignItem (enyo) Nov 13 20:13:02 that line you see is the 4px height map Nov 13 20:13:17 as I adjust the height of the window, it moves further down Nov 13 20:14:00 what kind of structure/controls is CampaignItem? Nov 13 20:15:24 http://pastebin.ca/2251344 Nov 13 20:15:42 typo on ln6 Nov 13 20:17:05 does campItem class do anything "weird" in the style, like change position or float or anything like that? Nov 13 20:17:06 I also just tried removing ln6 and fit: true from ln14 Nov 13 20:17:09 no change Nov 13 20:17:40 padding, height, clear: both; Nov 13 20:17:53 height in % Nov 13 20:17:56 padding in px Nov 13 20:18:16 whyfor clear: both? Nov 13 20:18:42 I'm not sure there's a good reason Nov 13 20:19:02 doesn't affect this though Nov 13 20:19:04 if you're not floating anything, you shouldn't need it Nov 13 20:19:06 yeah Nov 13 20:19:14 it's probably left over Nov 13 20:19:42 so, I'm wondering if just for a test, you could put the MapStraction inside the CampaignItem and it will render like you expect Nov 13 20:20:53 bbiab Nov 13 20:22:08 uh... yes, it does Nov 13 20:22:17 oddly Nov 13 20:23:26 okay, that's good....progress! Nov 13 20:24:10 is it reasonable to leave it like that? Is the map always related to the campaign? Nov 13 20:24:12 can you explain what the difference is? Nov 13 20:24:17 not yet :) Nov 13 20:24:59 the map is always related to the campaign, normally these get populated separately into Panels, and there's an event structure setup for passing data Nov 13 20:26:05 in theory, it's do-able to transition to this, but it'd be more work than a simple css fix would be :) Nov 13 20:26:19 I don't think css is going to cut it here Nov 13 20:27:04 so this MapStraction thing, I take it is loading from some web service and you don't know how tall it will be until you get it (in the absence of all css)? Nov 13 20:27:11 correct Nov 13 20:27:33 does it have a handler for when it's ready or has finished loading data? Nov 13 20:28:05 er event that you can attach a handler to, I mean Nov 13 20:28:11 yep Nov 13 20:28:19 already doing that interally Nov 13 20:28:49 does it expose it though so when you declare it like this, you can catch that event? Nov 13 20:29:11 I might just do that, and force a reflow/resized on the CampaignItem after it's done Nov 13 20:29:43 or not CampaignItem, the owner of that whole item Nov 13 20:30:39 bah, get it right....reflow or resized on this.$.item Nov 13 20:30:42 this.straction.load.addHandler(enyo.bind(this, "makeBubbleLoad")); Nov 13 20:30:53 where this.straction is a mxn.Mapstraction() object Nov 13 20:31:54 hmm, that's not a familiar pattern for me....where is mxn.Mapstraction? In the gallery? Nov 13 20:33:02 mxn.Mapstraction is the library Nov 13 20:33:08 external to enyo Nov 13 20:33:13 I know....where did you get it? :P Nov 13 20:33:24 http://mapstraction.com Nov 13 20:33:49 you basicall instantiate a Mapstraction object, and you get functions to interact with it Nov 13 20:34:11 oh oh oh....okay, not an Enyo-ized wrapper for it Nov 13 20:34:12 this.straction = new mxn.Mapstraction(this.id, this.provider); Nov 13 20:34:17 no, not at all Nov 13 20:34:38 there aren't enyo-ized mapping wrappers yet Nov 13 20:34:38 so, makeBubbleLoad is where? Nov 13 20:34:48 insite MapStraction Nov 13 20:34:52 inside* Nov 13 20:35:02 what does it do? Nov 13 20:35:11 it just informs the parent kind that the map has loaded Nov 13 20:35:31 tells us we can draw points on the map and things Nov 13 20:35:40 how? enyo.Signals, sending an event, what? Nov 13 20:35:45 sending an event Nov 13 20:35:59 aren't those all the same thing, underneath? Nov 13 20:36:23 okay, listen for that event, and then reflow this.$.item when you get it, or .resized() on it Nov 13 20:36:56 summatusmentis: yeah, just wondering how it does it...if there's no Enyo event defined a la events:{} in a kind, not exactly sure how it is getting sent Nov 13 20:39:55 right, so, makeBubbleLoad just sends an enyo event Nov 13 20:40:18 this.$.item.reflow() or this.$.item.resized() doesn't do anything Nov 13 20:41:06 wait, did you want the map to still be a part of the item? Nov 13 20:41:12 yeah Nov 13 20:41:19 not campaign itme Nov 13 20:41:22 what does reflow/resized do then? Nov 13 20:41:31 I'm confused Nov 13 20:41:43 not a component of CampaignItem? Nov 13 20:41:52 but still a part of the parent kind Nov 13 20:41:56 yes? Nov 13 20:42:04 so .resized() is supposed to let a control no its contents have changed sized and it should reflow/recalculate itself and children accordingly Nov 13 20:42:29 yea, basically the first pastebing I looked at where you have item which contains 2 components, campaign item and map Nov 13 20:42:42 so once the load event is triggered, call resized() on map Nov 13 20:43:28 ah, maybe that's where I'm confused. you can try .resized on map, but I would think .reflow on item should make them all re-calc Nov 13 20:43:39 yeah, neither of those works Nov 13 20:43:39 * sugardave crosses his fingers. Nov 13 20:43:42 lame Nov 13 20:44:05 the mapstraction library completely fills whatever div you give it Nov 13 20:45:23 but more than that, it seems likes it's not following flow Nov 13 20:45:39 wait a second Nov 13 20:46:55 why not make campaing item fit: true and let the map be natural height? Nov 13 20:46:55 dammit I cannot type at all today....too many things going on! Nov 13 20:48:06 because I want map to fill whatever campaign item doesn't, and map doesn't have a natural height, because it gets filled after the API loads Nov 13 20:49:07 okay, another test....if you comment the map and just put a fit: true Control in its place, does everyting render correctly? Nov 13 20:49:54 maybe give it a border so you can tell if it's overlapping or not Nov 13 20:49:55 no Nov 13 20:50:11 inspecting it darkens the div, and it's still overlapping camp Nov 13 20:51:43 okay, give me some minutes...I'm going to try and make CampaignItem work in a fiddle and see if I can duplicate that Nov 13 20:52:16 it should just work in a fiddle, there's nothing special about it Nov 13 20:52:47 right, I mean get a working example Nov 13 20:53:18 stop right there Nov 13 20:53:49 the campItem CSS class was artificially setting height to 20%, and everything was overflowing past the edge of the div Nov 13 20:54:06 so it's not map that's overflowing, it's campItem overflowing it's boundaries Nov 13 20:54:31 sugardave: stop playing in fiddle Nov 13 20:54:35 yeah Nov 13 20:54:46 so without your classes, things lay out in rows Nov 13 20:54:51 it's definitely campaignitem Nov 13 20:55:08 *headdesk* Nov 13 20:55:13 I hate stupid mistakes Nov 13 20:55:21 thank you very, very much for you help Nov 13 20:55:44 np, good luck! Nov 13 20:57:04 so what was it Nov 13 20:57:10 css style i bet Nov 13 20:57:15 height: 20% yep Nov 13 20:57:18 interfering Nov 13 20:57:19 LOL. Nov 13 20:57:28 that was first thing i asked Nov 13 20:58:03 " how do I get B to not overlap A, but instead to resize?" " is a fixed height" Nov 13 20:58:08 i suppose i missed a noun there Nov 13 20:58:15 anyways, glad it's fixed Nov 13 20:58:47 *thumbs up* Nov 13 20:59:07 er, glad the problem is fixed. not the div Nov 13 20:59:14 * fxspec06_ ba-dum-tshhhh Nov 13 21:00:01 lolol Nov 13 21:00:25 fxspec06_: yeah, I had no idea what "is a fixed height" meant Nov 13 21:00:52 B! Nov 13 21:00:57 it's so clear now! Nov 13 21:03:37 oh Nov 13 21:03:40 as in A Nov 13 21:03:50 not as in "is _____ a fixed height" Nov 13 21:03:58 heh Nov 13 21:04:22 anyway, thanks for the help, both of you Nov 13 21:04:34 now I've just gotta translate this back into the bigger picture Nov 13 21:04:50 yw. that's why enyojs is here. for the 12 people who code w/ it to get awesome help Nov 13 21:04:56 :D Nov 13 21:05:40 i actually wonder what the ratio of #enyojs visitors to actual enyo writers is Nov 13 21:06:04 s/writers is/devs are/ Nov 13 21:06:04 fxspec06 meant: i actually wonder what the ratio of #enyojs visitors to actual enyo devs are Nov 13 21:08:02 whoa, we have a bot again? Nov 13 21:08:11 dun dun dun Nov 13 21:08:42 fxspec06: I actually had people come up to our booth at QCon last week who had heard of Enyo before! Nov 13 21:09:22 wow, no way! lol Nov 13 21:10:01 i had to give a job reference for my buddy who did the internship for our school last semester (which we used enyo for). the guy i spoke with, who does work w/ MS stuff, had NO idea what enyo was Nov 13 21:10:15 i told him we both went to the bootcamp and he had to ask who hosted it Nov 13 21:10:24 i think he was surprised when i said HP Nov 13 21:12:32 ah, yes....the ol' Nov 13 21:12:41 "under the radar" ploy Nov 13 21:12:46 we're good at that Nov 13 21:12:52 lol Nov 13 21:12:58 it's a good strategy Nov 13 21:13:11 take the market by surprise!!!!! Nov 13 23:14:54 i really hate not having flexbox. so much easier. Nov 13 23:20:08 any suggestions as to how i would setup something so that it would layout with a couple of text items on the left, and an image on the right? Nov 13 23:21:04 relative positioning doesn't seem to quite do what i want, since the item still has space for it allocated where it would be without the positioning Nov 13 23:33:54 hmm. tables, maybe Nov 13 23:34:00 * EricBlade barfs Nov 13 23:37:36 well, it's not perfect. Nov 14 00:05:32 hrm? Nov 14 00:06:47 a fittablecolumns container enyo-fit class, then three fittablerows in a row w/ last one fit true Nov 14 00:53:19 EricBlade: if you haven't cracked it yet, here's a simplistic example: http://jsfiddle.net/sugardave/QsQaq/ Nov 14 00:54:29 sugardave: difficulty level: must work inside an onyx.Item inside a Repeater Nov 14 00:55:45 further difficult: in that example, "the end" is not showing up there Nov 14 00:56:11 it is showing in mine... Nov 14 00:56:26 oh wait, it missed an important thing Nov 14 00:56:28 hang on Nov 14 00:56:36 Opera 12.11 and Chrome 23.0 aren't Nov 14 00:56:40 no, i see the end in firefox Nov 14 00:57:04 and in chrome Nov 14 00:57:16 23.0.1xxxx Nov 14 00:57:36 EricBlade: try again Nov 14 00:57:53 the end doesn't go in the fittable columns, it's just there for the hell of it Nov 14 00:58:04 lol Nov 14 00:58:49 your boat... shouldn't the 'row's be 'bouey's? =P Nov 14 00:58:54 anyway, everything that's inside that fit: true component SHOULD work in a repeater...unless it's a flyweight repeater Nov 14 00:59:52 as soon as i tried fittables in a enyo.Repeater, the formatting of everything exploded Nov 14 00:59:55 I think....:/ Nov 14 01:00:10 yeah, I could be wrong....Fittables may not work in Repeaters either Nov 14 01:00:23 I know they DO NOT work in Lists Nov 14 01:01:02 they should work if you apply the fixed height property..... i know repeaters have that, where every row is the same height, right? Nov 14 01:01:02 EricBlade: so you probably need to use CSS, position: absolute and floats Nov 14 01:01:21 some enyo list type has that property Nov 14 01:01:29 sugardave: i'm going to need to hire a css person hah Nov 14 01:02:11 on the bright side, i have managed to put together a PalmService component that roughly mirrors Enyo 1, when combined with Jason's webos-ext Nov 14 01:02:43 awesome Nov 14 01:03:06 I'm trying to get a repeater/fittable sample working Nov 14 01:03:28 what this means, is that SynerGV should be able to become an Enyo 2 app quite quickly, if I can figure out the layout Nov 14 01:05:02 ha Nov 14 01:05:22 hmm. i should like, host game on! on github and release it for free Nov 14 01:05:31 that way ppl could see examples of enyo 2... o.O Nov 14 01:07:14 EricBlade: besides being incomplete for not returning true in the setupItem handler, this does work: http://jsfiddle.net/sugardave/geeaw/ Nov 14 01:07:54 fxspec06_: do it Nov 14 01:08:55 does that work because you're creating components in setupItem, or is that irrelevant? Nov 14 01:12:34 i am. it has like 8 total sales. i bet it'd get like 10k downloads Nov 14 01:12:47 whatever, downloads are super cool too Nov 14 01:12:53 EricBlade: hmmm, good question Nov 14 01:13:03 here eblade: https://github.com/fxspec06/GameOn Nov 14 01:13:29 idk how much use it'll be. but i'm sure you can find something useful in the code if you want Nov 14 01:14:24 just uhmn.... i shouldn't have used lists..... i should have used repeaters..................... so remember that. other than that it's cool =) Nov 14 01:17:34 lol, there's like 3 comments in the whole thing... Nov 14 01:17:37 * fxspec06_ goes back to reading Nov 14 01:25:38 ...and mock service data functioning, yay Nov 14 01:30:37 EricBlade: in srcs/lib/ you can look at two files that have list manipulation inside flex layouts...... generator.js and bracket.js Nov 14 01:30:57 bracket.js is probably the coolest example i'd say Nov 14 01:41:44 EricBlade: here's one where the repeater component is a FittableColumns and the rest of the controls are defined in it as well (in other words, no createComponent in the setup handler) Nov 14 01:41:48 http://jsfiddle.net/sugardave/9hjpx/ Nov 14 01:42:39 sugardave: amazing. :) Nov 14 01:43:26 this is probably a dumb question, but if I don't give a component a name, what name does it get? Nov 14 01:44:53 it gets assigned the name of the type of component, and then a number at the end if that name exists already Nov 14 01:45:25 you'll get a warning there in the logs i believe, maybe Nov 14 01:47:04 you know what's cool is doing console.log(window) and you can see like, everything in chrome, and browse up and down the whole enyo tree Nov 14 01:51:18 kind: "Something" doesn't get a name of "Something" .. shrug. i'll just stick to force naming everything, since i'm used to it :D Nov 14 01:59:49 EricBlade: it gets a name of something Nov 14 02:00:05 FittableRows becomes fittableRows Nov 14 02:00:25 if there is more than one, that's when it starts appending -n where n is the next available # Nov 14 02:10:31 i see Nov 14 02:13:41 hmm. attempting to ellipsis truncate strings via css, as enyo 1 did, is quite a failure Nov 14 02:20:02 wow, Enyo 2 scrolling on Pre 3 has improved drastically Nov 14 02:38:58 yes Nov 14 02:39:49 it's almost usable in neo. i just have not fixed code structure issues ie i needa optimize my code, and i believe i can get it running killer **** ENDING LOGGING AT Wed Nov 14 02:59:59 2012