I applied material design to a series of div's that represent links in the sidenav panel.
My problem is that the ripple click effect is being applied too broadly, hitting not just the content of the div, but also its parent, md-item-content, element.
md-ink-ripple attribute is being applied once, as an attribute in the HTML, as seen below.
I have played around with the location of the ripple attribute, both upwards to its grandparent, md-item, and downwards to the child <label> element, and it seems like no matter where I place it, it continues to ripple through the same md-item-content element.
EDIT- I think I have this problem solved via switching out the target tags to be md-item-content, instead of div. Leaving this up for posterity, and for any interested parties to give 2 cents.
<md-content>
<md-list>
<md-item ng-repeat="item in data.exhibits" id="toc-item-{{::$index}}">
<md-item-content>
<div class="toc-indices">
<span>{{::$index + 1}}</span>
</div>
<div class="md-tile-content exhibit-link" md-ink-ripple ng-click="goToSection($index, -1)" ng-class="{'md-item-active': (data.currentExhibitIndex === $index)}">
<label>{{::item.title}}</label>
</div>
</md-item-content>
<md-item-content ng-repeat="section in item.sections">
<label class="md-tile-content exhibit-section-link" ng-click="goToSection($parent.$index, $index)" id="toc-item-{{::$parent.$index}}-section-{{::$index}}" ng-class="{'md-item-active': (data.currentExhibitIndex === $parent.$index && data.sectionIndex === $index)}">
{{::section.title}}
</label>
</md-item-content>
<section class="clo-parts-divider"></section>
</md-item>
</md-list>
If you make the div position relative like this,
<div md-ink-ripple="#f5f5f5" style="position:relative"></div>
The ripple will stay within the div container.
-Source
Related
I have an angular 1.5.7 page using hammer.js 2.0.8 with angular-hammer library.
My <body> is 100% height and has swipe events on it that allow a user to page back and forth. But within the body, I have a list of <input> tags which I have a different swipe event on.
The problem is the swipe on the <body> is always triggered, even when I swipe over the <input>.
<body ng-app="myApp" ng-controller="myCtrl" ng-cloak hm-swiperight="prevDay(page)" hm-swipeleft="nextDay(page)">
<h1>{{data[page].today | dateSuffix}}</h1>
<div ng-repeat="item in data[page].items track by $index"
hm-swiperight="strikeOn(page, {{$index}})"
hm-swipeleft="strikeOff(page, {{$index}})"
hm-press="splashOn(page, {{$index}})">
<input
value="{{item.name}}"
placeholder="Item #{{$index+1}}"
ng-class="{strike: item.done==true}"
ng-trim="true"
ng-model="item.name"
ng-change="save()"
/>
</div>
</body>
How do get the swipe on the <input> to take precedence over the swipe on the <body>?
body or parent is always prior to other inside elements, you can't touch input without touching the body and it's logical.
But if you ask me, i will put 2 div on left and right of my body and then i set attr swiperight and swipeleft on each of them, to solve this problem.
<body>
<div class="left" hm-swipeleft="prevDay(page)"></div>
<div class="right" hm-swiperight="prevDay(page)"></div>
//----other elements
</body>
div are absolute position, and when user swipe right from right of body it will work on body, also left, and when user touch inside body you input element will work.
I am trying to add swipe functionality to a ng-repeated list of elements. However, the swiping works badly. Sometimes a swipe gestures (all on desktop) is recognized, but most of the times I'm click and swiping like a madman to achieve the expected result.
I am using Material Angular.
Code:
<div ng-repeat="link in Links | filter: { category: 'quick' }">
<div ng-show="!link.show" md-swipe-left="link.show = true">
<div class="lv-item ">
<span href="{{link.url}}" class="no-select" target="_blank" >
<div class="lv-title" class="no-select">{{link.title}}</div>
<small class="lv-small" class="no-select">{{link.description}}</small>
</span>
</div>
</div>
<div ng-show="link.show" md-swipe-right="link.show = false">
<div class="lv-item delete" >
<button ng-click="deleteLink(link.id)">Verwijder</button>
</div>
</div>
</div>
On the Angular Material swipe docpage (https://material.angularjs.org/latest/demo/swipe) it seems easy and it works like a charm. However my implementation of the directive doesn't seem to work as it should. It rather lets me select the text inside the element than swiping.
Also, I'd rather want the span to be a a href, but this only lets me drag the whole element out of space.
I believe that to assure a proper work of all material function you should use their containers and directives instead. So you should put all of that inside a md-content, and also use ng-ifs instead of ng-show on the swiped div. Which would result in something like that :
<md-content>
<div ng-repeat="link in Links | filter: { category: 'quick' }">
<div ng-if="!link.show" md-swipe-left="link.show = true">
<div class="lv-item ">
<span href="{{link.url}}" class="no-select" target="_blank" >
<div class="lv-title" class="no-select">{{link.title}}</div>
<small class="lv-small" class="no-select">{{link.description}}</small>
</span>
</div>
</div>
<div ng-if="link.show" md-swipe-right="link.show = false">
<div class="lv-item delete" >
<button ng-click="deleteLink(link.id)">Verwijder</button>
</div>
</div>
</div>
</md-content>
I used this kind of code snippet on some md-sidenav and it works. By the way, if you're using chrome and use mobile view, the md-swipe-left is always triggered, doesn't matter if you swipe left, right, top or bottom.
Hope this helps
I use ionic for my mobile app. I have a Directory with a list of employees. It works fine except that the last employee name gets cut or is not visible.
I use collections-repeat inside ion-scroll. Above this I filter directive. The filter directive should not be scrollable.
I tried setting bottom:50px for the last item in the list, it brings up the last item, but writes over the item above it.
Any suggestions on how to fi this would be break
<ion-content scroll="false">
<filters on-query-change="onQueryChange()" class="filter-directive"></filters>
<hr class="hline">
<ion-scroll class="scroll-length">
<div
collection-repeat="contact in contacts track by contact.id"
item-width="100%"
item-height="getHeight(contact)"
ng-show="(contact.fullName || contact.isDivider)>
<div id="company-directory-item-divider"
class="item item-divider fw-semibold dark"
ng-if="contact.isDivider">
{{contact.letter}}
</div>
<div
class="item item-icon-right tn-nav-item"
ng-click="gotoEmployeeInfo(contact)"
ng-if="contact.fullName">
<span ng-bind-html="contact.fullName"></span>
<div class="tn-nav-item-subtitle dark"> {{contact.workShortLocDesc}}</div>
<i class="icon ion-ios-arrow-forward"></i>
</div>
</div>
<ion-scroll>
</ion-content>
Looks like the div with collection repeat should be the first element inside ion-content for this to work:
So this is how I finally fixed it:
Got rid of ion-scoll
made ion-content scrollable
Put the filter directive and hline between ion-header and ion-content and set it to position absolute (along with some margin top styling)
styled ion-content with margin-top to bring it lower (so as not to write over the filter)
This worked.
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
Can I place a conditional statement into the collapse directive for AngularUI?
I have the following setup, which has 3 radio-style buttons:
<div class="controls controls-row">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'meeting'">Meeting</button>
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'tour'">Tour</button>
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'other'">Other...</button>
</div>
</div>
<div class="controls controls-row">
<textarea class="span6" placeholder="Why are you here?" ng-model="textPurpose" collapse="{{ radioPurpose == 'other' }}"></textarea>
</div>
I would like textarea to show/hide according to the value of the radioPurpose buttons. I know the statement is evaluating to true at the appropriate time, but the directive always shows the textarea.
Copied answer from comment:
I haven't used AngularUI, but I'm guessing collapse expects an expression. Remove the curly braces: collapse="radioPurpose == 'other'"
Collapse is actually not the best way of doing a simple show/hide. A collapsed item has its height set to 0, rather than being set to display: none; it might not always have the effect you're expecting. I would suggest instead using ng-show or ng-hide.
http://docs.angularjs.org/api/ng.directive:ngShow
I saw that you solved it, and so did I and can share my JSFiddle; Toggle Collapse with Radiobuttons.
However, I see what S McCrohan mean, since I got a problem in my app. The collapse for the table did not work fully in my app first, since it collapsed but left the top row visible. It seems to require that you separate the divs, i.e. a div with collapse and a div with span# class, like following...:
<!-- START CHART AREA -->
<div collapse="chartCollapsed">
<div class="span12 well well-small">
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</div>
</div>
<!-- END CHART AREA -->
<!-- START TABLE AREA -->
<div collapse="tableCollapsed">
<div class="span12">
<!-- TABLE OMITTED -->
</div>
</div>
<!-- END TABLE AREA -->