<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
In the div two button and on image now how to set div in vertically center.
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
div{
vertical-align: text-top;
}
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
Related
I am using *ngFor for displaying multiple buttons, it can have many buttons. Currently I am getting all the buttons in one column, means one below one.
But I want to display only 2 buttons in a row, means, in above case these green buttons should be in one line, and 2 red buttons should be in next line just below of it. How can I do this?
This is I tried:
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>
css
.actionButton {
width: 200px;
display: inline-block;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis
}
<div class='row'>
<div class='col'>
<div class='row'>
<button >
button1
</button>
<button >
button2
</button>
</div>
<div class='row'>
<button >
button1
</button>
<button >
button2
</button>
</div>
</div>
</div>
try this row col method
you could group buttons in bootstrap. for your purpose, add btn-group class to ngIf div. it's bootstrap feature and you don't need any custom css.
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1" class="btn-group">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2" class="btn-group">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>
You could make it by using normal bootstrap, add class row to parent div and add class col-sm-6 to every child will make only 2 children in that row
<div *ngFor="let actionButton of actionButtonData" class="row"> <!--here-->
<div *ngIf="actionButton.Direction === 1" class="col-sm-6"> <!--here-->
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2" class="col-sm-6"> <!--here-->
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
I have a collapsible box in adminlte. by default when page loads, it's expanded. How to make it collapsed by default?
Here is what I have used to make box:
https://adminlte.io/docs/2.4/js-box-widget
My HTML:
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body">
The body of the box
</div>
<div class="box-footer">
The footer of the box
</div>
</div>
My script:
<script>
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
Try boxWidget('collapse')
$('.box').boxWidget({
animationSpeed: 500,
collapseTrigger: '#my-collapse-button-trigger',
removeTrigger: '#my-remove-button-trigger',
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
removeIcon: 'fa-times',
hide: true
})
$('.box').boxWidget('collapse')
OR add collapsed-box class
<div class="box collapsed-box">
...
</div>
First, add collapsed-box class to <div class="box">.
Then, add display: none inline style to <div class="box-body"> and <div class="box-footer">.
Like this:
<div class="box collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Collapsible Box Example</h3>
<div class="box-tools pull-right">
<!-- Collapse Button -->
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none">
The body of the box
</div>
<!-- /.box-body -->
<div class="box-footer" style="display: none">
The footer of the box
</div>
</div>
It should work.
<div class="box">
<button class="button">Center me</button>
</div>
<button class="is-center"> is not working.
Yes, there is a native way.
Bulma offers has-text-centered class for centering text, inline and inline-block elements.
You can use following code:
<div class="box has-text-centered">
<button class="button">Center me</button>
</div>
Demo:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.css" rel="stylesheet"/>
<div class="box has-text-centered">
<button class="button">Center me</button>
</div>
You can also try:
<div class="columns is-centered">
<div class="column is-half">
<button class="button">Center me</button>
</div>
</div>
Quickfix: wrap the button in a div with style="text-align:center;"
<div style="text-align: center;">
<button class="button is-success">Center me</button>
</div>
I'd like to place an ionic button at the bottom right of a div. But it doesn't work as I expected. Here is the screenshot:
My html:
Ionic Blank Starter
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
</ion-slide>
</ion-slide-box>
The css:
.slider-container {
margin: 0;
padding:0;
position:relative;
}
.bottom-right {
position:absolute;
bottom: 0;
right: 0;
}
Can anybody help? Thanks.
And why not to do it this way?
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
</div>
</ion-slide>
</ion-slide-box>
<div class="slider-container">
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
...moving the button (and the container <div>) out of the slider.
When I needed to put the left and right buttons ("<" and ">") I used class "row" and "col"
<div class="row">
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-left" ng-click="slidePrevious()"></button>
</div>
<div class="col">
<ion-slide-box on-slide-changed="mudaSlide($index)">
<ion-slide ng-repeat="i in items">
<img class="button " ng-src="{{i.imagem}}" style="width: 128px; height: 128px; padding: 0; border: none; background: none;" ng-click="abreExibecaoImagem($index)"></img>
</ion-slide>
</ion-slide-box>
</div>
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-right" ng-click="slideNext()"></button>
</div>
</div>
Result
I'm trying to put header and top navbar inside of the ion-view directive.
If I put header nav navbar outside of the ion-view tag page is blinking black if page is initialized.
But if I try to insert header and top navbar inside of the ion-view title and heading in the header is not displayed.
Could somebody tell me what I'm doing wrong?
Maybe some tag inside is missing?
Thanks for any help.
Here is the code of the template:
<div class="bar bar-header bar-positive has-tabs-top">
<button class="button button-icon icon ion-chevron-left" ui-sref="home">
</button>
<h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
<button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
</button>
</div>
<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
<div class="tabs">
<a class="tab-item orange">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
</div>
<ion-view>
<div class="bar bar-header bar-positive has-tabs-top">
<button class="button button-icon icon ion-chevron-left" ui-sref="home">
</button>
<h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1>
<button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
</button>
</div>
<!--TOP TAB BAR -->
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark">
<div class="tabs">
<a class="tab-item orange">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
</div>
<ion-content ng-controller="DailyListCtrl">
<!--WRITEOUT OVERAL STATS FOR DAYS -->
<ion-list class="list" >
<ion-item class="item itemListCustom" ng-repeat="listDataItem in listData">
<div class="listDateTimeBlock">
<div class="day"><h3>{{listDataItem.DATE_FROM_DD}}</h3></div>
<div class="month"><h3>{{listDataItem.DATE_FROM_MM}}</h3></div>
</div>
<!--ROW ONE -->
<div id="left">
<div class="left-inner">
{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.SUCCESS_RATE}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'DIALS' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.DIALS_CNT}}
</div>
</div>
<!--ROW TWO-->
<div id="left">
<div class="left-inner ">
{{ 'SUCCESS_RATE_SINCE_START' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.SUCCESS_RATE_SINCE}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'CONVERSATIONS' | translate }} :
</div>
<div class="right-inner">
{{listDataItem.CONVERS_CNT}}
</div>
</div>
<!--ROW THREE-->
<div id="left">
<div class="left-inner">
{{ 'MY_DEFICIT' | translate }}:
</div>
<div class="right-inner">
{{listDataItem.DEFICIT}} %
</div>
</div>
<div id="right">
<div class="left-inner floatRight">
{{ 'APPOINTMENTS' | translate }} :
</div>
<div class="right-inner">
{{listDataItem.APPT_CNT}}
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll
icon="ion-loading-c"
distance="30%"
on-infinite="setDateRange();">
</ion-infinite-scroll>
</ion-content>
<!-- BOTTOM TABS -->
<div class="tabs-striped tabs-background-positive tabs-light">
<div class="tabs">
<a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-ios7-paper-outline"></i>
</a>
<a class="tab-item" ui-sref="weekly-list" href="/#/weekly-list">
<i class="icon ion-star"></i>
</a>
<a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-gear-a"></i>
</a>
<a class="tab-item" ui-sref="daily-list" href="/#/daily-list">
<i class="icon ion-gear-a"></i>
</a>
</div>
</div>
</ion-view>
Here are some examples of navbar usage:
Simple page with buttons left and right:
http://codepen.io/beaver71/pen/YwLELa
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
</ion-content>
</ion-view>
Navigation via side menu:
http://codepen.io/beaver71/pen/XXBvYp
Navigation via side menu and tab bar:
http://codepen.io/beaver71/pen/xZWXBO
Try to use the JavaScript versions of tabs and navigation bars.
They are easier to be manipulated in JS code, because they come with the services $ionicTabsDelegate and $ionicNavBarDelegate.