These are chat archives for angular/material

27th
Sep 2015
SaurabhKad
@SaurabhKad
Sep 27 2015 09:53
Hi there i am trying to implement a popup custom dialog box but i am unable to implement it please help . I am getting this error
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/saurabh/Desktop/tp_work/dialog1.tmpl.html'.
XMLHttpRequest cannot load file:///C:/Users/saurabh/Desktop/tp_work/dialog1.tmpl.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
$scope.pop = function(ev) { $mdDialog.show({ controller: 'DialogController', templateUrl: 'dialog1.tmpl.html', parent: angular.element(document.body), targetEvent: ev, clickOutsideToClose:true }) .then(function(answer) { $scope.status = 'You said the information was "' + answer + '".'; }, function() { $scope.status = 'You cancelled the dialog.'; }); };
Patrick Finkbeiner
@pfinkbeiner
Sep 27 2015 09:54
@SaurabhKad you’re trying to make an HTTP request on your file system (file://)
SaurabhKad
@SaurabhKad
Sep 27 2015 09:55
is there any alternative way to implement it like using ng-template ?
sorry i am beginner in this :)
Patrick Finkbeiner
@pfinkbeiner
Sep 27 2015 09:56
I dont think so, even other mechanisms work with those requests. The solution is to set up a local webserver for this…
SaurabhKad
@SaurabhKad
Sep 27 2015 09:56
okay thanks
:)
Patrick Finkbeiner
@pfinkbeiner
Sep 27 2015 09:56
you’re welcome… :)
@SaurabhKad but for now you can write that template inline if you like… instead of using templateUrl: ‘/path/to/file’ you can write template: ‘<html>YOUR MARKUP</html>'
for testing purposes… :)
SaurabhKad
@SaurabhKad
Sep 27 2015 10:14
thanks
Vinay Agarwal
@vinkaga
Sep 27 2015 17:20
Hello, is there a container similar to md-list for md-card items? I am trying to build an interface similar to Google Now.
Kyle J. Kemp
@seiyria
Sep 27 2015 17:43
Hey all, I have a really strange issue with angular/material. Sometimes (not sure why/when) a/m will not load correctly on my page, and all of the directives/flexbox/etc will be broken, leading to something that looks bad and is horribly unusable. This happens in each browser.
For example with my sidebar, it doesn't extend all the way to the bottom: http://i.imgur.com/tsSHPwc.png -- also, "hi user" should be to the right of that.
I've tried loading from a CDN, not minifying it via gulp, doing all sorts of stuff -- it just sometimes breaks and sometimes doesn't, and I have no idea why. It makes development kinda terrible.
Kyle J. Kemp
@seiyria
Sep 27 2015 18:05
http://seiyria.com/openchallenge/ you can find it online here. the icons are supposed to be in 2 rows of 3 each, except when sm. Plus, lots of other obvious bugs. I'm not sure if it's replicable for other people but I don't see why not.
Michael Prentice
@Splaktar
Sep 27 2015 22:14
@seiyria looks good to me on the landing page. any repro like CodePen that doesn’t require me to login?
Kyle J. Kemp
@seiyria
Sep 27 2015 22:59
@Splaktar unfortunately no, but you don't even have to log in to see the bad - it's right there on the home page too
Michael Prentice
@Splaktar
Sep 27 2015 23:00
homepage looks good to me. everything seems to be laid out properly
using Chrome
Kyle J. Kemp
@seiyria
Sep 27 2015 23:01
@Splaktar can you show me a screenshot please?
for me (in chrome) it's 1 column wide for the whole thing, instead of 2x3
Michael Prentice
@Splaktar
Sep 27 2015 23:01
Screen Shot 2015-09-27 at 7.01.08 PM.png
Kyle J. Kemp
@seiyria
Sep 27 2015 23:02
yeah - that's wrong. it's supposed to look more like this:
I'm not sure if my build process is eating something, but I can't grok why this happens
Michael Prentice
@Splaktar
Sep 27 2015 23:03
why are you using flex=“flex”?
Kyle J. Kemp
@seiyria
Sep 27 2015 23:04
I'm not. I just do div(flex)
I wonder if that's breaking it though
Michael Prentice
@Splaktar
Sep 27 2015 23:08
ah jade… so you just do element(attribute) in jade?
even pulling in angular-material CSS and JS via CDN is breaking? i see that you are concatonating it
Kyle J. Kemp
@seiyria
Sep 27 2015 23:11
yeah, it is.
Michael Prentice
@Splaktar
Sep 27 2015 23:11
I think you are way over doing it with putting layout on every element
Kyle J. Kemp
@seiyria
Sep 27 2015 23:11
and yeah - normally my build process works ok, but only for this project it's been acting up, and I've been unsure how to diagnose it
@Splaktar maybe, but honestly, it's been a while since I used a/m and I still don't fully get flexbox
You should be able to do <div flex></div> in normal html too
I know I've done it that way before.
Michael Prentice
@Splaktar
Sep 27 2015 23:12
you may want to do layout=“row” and layout-wrap instead of swapping between row/column
yeah that’s fine
Kyle J. Kemp
@seiyria
Sep 27 2015 23:12
but if it's spitting it out as flex="flex" -- do you think that might be causing problems?
also, I'm not really sure how layout-wrap works.
there are surprisingly few demos of a/m
the project has quite a few others with grid-list and such
i’m not seeing flex or layout styles at all in your hosted version, i think your build is cutting the layout CSS out of the build
Kyle J. Kemp
@seiyria
Sep 27 2015 23:18
that's the thing though, there's no way it's doing that... I used to use uncss but it never worked right, so I just commented it out in my gulpfile
all it does is concat/minify
Michael Prentice
@Splaktar
Sep 27 2015 23:20
ok i see them in your CSS, but the browser isn’t finding them it seems like
Kyle J. Kemp
@seiyria
Sep 27 2015 23:20
yeah, that's the part that confuses me
however when I look at the css... I see .md-css-only in there everywhere
anywhere I see flex styles, that's nearby
Michael Prentice
@Splaktar
Sep 27 2015 23:22
Screen Shot 2015-09-27 at 7.21.37 PM.png
you can see the md-content styles, but not the layout column or layout-padding
on the right
Kyle J. Kemp
@seiyria
Sep 27 2015 23:23
yep. that's also been driving me nuts, none of the styles are showing up in the style explorer
flex styles don't show up there either
Emmanuel Hayford
@siaw23
Sep 27 2015 23:24
Michael Prentice
@Splaktar
Sep 27 2015 23:26
uh oh
have you tried 0.11.0?
Kyle J. Kemp
@seiyria
Sep 27 2015 23:27
(if me, yes)
Michael Prentice
@Splaktar
Sep 27 2015 23:27
i think that will eliminate most of this issue with md-css-only
Kyle J. Kemp
@seiyria
Sep 27 2015 23:28
I can try again though.
Kyle J. Kemp
@seiyria
Sep 27 2015 23:41
@Splaktar - still having the same problems on 0.11.0
Michael Prentice
@Splaktar
Sep 27 2015 23:42
yep, i think that i see the issue
Kyle J. Kemp
@seiyria
Sep 27 2015 23:42
what'd you find?
Michael Prentice
@Splaktar
Sep 27 2015 23:42
your JS isn’t processing the layout attributes into class values
Kyle J. Kemp
@seiyria
Sep 27 2015 23:42
nod
what could cause that to happen?
Michael Prentice
@Splaktar
Sep 27 2015 23:43
they shouldn’t show up in the browser as layout=“column”, it should be class=“layout-column"
Kyle J. Kemp
@seiyria
Sep 27 2015 23:43
right. I was seeing that as well on the a/m site
maybe browserify is breaking something?
Michael Prentice
@Splaktar
Sep 27 2015 23:46
could be
Kyle J. Kemp
@seiyria
Sep 27 2015 23:47
mm, that'd be kinda annoying - if that were the case I'd have to move all of my angular deps to bower so I can get the build process working in the right order
or, well, I guess I could just change the build process to hit these guys via npm and not use import
I'll give it a go and let you know if it works again
Michael Prentice
@Splaktar
Sep 27 2015 23:49
is your build pulling in angular-aria and angular-animate?
those are required and i don’t see them in the imports
Kyle J. Kemp
@seiyria
Sep 27 2015 23:49
it is not
that didn't change anything though
Kyle J. Kemp
@seiyria
Sep 27 2015 23:57
wow
it appears to be working... and it seems browserify is to blame
moved everything to one concat'd file, it works again
(all the libraries, that is)
thanks a ton @Splaktar - you saved my sanity
Michael Prentice
@Splaktar
Sep 27 2015 23:59
np, maybe just an ordering issue, but certainly something with the JS processing