The button-bar is not showing its full height with the nav-bar, seems like it is trying to fit to the ion-nav-bar. Here is what I've got so far:
index.html
<body ng-app="starter">
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
tab-dash.html
<ion-view view-title="Dashboard">
<div class="button-bar">
<a class="button button-positive">Mon</a>
<a class="button button-positive">Tue</a>
<a class="button button-positive">Wed</a>
<a class="button button-positive">Thu</a>
<a class="button button-positive">Fri</a>
</div>
<ion-content class="padding">
...
</ion-content>
</ion-view>
Try This.
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div class="button-bar">
<a class="button button-positive">Mon</a>
<a class="button button-positive">Tue</a>
<a class="button button-positive">Wed</a>
<a class="button button-positive">Thu</a>
<a class="button button-positive">Fri</a>
</div>
</ion-content>
</ion-view>
EXTRA : I assume you are using the starter template. If you want those tabs to stick to top. You can use the class tabs-top in ion-tabs
I got it working by using ion-tabs as suggested by Karan Kumar. To resolve the padding issue, I added has-tabs-top to the ion-content. Use button-clear to remove button's borders
<ion-view view-title="Dashboard">
<ion-tabs class="tabs-positive tabs-top">
<div class="button-bar">
<a class="button button-clear">Mon</a>
<a class="button button-clear">Tue</a>
<a class="button button-clear">Wed</a>
<a class="button button-clear">Thu</a>
<a class="button button-clear">Fri</a>
</div>
</ion-tabs>
<ion-content class="padding has-tabs-top">
...
</ion-content>
</ion-view>
Related
I'd like to have a Bootstrap Offcanvas displayed, and still be able to interact with the rest of the page without getting the Offcanvas closed. Is this possible? None of these examples address that: https://getbootstrap.com/docs/5.2/components/offcanvas/.
You could use an offcanvas with a static backdrop and add this CSS rule to hide the backdrop :
.offcanvas-backdrop {
display: none;
}
.offcanvas-backdrop {
display: none;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<button class="btn btn-danger" type="button" onclick="alert('clicked!')">You should not be able to click me</button>
</div>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
Trying to align some menu buttons to left with Angular Material
like on the screenshoot
<div>
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="menu" routerLink="/">
<span>Just a menu</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</mat-toolbar>
</div>
How can I do this in proper way and still have responsive site?
You can use flexbox like this:
Add a class to your div and add container to specify "right and left block"
.container {
display: flex;
justify-content: space-between;
}
<div fxShow="true" fxHide.lt-md="true" class="container">
<div>
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
The 3 buttons will be on the left and Login, Logon on the right
I'm using this library: https://www.npmjs.com/package/#angular/flex-layout for easier alignment
After installing the library, use this snippet in your code
<div fxShow="true" fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
I am trying to use Fine-Uploader in a asp.net mvc core project, but nothing is being displayed, besides a box, In the inspector in google chrome , I am getting qq is not defined.
I am adding the js,css in _Layout.cshtml
CSS
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/azure.fine-uploader/fine-uploader- gallery.min.css" />
<link rel="import" href="~/lib/azure.fine-uploader/templates/gallery.html" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/azure.fine-uploader/fine-uploader-gallery.min.css" />
<link rel="import" href="~/lib/azure.fine-uploader/templates/gallery.html" />
</environment>
JS
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/lib/azure.fine-uploader/azure.fine-uploader.min.js"> </script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
<script src="~/lib/azure.fine-uploader/azure.fine-uploader.min.js"></script>
</environment>
I have the gallery added in a cshtml as per the example on the fine-uploader site, if I remove the first script tag I get the fine-uploader box showing(See image below), but nothing else is shown.
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
<title>Fine Uploader Gallery UI</title>
<div id="uploader"></div>
<script>
var uploader = new qq.azure.FineUploader({
element: getElementById("uploader")
})
</script>
qq is not defined.
This indicates that you are not loading the fine uploader js file correctly onto your page. I suggest looking at your network requests. You will likely see that either the js file isn't loading at all, or the contents are incorrect.
I was missing a #section Scripts surrounding my script tag
<title>Fine Uploader Gallery UI</title>
<div id="uploader"></div>
#section Scripts{
<script type="text/javascript" src="~/lib/azure.fine-uploader/dist/azure.fine-uploader.min.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<script>
var uploader = new qq.azure.FineUploader({
debug: true,
element: document.getElementById("uploader"),
template: 'qq-template'
})
</script>
}
How can I set Side nav below the toolbar in angular material design? so that sidenav does not come over toolbar..
It's a matter of layout. Just use this page structure:
<div id="main" class="layout-row">
<div id="content" class="layout-column flex">
<md-toolbar>
YOUR TITLE HERE
</md-toolbar>
<md-content>
YOUR CONTENTS HERE
<md-content>
</div>
<md-sidenav class="md-sidenav-left" md-component-id="myPanel">
THE SIDENAV CONTENT
<md-sidenav>
</div>
And that's it!
Here you go. This is what you want, in case it will help someone by the way
<body ng-app="" layout="column">
<md-toolbar>
</md-toolbar>
<md-content flex>
<md-sidenav>
</md-sidenav>
<ui-view></ui-view>
</md-content>
</body
<mat-drawer-container class="example-container">
<mat-toolbar class="example-header" class="fixed-header" color="primary">
<mat-toolbar-row>
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span>
</mat-icon>
<mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span>
</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-drawer #drawer class="example-sidenav" mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
<a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>
</mat-nav-list>
</mat-drawer>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
</div>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>
Having I am having a problem with Ionic native scrolling it does not continue to show the whole screen view
here my simple page view connected to API..
<!--Emporia Home-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<ion-view name="home-view">
<ion-nav-buttons side="left">
<button style="color:white" class="button icon button-clear" ng-click="toggleLeft()"> <font face="emporia2" style="color:white" size="5">h</font></button>
<button style="color:white" class="button icon button-clear" ng-click="toggleLeft()"> EMPORIA</font></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button style="color:white" class="button icon button-clear" ng-href="#/cart"> <font face="emporia2" style="color:white" size="5">a </font></button>
</ion-nav-buttons>
<ion-content ng-controller="homeCtrl" overflow-scroll=”true” scroll="true">
<div class="item item-image">
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" does-continue="true" show-pager="false">
<ion-slide ng-repeat="board in billboard">
<a>
<img ng-src="{{board.banner_image_url}}" onerror="this.src = 'img/ic_noimage_portrait.png';">
</a>
</ion-slide>
</ion-slide-box>
</div>
<div>
<div class="item item-image">
<a href="#/men">
<img ng-src="{{hisStyle[0].full_image_url}}" class="col col-50 hisStyle" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="hisLabel">{{hisStyle[0].name}}</p>
</a>
<a href="#/women">
<img ng-src="{{herStyle[0].full_image_url}}" class="col col-50 herStyle" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="herLabel">{{herStyle[0].name}}</p>
</a>
</div>
</div>
<div class="try item item-image">
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" does-continue="true" show-pager="false">
<ion-slide>
<a href="#/accesories">
<img ng-src="{{category[0].full_image_url}}" class="hi col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category1Label">{{category[0].name}}</p>
</a>
<a href="#/bag">
<img ng-src="{{category[1].full_image_url}}" class="hello col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category2Label">{{category[1].name}}</p>
</a>
</ion-slide>
<ion-slide>
<a href="#/clothing">
<img ng-src="{{category[2].full_image_url}}" class="hi col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category1Label">{{category[2].name}}</p>
</a>
<a href="#/eyewear">
<img ng-src="{{category[3].full_image_url}}" class="hello col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category2Label">{{category[3].name}}</p>
</a>
</ion-slide>
<ion-slide>
<div>
<a href="#/footwear">
<img ng-src="{{category[4].full_image_url}}" class="hi col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category1Label">{{category[4].name}}</p>
</a>
<a href="#/eyewear">
<img ng-src="{{category[3].full_image_url}}" class="hello col col-50" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="category2Label">{{category[3].name}}</p>
</a>
</ion-slide>
<ion-slide-box>
</div>
</div>
<div>
<div collection-repeat="brand in brands" class="col col-50">
<div class="bg item item-image">
<img ng-src="{{brand.full_image_url}}" height="150px" onerror="this.src = 'img/ic_noimage_portrait.png';">
<p class="brand1">Brand Name</p>
</div>
</div>
</div>
</ion-content>
please guid me what to do..thank you..al most all of my page got this issue and I only give one as a example..