if I put my mouse pointer on one of the info buttons, it will show both tooltips. How can I prevent this? I just want to show the one tooltip, on which the mouse pointer points to. Does anyone have an idea?
Here is the code:
<div class="col-12 col-lg-6">
<div class="dx-fieldset-header">Dateianhänge<span class="dx-fieldset-header-subtext"> Download / Löschen</span></div>
<div class="dx-field">
<div class="anhang-liste">
<mat-chip-list *ngIf="data?.anhanglist.length" aria-label="Anhänge löschen">
<mat-chip *ngFor="let anhang of data?.anhanglist" class="anhang-chip">
<span class="anhang-filename" (click)="downloadAnhang(anhang)">
{{ anhang.dateiname }}
</span>
<mat-icon *ngIf="!IstAnhangBereitsInKontoauszugszeileVerwendet(anhang.id)" class="anhang-delete" (click)="deleteAnhang(anhang)">cancel</mat-icon>
<i
*ngIf="IstAnhangBereitsInKontoauszugszeileVerwendet(anhang.id)"
style="margin-left: 0.2em;"
class="fa fa-info-circle"
id="infoKontoauszugzeilenAnhang{{anhang.id}}"
(mouseenter)="toggleDefault()"
(mouseleave)="toggleDefault()"
>
<dx-tooltip
*ngIf="IstAnhangBereitsInKontoauszugszeileVerwendet(anhang.id)"
target="#infoKontoauszugzeilenAnhang{{anhang.id}}"
[(visible)]="defaultVisible"
[closeOnOutsideClick]="false"
>Verwendet in folgenden Kontoauszugzeilen:
{{zeilenNummernMitAnhang[anhang.id]}}
</dx-tooltip>
</i>
</mat-chip>
</mat-chip-list>
</div>
</div>
</div>
Related
I am starting my journey with Angular Material and I'm stuck on one thing.
Expansion Panel is not working (I see this panel but I can't open/close it). I found out that it's not working because of "nav component" (created with material) which I am importing in this component (when I delete "nav component" expansion panel works).
And yes, I have used
import {MatExpansionModule} from '#angular/material/expansion';
This is component with Expansion Panel
<app-navigation-bar></app-navigation-bar>
<section id="faq">
<h2>FAQ</h2>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
</section>
And here is code of the "nav component"
<section id="navigation-bar">
<mat-drawer-container class="example-container">
<mat-drawer class="left-nav" mode="side" opened>
<button class="nav-button"><i class="far fa-play-circle"></i></button>
<button class="nav-button"><i class="fab fa-500px"></i></button>
<button class="nav-button"><i class="fas fa-broadcast-tower"></i></button>
<button class="nav-button"><i class="fas fa-film"></i></button>
<button class="nav-button"><i class="fas fa-microphone"></i></button>
<button [routerLink]="['/faq']" routerLinkActive="router-link-active" class="nav-button"><i class="fas fa-info"></i></button>
<button [routerLink]="['']" routerLinkActive="router-link-active" class="nav-button" id="exit"><i class="far fa-times-circle"></i></button>
</mat-drawer>
<mat-drawer-content class="right">
</mat-drawer-content>
</mat-drawer-container>
</section>
And here is pic of it
I figured it out. When you are making component just for an element on site, make sure it doesn't have width: 100%; it makes foil effect on the site (you can't click any button because all content is under this component).
I'm setting up a User Interface using a simple database and angular, where users can post a message, either with only a message, or with a picture attached to the message.
By doing some research, I found out about the built in ngIf conditions, where you can display variables if the variable doesn't hold a null value.
Here is my code and the output:
<div ng-repeat="m in chatDetailsCtrl.messageList">
<!-- This card prodives space for the message and Like/dislike buttons -->
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<!-- Card Title is the person who wrote the message -->
<span class="card-title">{{m.user_ID}}</span>
<!-- Here comes the message text -->
<p> {{m.post_msg}}
<div> <span class="new badge light-blue">{{m.post_date}}</span></div>
<p *ngIf="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
{{m.post_date|date("m/d/Y")}} -->
</p>
<td><a class="waves-effect light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
</div>
<div class="card-action">
<a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
</i></a> <span ng-bind= "m.likes"> </span>
<a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
</i></a><span ng-bind="m.dislikes"> </span>
</div>
</div>
</div>
</div>
</div>
I want to see if m.post_url contains a value. When null, I want to skip adding this variable to my website.
For example, last post, without a picture, I want it to look like this:
Sorry for my bad english, english is not my first language.
first of all, you are mixing angularJs syntax with new angular.
if you are using angularjs use ng-if in your image tag. it works properly.
as I can see you are using ng-repeat and ng-bind you are using angularjs and not angular.
so in your image tag use
<p ng-if="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .
But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .
This is what i have tried.
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>
I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.
You can use ngIf-Else to provide a second template to show like such:
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>
i have a problem, that i want to make my component could add new sidebar menu item each item user clickin an add button. so basically my component should appear when user defining their own sidebar menu item.
here's the vue js code i've write:
Vue.component('sb-menu-item', {
props: ['attrib'],
template: '<a class="item"><i class="{{attrib.icon}} icon"></i>{{attrib.name}}</a>'
});
new Vue({
el: '#sb-list',
data: {
itemsProp: [{icon: 'calendar icon', name: 'history'}],
newItems: [{icon: '', name: ''}]
},
methods: {
addItem: function (){
this.itemsProp.push({icon: this.newItems.icon, name: this.newItems.name});
// this.itemsProp.name.push(this.attrib.name);
this.newItems = [];
},
delItem: function (){
this.itemsProp.pop();
}
}
});
<div class="ui top attached menu">
<a class="item">
<i class="sidebar icon"></i>
<i class="right chevron icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable" id="sb-list">
<div class="ui visible left vertical sidebar menu" >
<a class="item">
<i class="home icon"></i>
Dashboard
</a>
<a class="item">
<i class="user icon"></i>
Account
</a>
<sb-menu-item v-for="item in itemsProp" v-bind:attrib="item" v-model="itemsProp"></sb-menu-item>
</div>
<div class="pusher">
<div class="ui basic teal segment">
<h3 class="ui header">Insert New Sidebar Items</h3>
<hr />
<form class="ui tiny teal form compact raised padded segment">
<div class="field">
<input type="text" placeholder="Item Name" v-model="newItems.name">
</div>
<div class="field">
<input type="text" placeholder="icon name" v-model="newItems.icon">
</div>
<button class="ui medium teal float button" v-on:click="addItem"><i class="cubes icon"></i> Make It!</button>
<button class="ui medium red float button" v-on:click="delItem"><i class="trash icon"></i>Pop Last Menu! Now!</button>
</form>
<p></p>
<div class="ui medium teal raised padded segment">{{$data | json}}</div>
</div>
</div>
</div>
this codes work, but each time i click the add button it has been added their own sidebar menu item that i've defined from the forms, and in a seconds those item disappear. (i am using semanticUI though)
sorry for my bad english and explanation. i hope u can understand this, thanks!
I see 2 potential issues. I will try to add a jsFiddle later maybe.
First of all I would make the newItem and object instead of an array.
Second issue is the v-model in the sb-menu-item component. Since you already send the item via attrib prop, you don't need the v-model there.
Here is a fiddle with a simple example of adding/removing stuff based on inputs.
https://jsfiddle.net/z11fe07p/437/
Also note that in case you refresh the page, all the data will be lost because vue is not meant for persiting data.
I have a question for the ionic framework, i hope someone can help me...
I have an ion-list with "ion-item-right". This is all ok, the button is on the right. Now i need to have three other icons, which are centered, so that i have:
text - 3 icons centered - 1 icon right
this is my code:
<ion-item
class="item-stable accordion item-icon-right"
ng-show="!skillHasSubskill(skill)">
{{skill.skillName}}
<i class="icon ion-star"></i>
<i class="icon ion-star"></i>
<i class="icon ion-star"></i>
<a class="button marginrighticon button-icon icon ion-close energized" ng-click="deleteSkill(skill)"></a>
</ion-item>
Of course, this isn´t working. The three "ion-stars" should be centered, but i haven´t found a tag by which i can do this... I hope someone can help me ;)
I think you have to do some CSS styling... like this:
<ion-item class="item-stable accordion item-icon-right item-button-right" ng-show="!skillHasSubskill(skill)">
{{skill.skillName}}
<div class="icon" style="margin-right: 80px">
<i class="ion-star"></i>
<i class="ion-star"></i>
<i class="ion-star"></i>
</div>
<a class="button button-icon" ng-click="deleteSkill(skill)">
<i class="icon ion-close energized"></i>
</a>
</ion-item>
for everyone with the same problem...
the solution above is in many ways correct, but i had to adopt it a little bit...
here´s my code:
<ion-item
class="item-stable accordion nopadding"
ng-show="!skillHasSubskill(skill)">
<div class="row">
<div class="col">{{skill.skillName}}</div>
<div class="col">
<i class="padding-right icon ion-star"></i> <i
class="padding-left padding-right icon ion-star"></i> <i
class="padding-left icon ion-star"></i>
</div>
<a
class="button button-icon button-right icon ion-close energized"
ng-click="deleteSkill(skill)"></a>
</div>
</ion-item>
i had to do it, because in the other way posted above the height of the ion-item was too big because the icons were interpreted in an own line, not in the same one as the normal text ;)
but thank you very much!
edit: i have another silly problem: the text isn´t aligned vertically... vertical-align:middle isn´t a solution (aligned to col & row)... has anyone an idea??