Tooltip Flickering.
<h4 class="card-title" placement="top-left" ngbTooltip="{{entity.entityName}}"container="body">
{{ entity.entityName}}
</h4>
Related
<div class="text-content" *ngFor="let user of items | async">
<div class="user">
<span>user</span>
<p>{{user.some}}</p>
<div class="comment-line"></div>
<div class="comment">
<i *ngIf="user.hasOwnProperty(uid)" class="material-icons" id="favorite" (click)="dislike(user.key, uid)">favorite</i>
<i *ngIf="!user.hasOwnProperty(uid)" class="material-icons" id="favorite_border" (click)="like(user.key, uid)">favorite_border</i>
</div>
</div>
I want to animate only one icon with CSS transition, only one not all the rest icon. Any solution?
Cards on Safari
Cards on Chrome
Below is my code. I add pull-right class to card headers. It works well on Chrome but not work on Safari.
Does anybody know the reason or have any solutions for it?
Thanks very much!
<div id='assigned-list' class="row">
#foreach ($cardsAssignedToCurrentUser as $cardManager)
<div class="card assigned border-primary mt-2 mr-2 col-sm-3">
<div class="card-header">
Unassign
</div>
<div class="card-body unassigned">
<h6 class="card-text mb-2 text-muted">Last Four Numbers</h6>
<p class="card-number">{{ $cardManager->card->last_four_digits }}</p>
<h6 class="card-text mb-2 text-muted">First Name / Last Name</h6>
<p class="card-text">
#if (strlen($cardManager->card->first_name) > 0)
{{ $cardManager->card->first_name }} #else None #endif
/
#if (strlen($cardManager->card->last_name) > 0)
{{ $cardManager->card->last_name }} #else None #endif
</p>
<input type="hidden" value="{{ $cardManager->card->id }}" />
</div>
</div>
#endforeach
</div>
I am working on displaying certain details on a card upon hovering over the top portion of the card using AngularJS, Angular Material and CSS.
This is the code pen created- https://codepen.io/SSPai/pen/oyVmZg
<md-button md-no-ink class="member-card" ng-click="">
<div layout="column" layout-align="center center">
<!-- The details should be shown upon hovering over "top-card-container" only -->
<div class="top-card-container">
<div class="member-photo-background mem-image"><md-icon class="member-photo">account_circle</md-icon></div>
<div class="member-details-part">
<div layout="column" layout-align="space-around stretch">
<div layout="row" layout-align="space-around center" class="member-details member-details-start">
<md-icon class="member-detail-info member-detail-icon">location_on</md-icon>
<div flex
class="member-card-data member-detail-info member-details-value member-title">
<div
ng-bind="memberLocation"></div>
<md-tooltip md-direction="right"
ng-if="memberLocation">
{{memberLocation}}
</md-tooltip>
</div>
</div>
</div>
</div>
</div>
<div class="member-name-bar" layout="row" layout-align="center center">
<div class=" member-card-data member-name">
<div
ng-bind="memberDisplayName">
</div>
<!-- Even this display of tooltip in IE is not working-->
<md-tooltip>{{memberDisplayName}}</md-tooltip>
</div>
</div>
</div>
</md-button>
The issue is that the above codepen works perfectly in Chrome but not in IE11. In IE11, upon hovering, the default hover property of the button is applied which is not desirable.
In IE11: The details upon hovering are not shown and the Tooltip upon hovering over the name in bottom portion of the card is not shown.
Please help in making the above code pen IE11 compatible.
I think CSS rules for .md-button are interfering with your custom rules for hover effect. I would suggest to use a <div> tag for container instead of <md-button>.
I need to disable peak effect (strong pressure's effect with Safari on iPhone 6s) on "a" element in this code (bootstrap environment):
<article>
<div class="gall-thumbnail">
<a data-toggle="modal" href="mod1#">
<img src="img.jpg"/>
<p class="text-center caption">Caption</p>
</a>
</div>
<div class="modal fade" id="mod1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title text-center">Caption</h5>
</div>
<div class="modal-body">
<img src="img.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
</article>
I need to disable it because if strong pressing with Safari on iPhone 6s then bootstrap's "modal" component is here in conflict with "peak", and it shows picture other than enlarged img.jpg.
So it would be nice to disable "peek" on "a" element or to show enlarged img.jpg when strong pressing with Safari on iPhone 6s.
If you would like to disable peeking when you "strong" press an element on iOS you can set the webkit-user-select and the webkit-touch-callout property to none in css. If you are trying to prevent it on all "a" tags you could do something like this:
a{
-webkit-user-select:none;
-webkit-touch-callout: none;
}
I have some center navigation that has always need to be in center, but that is not problem, the problem i have with some element that has to be always right of that element, how to add that this is what i have for now, it goes in accordian head
Here is boostrap 3 code
<div class="panel-heading">
<h4 class="panel-title text-right">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click Me
</a>
</h4>
</div>
What i need is something like this
The problem is that i dont know how many icons i would have, and they have always need to be at center of panel, and click me need to be at right?
If you want to achieve something like this, it is not very complicated. All you have to do is to set a default bootstrap accordion and set text-center insted of text-right. In this way if you place your icons they will be always aligned to center and after that you will use a <p style="float: right;">Click Me</p> in order to place your Click Me text in the right.
Here is the code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<p style="float: right">Click me</p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
DEMO TEXT HERE.
</div>
</div>
</div>
</div>
As you can see, i used 3 icons in this example, but you can add as many as you want and they all will be center aligned.