I'm trying to implement the new swiper from the 1.2 ionics version and Im having a hard time.
I'm trying to create a nested swiper with a dynamic name ( inside the sliders attribute I guess - HTML line 20 to create it and JS line 59 to watch it).
The main issue is that Id like to add/remove some slides from the nested swiper.
http://codepen.io/anon/pen/pgVMqw?editors=1010
Do you have any idea ?
Thanks a lot !
HTML :
<ion-slides id="sliderPerson-{{$index}}" options="options2" slider="data.sliderPerson">
You should be able to use $scope.data.sliderPerson.removeSlide($index) and $scope.data.sliderPerson.append(slides).
You might have to use $scope.data.sliderPerson.update() to manually update the slider afterwords.
Reference:http://www.idangero.us/swiper/api/
Related
I am able to to implement drag and drop functionality using ng2-dragula but the problem I am facing that it drags the header row as well and also unable to get the dragged row values(its row data )and the row above and below from the dragged row.
Can anyone help me this ?
I also found the same issue on github
https://github.com/valor-software/ng2-dragula/issues/831
<mat-table [dataSource]="dataSource"
matSort matSortActive="categoryName" matSortDirection="asc" matSortDisableClear
[dragula]='"seventh-bag"'>
<ng-container matColumnDef="seqNo">
<mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>
<mat-cell *matCellDef="let row;let i=index;">
{{(paginator.pageSize * (paginator.pageIndex)) + i+1}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header (mouseenter)="nameIcon=false" (mouseleave)="nameIcon=true">
Category Name
<i *ngIf="nameIcon && sort.active=='join'" class="fa fa-sort"></i>
</mat-header-cell>
<mat-cell
*matCellDef="let catg;">
name
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row._id}"
(mouseenter) ="dragRow = row" (mouseleave) ="mouseLeave('div A')"
>
{{row}}
</mat-row>
</mat-table>
When I use the above approach, then I am unable to fetch the dragged row data and its new position
2.) When I implement ng2-dragula
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [dragula]='"seventh-bag"'
>
then the drag and drop functionality not works well
Please refer to the picture below
Image Source:- https://user-images.githubusercontent.com/6483007/36256531-4a34b638-124b-11e8-9b13-cd15391886ae.gif
This may not be an exact answer to your question regarding dragula but seeing no-one has had a go yet here is a possible solution that seems to be working for me: I tried getting drag and drop working with mat-table as well. I didn't use ng2-dragula (i used jquery ui-sortable in the past), but i did get somewhere with angulars new CDK drag and drop system. (now in 7.0.0).
https://material.angular.io/cdk/drag-drop/overview
The only issue i had with this is that if you are wanting to do sorting, the cdkDropList directive had to be a direct parent to the cdkDrag elements, not sure if there is a way around this and i couldn't find an option saying otherwise.
seeing that mat-tables don't seem to be constructed in a way that works nicely with d&d I've turned to lists or expansion-panels (if you want the drop down for extended forms on each row) as they seem to behave better when being nested and work well with the drag and drop tools by cdk. (you will probably need to do some custom styling to get it looking like a table)
I realise it wont come with the sorting, filtering features mat-table comes with but if you are prioritising the d&d you may have to find another way around it.
Hope that gives you something to work with!
please tell me how i can locate an element in the below form using serenity-js Target.
Below is my Dom to the page i am trying to automate.
so here its a dropdown which you can see as which has id="splc" which is a normal DOM .. but the content inside that dropdown are all shadow elements.
my requirement is to access the content in dropdown.
Now i am not able to even click on the dropdown by normal xpath on px-component tag ( which is normal DOM) .
Inside that px component tag I can see that it has a shadow element #label which is exact element i need to click.
Problem is in my html page , all the dropdown has the same #label as the shadow element and their parent is a normal xpath with unique id.
When i use the Jquery on the chrome console
$("html #splc /deep/ div#label").click()
i can click the desired dropdown.
But how can i do the same with serenity-js frame work.
i want to do the below functionality that i have in protractor using SERENITY-JS concept .
static dropdown = element(by.id("splc")).element(by.deepCss("#label"));
Since serenity-js expects a target always since the Task needs that in activity. How can do the same ?
please help me.
From what I can see, by.deepCss is nothing more than a wrapper around by.css:
deepCss(selector: string): Locator {
return By.css('* /deep/ ' + selector);
};
If that's the case, then the following:
element(by.id("splc")).element(by.deepCss("#label"))
could be represented as:
element(by.css("#splc /deep/ #label"))
as per your jQuery example.
Now, if the above works, you should be able to define a Target as follows:
const Dropdown = Target.the('Dropdown').located(by.css("#splc /deep/ #label"))
Hope this helps!
Jan
How can I change the positions of checkbox and label and how to implement a link into the label?
$acceptGTC = new Element\Checkbox('AGBs');
$acceptGTC->setLabel('I Accept the GTC (show it).');
$this->add($acceptGTC);
regards
n00n
meanwhile:
I tried to overwrite the view helper for checkboxes.
copied
*/vendor/zendframework/zend-form/src/View/Helper/FormCheckbox.php
to
*/module/Application/src/Application/View/Helper/FormCheckbox.php
added to module.config.php
'viewhelpers' => array('checkbox'=>'Application\View\Helper'),
But it still uses the original one...
Do I have to tell zend to use my FormCheckbox?
I don't exactly know the way you are rendering your Zend_Form_Element, but in order to enhance the rendering as you want you should build a custom decorator, and add it to this element.
You should read the Zend documentation on Zend_Form_Decorators, everything is quite well explained and should lead you to a fancy solution.
i want to disable swap in ion-slide-box so i added this
active-slide="slidestop($index)"
in ionic-slide-box as you can see below
<ion-slide-box show-pager="false" ng-repeat="test in demoQuiz" active-slide="slidestop($index)">
and added this in controller.js
$scope.slidestop = function(index) {
$ionicSlideBoxDelegate.enableSlide(false);
}
but i'm getting this error:(
Error: [$compile:nonassign] Expression 'slidestop($index)' used with directive 'ionSlideBox' is non-assignable!
although this code working fine:)
If you carefully see ionic Docs, you will find that
active-slide is an expression, which represents the Model to bind the current slide to.
You have written a method invocation inside the active-slide attribute, without returning anything from the method.
You can rewrite the stuff like this :
<ion-slide-box show-pager="false" ng-repeat="test in demoQuiz" active-slide="activeSlide">
Then, Inside your controller, you can write
$ionicSlideBoxDelegate.stop()
This will stop ionic slide box until and unless you explicitly change the slides.
More Details here
What is the recommended way to stick Extjs elements in your html?
At the moment I have
<div><script type='text/javascript'>
Ext.onReady(function(){
new Ext.grid.Panel({params...}).show();
})
</script></div>
But this feels very awkward ( Embedding script tags all over the place rankles my soul )
Components have a renderTo, but if the html element doesn't exist, - I think? ( not too sure about that ) - that the component still gets created.
It depends entirely on what you want to do, check out the learning centre on Sencha:
http://www.sencha.com/learn/
http://www.sencha.com/learn/components/
Usually you use a complete layout system, though if you want to attach to an existing element, such as a div you'll need something like renderTo.