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
Related
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 the following code in my node/express file:
{{#each allimages}}
<div class="col m3 14">
<div class="card hoverable">
<div class="card-image">
<a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
<img src="/uploads/{{imageName}}">
</a>
</div>
<div class="card-action2 right-align">
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light red">
<i class="material-icons">delete</i>
</button>
</form>
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light blue">
<i class="material-icons">edit</i>
</button>
</form>
</div>
</div>
</div>
{{/each}}
I can see my delete button in red but when I click on it it does not delete the file. When I am using and type is set to submit it works perfectly with my route and deletes the file. How can I use the materialize css delete style to submit my delete request form?
Thanks guys for any help!
You need to make it a button, not an anchor. You can just add the relevant class definitions to use the styles of a Materialize button:
<div class="card-action2 right-align">
<form action="/user/{{id}}?_method=DELETE" method="POST">
<button type="submit" class="btn-floating btn waves-effect waves-light red">
<i class="material-icons">delete</i>
</button>
</form>
<a href="2.html">
<i class="material-icons blue-grey-text">edit</i>
</a>
</div>
How do I center a button between two other buttons in a toolbar?
Here's my code and resulting screenshot
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
I'm using OnsenUI (and will be using VUE with it) so is there a class I can simply add from bootstrap or any other framework included with OnsenUI?
Or can I use some custom CSS to do this?
Similar to this question but with OnsenUI and Monaca (so good for both ios and android)
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<span class="stretcher"></span>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<span class="stretcher"></span>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
CSS:
#toptoolbar {
display: flex;
align-items: center;
justify-content: center;
}
.stretcher {
flex: 1;
}
// HTML
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button title">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
//CSS
.toolbar-button.title{
position: absolute;
left: 49%;
}
This is just a plain css solution.
updated Fiddle http://jsfiddle.net/JfGVE/2459/
What should be done to put buttons as well as in the picture? (one on the left and 2 right) within the header of my application.
this code should create a header bar with title and one left button and 2 on the right:
<ion-header-bar class="bar-positive">
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button 1</button>
<button class="button">Right Button 2</button>
</div>
</ion-header-bar>
</ion-header-bar>
for a list:
<ion-list>
<ion-item class="item-button-right">
<div class="buttons">
<button class="button button-positive">
Button 1
</button>
<button class="button button-assertive">
Button 2
</button>
</div>
</ion-item>
</ion-list>
You must work with <ion-nav-buttons side = "left/right">
Try this
<ion-view>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-title>
<img class="cabecalho" src="img/????.png">
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios-list" ng-click="sairAplicativo()"></button>
<button class="button button-icon button-clear ion-power" ng-click="sairAplicativo()"></button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
....
</ion-content>
I hope that I have helped in some way
I am trying to add search bar into header on one of the page.
<ion-view view-title="">
<ion-nav-buttons side="left">
<label class=" item item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-nav-buttons>
<ion-content>
Search content
</ion-content>
</ion-view>
The search bar does show up in the header as expected. But how can I get the search field to be 100% width across the header? I did try to apply:
.buttons-left, .left-buttons{
width:100% !important;
}
It does work. But the problem is it affect all other pages as well. I tried to add class and id to ion-nav-buttons, but it doesn't shows up.
How can I apply custom width to ion-nav-buttons only on specific page?
I am not sure if that is the best place where to put a search field:
<ion-nav-buttons>
You can define a custom header for your specific view:
<ion-header-bar class="bar-positive">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" class="search-bar">
</label>
<button class="button button-clear">Cancel</button>
</ion-header-bar>
and use the directive hide-nav-bar="true" in your view to tell the current view to hide the navbar:
<ion-view view-title="home" hide-nav-bar="true">
...
</ion-view>
This is your end result:
<ion-view view-title="home" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" class="search-bar">
</label>
<button class="button button-clear">
Cancel
</button>
</ion-header-bar>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
I've also used some styling to change the result:
.search-bar
{
width:100% !important;
background: inherit;
height: inherit !important;
}
and this is how it looks in a Plunker.