Angular Material Expansion Panel not working with different component - html

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).

Related

Mouse points on one info icon, Tooltip opens multiple times

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>

DevExtreme popup does not have content. (content is empty)

I use DevExtreme with Vue.js
I am working on converting the Vuetify UI component to the DevExtreme UI component
I want to add a pop-up in the page, but the pop-up doesn't work normally.
A pop-up tag was created, but the content was empty inside the tag.
I tried many ways, but I couldn't find a solution. help me
This is tag state
<div data-app="true" class="v-application--is--ltr theme--light" id="app">
<div class="v-application--wrap"> ...page content... </div>
<!-- popup -->
<div>
<div class="dx-overlay dx-popup dx-widget dx-visibility-change-handler">
<div class="dx-overlay-content dx-popup-nomal" tabindex="0" style="width: 800px; height: 600px;">
<div class="dx-popup-content"></div>
</div>
</div>
</div>
</div>
This is code
<dx-popup v-model="isOpen" :visible="isOpen" :width="width" :height="height" :show-title="false" :show-close-button="false">
<div ref="dialog" class="u-dialog">
<u-layout height="*">
<u-layout ref="dialogTitle" class="u-dialog-header">
<div class="pa-0 text-right">
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen_exit</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="!isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent" #click="closeButtonClick()">
<v-icon color="white">close</v-icon>
</v-btn>
</div>
</u-layout>
<u-layout ref="dialogContent" height="*" class="u-dialog-content">
<component ref="comp" :is="loader" :param="paramData" :code-map="popup.codeMap" #resolve="resolve" #reject="reject"/>
</u-layout>
</u-layout>
</div>
</dx-popup>

Display User Name To Right On My 'Mat-toolbar'

I have an Angular 5 project and on the toolbar I have the following details:
Sub-menu button
Company logo
Company name
These three are fine but now I am being asked to display the following details to the right of the main menu
Person icon
Logged in username
Below is the following code in the app.component.html file
<mat-sidenav-container>
<mat-sidenav #sidenav mode="over" opened="false">
<div class="closeButton">
<mat-icon (click)="sidenav.toggle()" title="Click to close sub-menu.">clear</mat-icon>
</div>
<a>Sidenav content</a>
<a>This is a really long nameeeeee</a>
<a>Sidenav content</a>
</mat-sidenav>
<mat-toolbar>
<mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open sub-menu.">reorder</mat-icon>
<img src="./assets/images/Crest.jpg">AJ Bell Information Interface
<span flex></span>
<div style="font-size: 15px">
<mat-icon style="font-size: 25px">person</mat-icon>
USERNAME
</div>
</mat-toolbar>
</mat-sidenav-container>
<router-outlet>
<div>this</div>
<div>is</div>
<div>the</div>
<div>main</div>
<div>body</div>
</router-outlet>
As you can see I have tried using <span flex></span> and also float: right etc but with no joy at all.
I know it will be simple but I'm having coding tunnel and cant think of a solution
You can use flex: 1 1 auto;
Have a look at this example

Toggling Material Design 2 nav menu in two separate Angular 2 component templates

I am using Material Design 2 to toggle the left side nav:
In the header bar template:
<button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
<md-icon>menu</md-icon>
</button>
In the left side nav template:
<md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened></md-sidenav>
I am now trying to move the header bar and left side nav into separate custom components so that my app.template.html looks like this:
<div fxLayout="column">
<header-bar></header-bar>
<left-nav></left-nav>
</div>
All looks good on that page and just about everything works except the toggling of the left side nav menu, I am getting an error "cannot read property toggle of undefined". It can't find the "#leftNav" id in the left-nav component is my assumption...what is the best way in Angular 2 to go about getting these two templates to talk to each other so I can toggle the left nav component when I click on the header-bar button?
My folder structure:
layout:
header-bar:
header-bar.html
header-bar.ts
left-nav:
left-nav.html
left-nav.ts
I've seen some general other examples but nothing I've been able to apply here. Happy to provide more information if needed. Thanks
Here is the html before separating into two components:
<div fxLayout="column">
<!-- Header bar -->
<!--<header-bar></header-bar>-->
<md-toolbar color="accent" class="navbar">
<button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
<md-icon>menu</md-icon>
</button>
<span fxFlex></span>
<button md-button [md-menu-trigger-for]="menu">
My Account <md-icon>keyboard_arrow_down</md-icon>
</button>
</md-toolbar>
<md-sidenav-container fxLayout="row">
<md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened>
<md-nav-list>
<md-list-item [routerLink]=" ['./dashboard'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>gradient</md-icon>
<span class="padding-lr-2x">Dashboard</span>
</md-list-item>
<md-list-item [routerLink]=" ['./front'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>assignment</md-icon>
<span class="padding-lr-2x">Form layout</span>
</md-list-item>
<md-list-item [routerLink]=" ['./alt'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>settings</md-icon>
<span class="padding-lr-2x">Settings</span>
</md-list-item>
</md-nav-list>
</md-sidenav>
</md-sidenav-container>
</div>

Ionic tab top bar seen differently in ionic phone app and Google Chrome inspector used for developement

In My ionic I have bottom tabs as well as top tabs after the header bar. However I see the output differently in Google Chrome and the Ionic Iphone App.
Attaching screenshots of how it looks on Google Chrome (as intended) and on the Inoic Phone app
On Google Chrome
On Ionic Iphone App
Here is the 1st Tab's HTML Code:
<ion-view view-title="TAB 1">
<ion-content >
<ion-tabs class="tabs-top tabs-icon-top has-header">
<ion-tab title="Tab1" icon-on="ion-heart" icon-off="ion-heart">
<!-- Tab 1 content -->
<div class="padding" >
<h2 class="title ">Lorem ipsum dolor sit ametr adipiscing elit</h2>
<p></p>
<ion-scroll direction="x" class="item " style="padding:5px">
<button data-ng-repeat="item in recent|filter:{tag:'!!'}" class="horizontaList button" ng-click="addFromRecent(item.id, 'tag');">
{{item.tag}}
</button>
</ion-scroll>
Here is index.html code:
<body data-ng-app="starter">
<ion-side-menus>
<ion-pane ion-side-menu-content="">
<ion-nav-bar class="bar">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header "></ion-header-bar>
<ion-content has-header="true">
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-home-outline"></i>
Home
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-log-out"></i>
Log out
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Thanks in advance for your help!
I think your has-header class is wrong on <ion-tabs>. Quote from the ionic blog:
The beta has also removed the requirement for the developer to
manually tell the content to reposition itself if there is a header,
footer, or tabbar present. Resultantly, the has-header, has-footer,
and has-tabs attributes have been removed. Ionic now will
automatically reposition and resize the content depending on what
surrounding widgets are present. If any old alpha code references
these attributes or classnames they can be safely removed since
they’re no longer being used by the framework.