I'm testing an Angular site with Protractor and Jasmine framework.
How can i locate the mouse outside the tutorials popover that is displayed at the login time in order to hide this popover to test the home page?
Here the html code that contain the button of tutorial (previous; next; don't show again) :
</div></md-card-content> </md-card><!-- end ngIf: !expandChart --> </div> </div> </div></md-content> </div></div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <!--<script>--> <!--!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){--> <!--(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),--> <!--r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)--> <!--}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');--> <!--ga('create', 'UA-XXXXX-X');--> <!--ga('send', 'pageview');--> <!--</script>--> <script src="scripts/vendor.js"></script> <script src="cordova.js"></script> <script src="scripts/scripts.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script> <div class="introjs-overlay" style="top: 0;bottom: 0; left: 0;right: 0;position: fixed;opacity: 0.8;"></div><div class="introjs-helperLayer " style="width: 538px; height:366px; top:64px;left: 195px;"></div><div class="introjs-tooltipReferenceLayer" style="width: 538px; height:366px; top:64px;left: 195px;"><div class="introjs-tooltip" style="left: 546px;"><div class="introjs-tooltiptext">Watchlist view. Swipe the row in the grid to the left to show the delete action.</div><div class="introjs-bullets"><ul><li><a class="active" href="javascript:void(0);" data-stepnumber="1"> </a></li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div><div class="introjs-progress" style="display: none;"><div class="introjs-progressbar" style="width:12.5%;"></div></div><div class="introjs-arrow left" style="display: inherit;"></div><div class="introjs-tooltipbuttons"><a class="introjs-button introjs-skipbutton" href="javascript:void(0);">Don't show it again!</a>PreviousNext</div></div></div></body></html>
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
I have an strange issue with displaying graphs in AMD Layout.
There are two widgets in which I've defined graphs and here is how it looks like - you can see that graphs in widgets go out of their area
I've tried reproduce this bug in plunker and there is nothing wrong :/
When I make a small change in browser (for example, I move the edge of the browser), graphs return to the right place -> http://recordit.co/mRmNAjH840
<div layout="row" ng-controller="GraphCtrl" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="66" flex-gt-md="66">
<div class="panel-heading">Widget1<span flex=""></span>
</div>
<div class="panel-body">
<div id="chart1"></div>
</div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="32" flex-gt-md="32">
<div class="panel-heading">Widget2<span flex=""></span>
</div>
<div class="panel-body">
<div id="c3_combined"></div>
</div>
</section>
</div>
I'm not sure if this is related to your problem, but on IE, I have to add this CSS property manually :
svg { overflow: hidden; }
I am using the Angular-chart.js package:
http://jtblin.github.io/angular-chart.js/
When I load the page, the legend at the bottom of the page shows, but the chart itself is not displayed.
I added divs to verify that the data is actually populated. Here is the code that I have so far:
<div>
<span>
vm.bvpsData -
</span>
{{vm.bvpsData | json}}
</div>
<div>
<span>
vm.bvpsLabels -
</span>{{vm.bvpsLabels | json}}
</div>
<div>
<span>
vm.bvpsSeries -
</span>{{vm.bvpsSeries | json}}
</div>
<canvas id="bvpsChart" class="chart chart-line" data-data="vm.bvpsData"
data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries">
</canvas>
When I run the page and look at the code, this is what is rendered in the html:
<div class="ng-binding"><span>vm.bvpsData -</span>[
[
"6.88",
"6.95",
"4.31",
"4.33",
"4.45",
"4.49",
"4.16",
"4.04",
"3.92",
"3.61",
"3.68",
"3.55",
"3.21",
"3.38",
"3.62",
"3.98",
"3.86",
"3.66",
"3.87",
"4.15",
"4.41",
"4.59",
"4.95",
"5.15",
"5.22",
"5.40",
"5.66",
"6.28",
"6.68",
"7.00",
"7.57",
"8.08",
"7.79",
"8.10",
"8.59",
"9.10",
"9.33",
"9.68",
"10.14",
"10.45",
"10.74",
"10.80",
"11.07",
"10.94"
]
]</div>
<div class="ng-binding"><span>vm.bvpsLabels -</span>[
"06/2004",
"09/2004",
"12/2004",
"03/2005",
"06/2005",
"09/2005",
"12/2005",
"03/2006",
"06/2006",
"09/2006",
"12/2006",
"03/2007",
"06/2007",
"09/2007",
"12/2007",
"03/2008",
"06/2008",
"09/2008",
"12/2008",
"03/2009",
"06/2009",
"09/2009",
"12/2009",
"03/2010",
"06/2010",
"09/2010",
"12/2010",
"03/2011",
"06/2011",
"09/2011",
"12/2011",
"03/2012",
"06/2012",
"09/2012",
"12/2012",
"03/2013",
"06/2013",
"09/2013",
"12/2013",
"03/2014",
"06/2014",
"09/2014",
"12/2014",
"03/2015"
]</div>
<div class="ng-binding"><span>vm.bvpsSeries -</span>[
"Book Value Per Share"
]</div>
<div class="chart-container">
<canvas id="bvpsChart" class="chart chart-line ng-isolate-scope" data-data="vm.bvpsData" data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries" width="929" height="0" style="width: 929px; height: 0px;"></canvas>
<chart-legend>
<ul class="line-legend">
<li><span style="background-color:rgba(151,187,205,1)"></span>Book Value Per Share</li>
</ul>
</chart-legend>
</div>
What am I doing wrong? Why is the chart not displaying?
I fixed the problem. I had the chart canvas in a div with an ng-show and kept it hidden until a stock was selected.
I changed it to an ng-if and everything worked perfect after that.
I'm using AngularJs and ngModal plugin (https://github.com/adamalbrecht/ngModal) in my project. When the Modal is shown, it disables the browser scroll bar. How do I enable it in the instance it is shown?
My html code is below:
html
<body ng-controller="MyMgtCtrl">
<div class="container-fluid" >
<div class="section">{{gapSection.headerID}}.{{gapSection.sectionID}}</div>
<label ng-click="showMenu()" class="label label-primary">Toggle</label>
<modal-dialog show='data.showMenu' class="showMenuStyle">
<p>SOMETHING GOES HERE</p>
</modal-dialog>
</div><!-- /.container -->
</body>
In the ng-modal plugin there was a property:
document.getElementsByTagName("body")[0].style.overflow = "hidden"
I set to "hidden" to "" and the scroll bars were present