I have the following layout
<!-- Page Content -->
<ion-content class="app-page card-list">
<!--
-->
<ion-searchbar
[(ngModel)]="searchinput"
(ionInput)="onInput(search)"
placeholder="Search Contacts" light #search>
</ion-searchbar>
<!-- Refresher -->
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<!-- Contact List Start Here -->
<ion-list>
<!-- Foreach Contact in Contacts do -->
<button ion-item *ngFor="let contact of contacts" (click)="getContact(contact.id)" >
<ion-avatar item-left>
<img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,' + contact.image_small)" *ngIf="contact.image_small"/>
<img src="img/nopic.png" text-center *ngIf="!contact.image_small"/>
</ion-avatar>
<h2>{{contact.name}}{{contact.parent_id? ", " + contact.parent_id[1] : ""}}</h2>
<p><b>Mobile: </b>{{contact.mobile || "" }} <b>Phone: </b>{{contact.phone || "" }} <b>Email: </b>{{contact.email || ""}} </p>
</button>
<button (click)="newContact()" fab fab-bottom fab-right fab-fixed><ion-icon name="add"></ion-icon></button>
<!-- Infinite Scroll -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</ion-content>
<!-- Add new contact floating button -->
The problem that I face is that when I pull down the refresher, my bottom left floating button does not stay at the bottom.
I've even place the button out of ion-list, it does not help to keep the button at bottom.
You should use FAB outside the ion-content. The best way is create ion-footer and add FAB to it.
<ion-content>
...
</ion-content>
<ion-footer>
<button (click)="newContact()" fab fab-bottom fab-right fab-fixed>
<ion-icon name="add"></ion-icon>
</button>
</ion-footer>
Related
I have created a form, in the form I have a button
<form #f='ngForm' (ngSubmit)='onAddBusiness(f)' >
....
....
<ion-item>
<button ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
<p *ngIf="(position==undefined); else elseblock">
هیچ شوێنێک دیاری نەکراوە
</p>
<ng-template #elseblock>
<p #elseblock>
دەست خۆش شوێنەکە دیاری کرا
</p>
</ng-template>
</ion-item>
<ion-item>
<button type='submit' ion-button block [disabled]="!f.valid">ناردن</button>
</ion-item>
</ion-list>
</form>
the button is present a Modal to set the location on a map.
The issue is whenever I click the Button to open the modal, the form is submitted.
In the button to open modal, specify the type as button.
<button type='button' ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
I am very new to Ionic 2 and I am unable to change my side menu background color and also the menu-header color of my app. Any help appreciated! Below is the code snippet and the desired result(image). I have numbered the requirements for convenience. Also, it would be very helpful if someone can help with the implementation of drop down option(requirement no. 3). Basically it would contain some sub-list items. Thanks in advance!
<ion-menu [content]="content">
<ion-header no-border>
<ion-toolbar color = "white">
<ion-title class="titletext" style="display:inline-block" >
<div style = "width : 100%; height : 100%; background-color : white">
<div style = "float:left;width:75%">
<h3>MY APP </h3>
</div>
<div style = "float:right;width:25%">
<img src = "assets/icon/reports.PNG" />
</div>
</div>
</ion-title>
<!--<img src="assets/icon/Wemart_Icon.png" alt="logo" height="40px" width = "40px" > -->
</ion-toolbar>
</ion-header>
<ion-content>
<div style = "color : #3DBCC0; width:100%; height : 100%">
<ion-list>
<!--<button menuClose ion-item *ngFor="let p of myPages" (click)="openPage(p)">
<span text-color="my-custom-color2">{{p.title}}</span>
</button>-->
<button ion-item>
<ion-icon name="home" item-left></ion-icon> HOME
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> PORTFOLIO ANALYTICS
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> EXPENSES
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> UTILITY ANALYTICS
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> TERMS OF USE
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> SIGN OUT
</button>
</ion-list>
</div>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I am adding variables.scss code below:
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";
#import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
$toolbar-background: white;
$toolbar-wp-title-text-align : left;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
color1 : #8FAADC,
color2 : #DAE3F3,
color3: #3DBCC0
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
#import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/
#import "ionic.ionicons";
// Fonts
// --------------------------------------------------
#import "roboto";
#import "noto-sans";
in order to give background color to swidemenu you have to open app.css and copy paste the below code. basically ion-menu has a content block just like pages. so you have to change the background color of that page( sidemenu )
ion-menu{
ion-content{
background-color:red !important;
}
}
<ion-toolbar yourcolorname>
If you declare a color in the scss like you did with color1, color2 etc. And then you can use your colors as in the example above.
You can create div as header following <ion-list> within <ion-content>
. then apply style to the header and accordingly to the <ion-list>as well.
<ion-menu [content]="content">
<ion-content>
<!--Menu Header-->
<div>
........
</div>
<!--Menu list-->
<ion-list>
</ion-list>
</ion-content>
</ion-menu>
then have ion-navbar in each page you need toolbar.
<ion-header no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
Now, your next requirement is to have nested menus
// Menu model
export interface MenuOptionModel {
iconName: string;
displayName: string;
component: any;
subItems?: Array<MenuOptionModel>;
}
export class MyApp {
showSubmenu: boolean = false;
options: any[];
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
this.initializeApp(platform, statusBar, splashScreen);
this.getMenuOptions();
}
getMenuOptions() {
this.options = new Array<MenuOptionModel>()
// Load simple menu options
// ------------------------------------------
this.options.push({
iconName: 'icon_home',
displayName: 'HOME',
component: HomePage
});
this.options.push({
iconName: 'icon_settings',
displayName: 'Expenses',
component: null,
subItems: [
{
displayName: 'Exp 1',
component: Exp1Page
},
{
displayName: 'Exp 2',
component: Exp2Page
}
]
});
}
menuItemHandler() {
this.showSubmenu = !this.showSubmenu;
}
Menu Template Page
<ion-list>
<div *ngFor="let option of options">
<button menuClose ion-item *ngIf="!option.subItems" class="menu-style" (click)="openPage(option)">
<ion-label text-wrap mode="md" >
<ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon>
{{ option.displayName }}
</ion-label>
</button>
<div *ngIf="option.subItems && option.subItems.length > 0" class="div-sub-item">
<button ion-item (click)="menuItemHandler()">
<ion-label text-wrap mode="md">
<ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon>
{{ option.displayName }}
</ion-label>
<ion-icon name="icon_down" aria-hidden="true" role="presentation" item-right></ion-icon>
</button>
<div class="settings-menu-divider">
</div>
<ion-list mode="md" >
<div *ngFor="let item of option.subItems" id="side-nav" mode="md">
<button menuClose ion-item submenu-item class="submenu-style" *ngIf="showSubmenu" (click)="openPage(item)"
mode="md">
<ion-label text-wrap mode="md">
<ion-icon name="icon_bullet" aria-hidden="true" role="presentation"
item-left ></ion-icon>
{{ item.displayName }}
</ion-label>
</button>
<div *ngIf="showSubmenu" class="sub-menu-divider"></div>
</div>
</ion-list>
</div>
</div>
</ion-list>
I want the <ion-select> of a ionic form to look like a <button>.
Here is my html template:
<form (ngSubmit)="doSubmit()" [formGroup] = "myForm" >
<ion-item>
<!-- <button ion-button block> -->
<ion-select type="text" formControlName="choose" placeholder = "choose">
<ion-option value=1>option 1</ion-option>
<ion-option value=2>option 2</ion-option>
</ion-select>
<!-- </button> -->
</ion-item>
// ... other input fields + doSubmit() function ...
</form>
As it is, it works and I can manage the selection. But I want it to look like a button. So I added some tag <button ion-button block></button> around the <select> tags. If the <button> tags are uncommented, it does not work: It does not show as a button and the select functionnaly is dead. Also I naively expected it would execute as I had wished it, but it doesn't.
Has anyone an idea?
Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)
I'm using Foundation 6 with Angular2, and I have a couple of Reveal modals, that needs to open in a sequence. I've copied the example from Zurb directly, but when I click the button in the first modal, the new modal opens and the first doesn't close.
The default value for multipleOpened should be false, but they just open on top of each other.
Screenshot
I've tried setting data-multiple-opened="false" and also data-options="multipleOpened:false;", but they still open on top of each other.
Here is my code:
<p><a data-open="exampleModal2">Click me for a modal</a></p>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;">
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button" data-open="exampleModal3">Click me for another modal!</a>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;">
<h2>ANOTHER MODAL!!!</h2>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Can anyone point me in the right direction?
I'm not sure if this is the effect you're after, but you can force the closing of the first modal by adding data-close to the button that launches the second one:
<a class="button" data-close data-open="exampleModal3">Click me for another modal!</a>
JSFiddle example