I am trying to get page containing a slider in the middle and a button in the bottom as shown in this picture:
So, I chose to use the Ionic grid since I thought it will be fast to do it. I wrote thee following code:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable bar-positive">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content scroll="false">
<div class="row row-center">
<ion-slide-box on-slide-changed="slideHasChanged($index)" class="col col-80 col-offset-10">
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
</ion-slide-box>
</div>
<div class="row row-bottom">
<button class="button button-full button-positive button-large button-skip">Click</button>
</div>
</ion-content>
</ion-pane>
Unfortunately, I got this result:
How can I fix it to get the view in the first picture ?
Related
Im trying to hide specific div (empty state) when i add some item from add button, any ideas how can i do that easily?
Best Regards, Will.
page.html
<ion-content>
<!-- DIV ABOVE -->
<div class="center-div">
<img src="assets/imgs/noItem.svg" />
<div class="center">
<h1>Empty List</h1>
</div>
</div>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-list>
<button *ngFor="let item of items" ion-item (click)="goToItemDetail(crop)">
...
</ion-list>
<ion-fab right bottom>
<button ion-fab class="button-fab" (click)="addItem()">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
Yes, you can hide div with the help of *ngIf="condition"
<div class="center" *ngIf="items">
<h1>Empty List</h1>
</div>
or you can also check boolean varible on button like
// isVisible: boolean
addItem() {
this.isVisible = false;
}
<div class="center" *ngIf="!isVisible">
<h1>Empty List</h1>
</div>
I have the current situation:
Relevant code:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="space-between">
<span class="page-headline">
<img class="logo" src="./logo.png"/>club
</span>
<button md-icon-button class="main_menu_button1" (click)="dinnerClicked()">
<md-icon>local_pizza</md-icon>
</button>
<button md-icon-button class="main_menu_button2" (click)="notificationsClicked()">
<md-icon>notifications</md-icon>
</button>
<button md-icon-button class="main_menu_button3" (click)="eventsClicked()">
<md-icon>event_note</md-icon>
</button>
</div>
</md-toolbar>
I just want the 3 icons to be adjacent closely to each other and align to the right. If I change fx-layout-align to fx-layout-align-xs, I get almost what I want:
But to the left instead of to the right...
I have tried many CSS configurations but none worked for me, is there any easy way to acheive this? Many thanks.
If you are using this plugin: https://github.com/angular/flex-layout#api-overview
i suggest:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="end" >
...
</div>
</md-toolbar>
Just add below code in your css:
<style>
.main_menu_button1,.main_menu_button2,.main_menu_button3
{
float:right;
}
</style>
I have 2 pages in my index.html in XDK. I navigate from one to the other. I want to add a back button just like the templates but it's not possible.
This is my html:
<div class="upage vertical-col left" id="mainpage">
<div id="SubPage" class="upage-content vertical-col left ">
<div class="tarea widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" name="uib_w_1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div class="text-container">
<p>This is the main page</p>
</div>
</div>
<button class="btn widget uib_w_2 d-margins btn-default" data-uib="twitter%20bootstrap/button" data-ver="1" id="buttonSubPage">Go to sub page</button>
</div>
<div id="SubPage2" class="upage-content vertical-col left hidden"><span class="widget uib_w_3 d-margins badge" data-uib="twitter%20bootstrap/badge_and_label" data-ver="1">This is subfile 2</span>
</div>
</div>
I want to add the back button to "SubPage2". How can I achieve this? I'm working with a blank template in the app designer.
Add This code
$(document).ready(function(){
$("#buttonSubPage").click(function(){
$(".text-container").hide();
$("#SubPage2").show();
});
});
See Fiddle
After you add your header to the app designer, switch to the Code view look for the following code in newly created header
<div class="widget-container content-area horiz-area wrapping-col left"></div>
and then add the button code,
<button data-uib="twitter%20bootstrap/button" data-rel="back" data-ver="1" id="back">Back</button>
the data-rel controls the back action, without need for extra javascript.
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.
I”m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website.
Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.
So my question is if it is possible to "embed" a html page in a specific section of another page.
For example I could have my sidebar be "static" and load in a login.html file in a specific div.
And having one html file with all the pages would be very hard to maintain and organise.
Is that possible in some kind of way?
EDIT: As requesting, I'm adding the most relevant code I already have
<ion-side-menus>
<!-- Main page-->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<!-- Knop toggleSidebar -->
<button class="button button-icon" ng-click="triggerSidebar()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Proof of concept</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col" col-50>5 + 8 = </div>
<div class="col" col-25><input type="number" placeholder="13"></div>
<div class="col" col-25><button class="button button-small">Controleer</button></div>
</div>
</ion-content>
</ion-side-menu-content>
<!-- End Main page -->
<!-- Sidebar -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
</ion-side-menu>
<!-- End sidebar -->
What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file
You can solve it using angular UI-routing:
$stateProvider
.state("menu", {
url: "/menu",
abstract: true,
templateUrl: "views/menu.html"
})
.state('menu.combinedPage1', {
url: '/combinedPage1',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded1.html",
controller: "EmbeddedController1"
}
}
})
.state('menu.combinedPage2', {
url: '/combinedPage2',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded2.html",
controller: "EmbeddedController2"
}
}
})
Here "menu" is abstract state and contains embedded views that controlled by router.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view name="EmbeddedContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
You can do it by using frames :) with only html the following code will help
<html>
<head>
<title>Multiple Pages</title>
</head>
<FRAMESET cols="20%, 80%">
<FRAME SRC="sidebar.html">
<FRAME SRC="content.html">
</FRAMESET>
</html>
also you can do it with php like this
#side_bar{
background-color: red;
width: 200px;
height: 100%;
float: left;
}
<div id="side_bar">
<?php
include_once('sidebar.html');
?>
</div>
You can make a link so when they click on the "profiles" it goes to another page and then you can put the code for your sidebar in a php document and use a php include tag to show it in the new page. See the example below:
sidebarCode.php:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
The new page:
<!--Specific Did You Want-->
<div>
<?php include 'sidebarCode.php';?>
</div>
Inside <ion-side-menu-content> you can load scripts via the ui router.
So what you can do is when a user clicks on a menu item, you store the page HTML as template using $templatecache and then just reload your view inside <ion-side-menu-content> that will do your job !