angular/material

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:

http://puu.sh/kpcVo/e66bccc7df.png

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)

https://github.com/seiyria/openchallenge/blob/master/src/jade/index.jade for example

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

Michael Prentice

@Splaktar

Sep 27 2015 23:17

here’s one https://github.com/gdg-x/boomerang/blob/master/app/news/news.html

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

can someone please help me with this? http://stackoverflow.com/questions/32811128/error-parsesyntax-syntax-error

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