I have Angular material nav bar(shown below). I put a md-menu inside a nav bar because I want to achieve the bootstrap navigation bar that has dropdown menu on the right side. How can I move the "WELCOME! IVAN" which is a dropdown menu on the right side.
below is my code:
<div ng-controller="navController">
<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
<i class="fa {{ link.icon}}" aria-hidden="true"></i>
{{ link.link}}
</md-nav-item>
<md-menu md-offset="0 -7" layout-align="end center">
<md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
Welcome! {{ user}}
<!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
<i class="fa fa-user" aria-hidden="true"></i>
</md-button>
<md-menu-content width="3">
<md-menu-item>
<md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-nav-bar>
</md-content>
thanks in advance for your help!!! :)
Try to use a flex span like in this codepen example demo. <span flex></span> fills the space between elements.
<div ng-controller="navController">
<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
<i class="fa {{ link.icon}}" aria-hidden="true"></i>
{{ link.link}}
</md-nav-item>
<span flex></span>
<md-menu md-offset="0 -7" layout-align="end center">
<md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
Welcome! {{ user}}
<!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
<i class="fa fa-user" aria-hidden="true"></i>
</md-button>
<md-menu-content width="3">
<md-menu-item>
<md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-nav-bar>
</md-content>
</div>
Related
hey guys, I know this question is already been asked but I did not get an appropriate answer. I got this error on using next/link . whenever I replace the anchor tag with the "Link" tag I got this error.I will be very thankful if somebody can help
code
import {APP_NAME} from '../config';
import Link from 'next/link';
const Navbar=()=>{
return(
<>
<nav className='navbar bg-success'>
<h1>
<Link href="/dashboard" ><i className="fas fa-code"></i><a>{App_name}</a></Link>
</h1>
<ul>
<li><Link href="#"><a>Jobseeker</a></Link>
</li>
<li>Community</li>
<li>Employer</li>
</ul>
<h3><i className =""></i>Account
</h3>
</nav>
<div className="bottom-nav ">
<div className="bottom-item">
<i className="fas fa-columns text-primary "></i>
<p className=" text-primary">Dashboard</p>
</div>
<div className="bottom-item">
<i className="fas fa-user text-primary "></i>
<p className=" text-primary">jobseeker</p>
</div>
<div className="bottom-item">
<i className="fas fa-users text-primary "></i>
<p className=" text-primary">community</p>
</div>
<div className="bottom-item">
<i className="fas fa-user text-primary "></i>
<p className=" text-primary">Profile</p>
</div>
</div>
</>
)
}
export default Navbar;
Try that:
<Link href="/dashboard" ><a><i className="fas fa-code"/><span>{App_name}</span></a></Link>
It's like the error stated, <Link> was only expecting a single chid, while you have <li> and <a>. Wrap the <a> under <li>, you should be able to fix the problem.
I would like to make it so that when I click the mat-button, the menu items would be the same size and push everything else down. Below are attached images of the current situation and desired.
Current closed dropdown
Current opened dropdown
Desired closed dropdown
Here is my HTML code:
<mat-footer>
<div class="footerLinks">
<span *ngFor="let footerLink of footerContent.footerLinks">
<span *ngIf="footerLink.footerDrop.length > 1 else single">
<a mat-button [matMenuTriggerFor]="subLinks" href="javascript:void(0)" title={{footerLink.subFooterTitle}}>{{footerLink.subFooterTitle}}
<mat-icon>arrow_drop_down</mat-icon>
</a>
<mat-menu #subLinks="matMenu" arrowPosition="up">
<a mat-menu-item *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</mat-menu>
</span>
<ng-template #single >
<a mat-button *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</ng-template>
</span>
</div>
<div class="social">
<span *ngFor="let socialLink of footerContent.socialLinks">
<a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}></a>
</span>
</div>
<div class="terms">
<mat-copywrite-footer [innerHTML]="footerContent.finePrint.value"> </mat-copywrite-footer>
</div>
</mat-footer>
I have a tooltip that displays two sets of different info. I need to see some kind of break between the two because right now it all in one single line.
<ng-template #template let-anchor>
<span style="font-size: 17px;">
Last Sale Date : {{ lastSale.lastSaleDate }}
</span>
<span style="font-size: 17px;">
Next Sale Date: {{ nextFuture.nextFutureDate }}
</span>
</ng-template>
<div kendoTooltip
showOn="none"
[tooltipTemplate]="template"
filter=".k-grid td"
(mouseover)="showTooltip($event)">
I would like to see it in a nice format and 2 separte lines so it doesn't overlap.
You can try with this code
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-placement="bottom"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div>Click <i class="fa fa-rss" aria-hidden="true"></i>
<hr>
</div>
</div>
</div>
My question is why this elements are not separate as is suppose to be with some margin from left and right. And what if I want to see this elements in a mobile, it will be a mess. So what I missing here in order to separate the elements correctly and don't get mix together .?
Note:
Hey here is the following code that I have and after the code click on the link to see image.
<md-list-item layout="row">
<img ng-src="assets/img/iconUser.png" class="md-avatar" alt="none"/>
<p flex ng-bind="c.username"></p>
<p flex ng-bind="c.email"></p>
<md-button flex class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Add Contact">
<md-icon class="md-hue-1" md-svg-icon="assets/img/plus1.svg"
aria-label="Add Contact">
</md-icon>
</md-button>
<md-button flex class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Send Email">
<md-icon md-svg-icon="assets/img/message.svg"
aria-label="Send Email"
class="md-secondary" >
</md-icon>
</md-button>
</md-list-item>
this is the picture of the md-list-item
I think it is because you have class="md-secondary" on the second md-icon. If you remove it (or replace it with class="md-hue-1" as the other md-icon) it works fine - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-list-item layout="row">
<img ng-src="assets/img/iconUser.png" class="md-avatar" alt="none"/>
<p flex>John</p>
<p flex>john.smith#gmail.com</p>
<md-button class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Add Contact">
<md-icon class="md-hue-1" md-svg-src="img/icons/cake.svg" aria-label="Add Contact"></md-icon>
</md-button>
<md-button class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Send Email">
<md-icon class="md-hue-1" md-svg-src="img/icons/android.svg" aria-label="Send Email"></md-icon>
</md-button>
</md-list-item>
</div>
I have a list, how I can do to put 2 buttons to the right and one on the left?
This is my code, I tried many things but not working.
<ion-content>
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="refrescarNuevosPosts()">
</ion-refresher>
<div class='list'>
<a class='item item-avatar-left' ng-repeat="post in posts" ng-click='openLink(post.url)'>
<img ng-src='{{ post.thumbnail}}' ng-if="post.thumbnail.indexOf('http') === 0"/>
<h2 class='post-title'>{{ post.title}}</h2>
<p><span am-time-ago="post.created_utc" am-preprocess="unix">{{ post.domain}}
</p>
</a>
</div>
<ion-infinite-scroll
on-infinite="cargarNuevosPosts()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Try this
<ion-list>
<ion-item collection-repeat="c in clientes | filter:pesquisa" ng-click="getCliente(c)" class="item-button-right item-button-left">
<!-- 1 button -->
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
<p>{{c.email}}</p>
<!-- 2 buttons -->
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</ion-item>
</ion-list>
The result of ion-list
See http://pointdeveloper.com/add-multiple-buttons-to-list-item-for-ionic-framework-apps/
I hope that I have helped in some way