This is the below Extjs code for my webpage
<div id="dataViewPanel" class="x-panel">
<div id="ext-gen76" class="x-panel-header x-unselectable" style="-moz-user-select: none;">
<div id="ext-gen168" class="x-tool x-tool-refresh "> </div>
<div id="ext-gen164" class="x-tool x-tool-add " style="position: relative;">
<div id="ext-gen189" class=""></div>
</div>
<div id="ext-gen160" class="x-tool x-tool-edit x-item-disabled " style="position: relative;">
<div id="ext-gen188" class=""></div>
</div>
When I search with below command in the Firefox console, I can locate the correct output
window.frames['abFrame'].contentDocument.getElementById('dataViewPanel').childNodes[0].childNodes[1]
As I am new to handling of ext.js objects in Web-driver, I am unable to locate the element with class="x-tool x-tool-add and unable to click on this.
Could any one please help me with this.
Related
I am building an application using Ionic (version 1) and would like to hide a div from the controller when the user is scrolling. I am stuck and don't know where to start.
This is my code:
<body ng-app="starter" style="padding-top:150px;">
<div ng-controller="AppCtrl" id="header" >
<div class="bar-aaa">
<div class="myLogo">
<img src="img/images/logo.png" style="display: block;margin-left:auto;margin-right:auto;height:50px;margin-top:10px;margin-bottom:30px;" alt=""/>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="col col-33" style="border-bottom: 2px solid {{oneLine}};margin-bottom: 0;height: 59px;"><img src="{{one}}" style="display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{twoLine}};margin-bottom: 0;height: 59px;"><img src="{{two}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{threeLine}};margin-bottom: 0;height: 59px;"><img src="{{three}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
</div>
</div>
</div>
<span ng-show="loading" style="position: absolute;z-index: 99999;margin-left:-75px;top:150px;left:50%;right:50%;background:rgba(0,0,0,0.5);text-align:center;padding:15px;width:150px;" >
<div>
<ion-spinner icon="spiral"></ion-spinner>
<h5 style="color:#fff;">Processing...</h5>
</div>
</span>
<ion-nav-view></ion-nav-view>
</body>
Your question does not explain which <div> you are trying to hide and what code you have tried to use already, but can you assign a function to the on-scroll directive of the ion-content and do whatever you want to do in that function. So like this:
<ion-content on-scroll="scrollFunction()">
And then in your controller add a function called scrollFunction or preferably something more descriptive.
$scope.getScrollPosition = function() {
// Here you can do whatever you want when someone is scrolling.
}
You could for example update a variable in this function and assigned that variable to the ng-show of the <div> you want to show or hide.
To answer your other question regarding why the getScrollPosition() function keeps returning 0. It is a known issue, you can find similar reports here. I am not entirely sure why this happens, but it seems like Ionic is grabbing the scroll position of a different view causing it to stay 0. You can solve this by assigning a delegate-handler to your <ion-content>, which basically gives you an unique identifier to work with. It would look something like this:
<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">
And then in your controller, instead of doing the following:
$ionicScrollDelegate.getScrollPosition().top;
You need to do this:
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;
That should solve the issues you are experiencing.
I have the following code snippet:
<div ng-hide="loading" ng-repeat="prov in providers">
<div data-toggle="collapse" style="position:relative;font-weight:bold;" data-target="#collapse-{{$index}}">{{prov.name}}
<div id="collapse-{{$index}}" class="collapse">
<div ng-repeat= "p in prov.subnets">
<div class="col-sm-7 col-md-7" style="font-weight:normal;font-size:90%">
{{p.zone}}
</div>
<div class="col-sm-5 col-md-5"><progress-bar></progress-bar></div>
</div>
</div>
</div>
</div>
I am attempting to make all the "p in prov.subnets" collapse into the relevant "prov.name". As you can see I have nested NG-repeats. If I run my code, it does collapse correctly the first time. However, If I expand them out and try and collapse them again It doesn't collapse and kind of "glitchily" shows a collapse animation.
I have used element inspector and it seems like $index is working correctly to name the divs. Has anyone any other suggestions?
I have a simple slick carousel in an Angular App, using angular-slick. Whenever I load the App for the first time (with the view that contains the slick carousel), the carousel displays correctly. However after switching to another view and returning to the carousel slick view, I get the following error:
TypeError: u.slick is not a function
the Carousel looks like this:
<div class="col-sm-6 col-sm-offset-3 mainContent">
<div style="height: 50px; margin-bottom:70px;">
<slick class="slider multiple-items slick-slider" slides-to-scroll="1" slides-to-show="3" infinite="true" speed="3000" autoplay="true" init-onload="true">
<div ng-class="slick-slide" style="width: 187px;"><h3 class="text-center">1</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">2</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">3</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">4</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">5</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">6</h3></div>
</slick>
</div>
</div>
Is there a reason why the (I guess) jQuery plugin gets "lost" after changing views?
Thanks
For anyone facing the same problem, I ended up using a different angular-slick directive, the one created by DevMarc (https://github.com/devmark/angular-slick-carousel), which solved the problem "auto-magically".
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 have a problem. I have Index page where i load different pages in <div ng-view></div>.I have sidebar, so while im waiting that ng-view load page sidebar goes on left side and i dont want that.
In index i have <div ng-view></div> and right side menu:
<div class="col-lg-3 col-md-3">
<div class="right-sidebar">
#foreach (var item in Model.SideAccountBanners)
{
<div class="promo">
<a href="#item.LinkTo">
<div class="image">
<img class="resize" src="#item.BannerPath" alt="" />
<h1 class="title">#MvcHtmlString.Create(Html.Encode(item.Title).Replace("-", "<br />"))</h1>
<p class="description">#MvcHtmlString.Create(Html.Encode(item.Description).Replace("-", "<br />"))</p>
</div>
</a>
</div>
How can i set default size for that <div ng-view></div> or set something like document ready? idk
You should be able to do this with css:
[ng-view] {
min-height: 100%;
}
Something like the above.
EDIT: If you have multiple ng-views you will want to change the css.