I have used material icons in my project. All the other icons can be seen on the browser.
But toggle_on and toggle_off cannot be seen.
This is how I wrote them
<mat-icon color="accent">toggle_off</mat-icon>
<mat-icon color="primary">toggle_off</mat-icon>
Can anyone help?
Related
I am using angular version 6 with material design. I have created one page which uses sidenav component on material design and its stackblitz link is https://angular-pxw1qr.stackblitz.io/sidenav. When i open sidenav page in any Iphone and pull down or pull up the screen sidenav content goes behind the page content and white background is coming at top or bottom of the page.
What i can do to remove this behavior ?
You're missing the fullscreen attribute on your sidenav container:
<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav>
<!-- ... -->
</mat-sidenav>
<mat-sidenav-content>
<!-- ... -->
</mat-sidenav-content>
</mat-sidenav-container>
Note that this is just used for styling and does not serve any other purpose.
See the sidenav's stylesheet, as well as the mat-fill mixin for more info.
I'm trying to create a tabs bar at the top of my app, with no obvious header, but the iOS status bar is overlapping it. I've tried wrapping the ion-tabs tag in an ion-content tag that has padding but that didn't work. I wrapped the tabs in a header which fixed the padding issue, but then the pages loaded by the tab disappeared inside the header.
I've seen all the posts about headers being overlapped but those were years ago, that's been fixed in ion 4, and the solutions don't work for tabs anyways.
How can I solve this without removing the status bar?
iOS version: 11.4.1
ionic version: 4.0.5
Recreating:
Create the ionic tabs starter project
Change the tabs placement to top
Remove the header in home.html
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
After reading and playing with #Bilow's answer, I found it sufficient to simply add margin to the ion-tabs element as a whole, like so:
ion-tabs {
margin-top: var(--ion-safe-area-top);
}
This added space for the status bar on iOS. On Android, which was already behaving properly, nothing changed, so this fix works cross-platform.
It seems that tabs are just hard to work with. I found a work around by using segments. I'll just need to spend some time to stylize them to look right.
Here is my new app.html code:
<ion-header>
<h2></h2>
<ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
<ion-segment-button value="home">
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button value="about">
<ion-icon name="information-circle"></ion-icon>
</ion-segment-button>
<ion-segment-button value="contacts">
<ion-icon name="contacts"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>
Having segments in the header worked for me, but in order to get the padding I needed I had to add an empty h2 tag. If there's a better way feel free to let me know, for now I'm happy with this.
For those of you that would like to do something similar I found the answer, posted by rapropos, here:
https://forum.ionicframework.com/t/having-a-hard-time-understanding-the-navigation-with-tabs/92918/9
With just a little bit more effort you'll able to keep using the ion-tabs. This is what I've came up with:
Add to your global scss (or wherever needed)
global.scss
.plt-ios {
ion-tab-bar {
padding-top: var(--ion-safe-area-top);
}
ion-header ion-toolbar.noSafeAreaPaddingTop{
padding-top: 0 !important;
}
}
Add the 'noSafeAreaPaddingTop'-class to every tab page using the ion-toolbar
YourPageTemplate.html
<ion-header>
<ion-toolbar class='noSafeAreaPaddingTop'>
<ion-title>Tab page title</ion-title>
</ion-toolbar>
</ion-header>
...
I'm not verry happy with this method neither, but it works with ion-tabs..
A better solution was obvious:
<ion-header>
<h2></h2>
</ion-header>
<ion-content>
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
</ion-content>
I'm not sure why that took me so long to figure out...
I have recently taken up web design and I am in no way an expert. I am developing this site for myself and I seem to be having some problems. This site looks about the same (it's still under development) across all browsers and I've been working on tablet and mobile phone specific css. While doing testing for the iPad (I use the xCode iOS Sim) I noticed that my menu bar was not working except in what seem like random moments (usually when I was zoomed in). I had a family member test this on their physical iPad and they couldn't use the nav bar at all. This jsFiddle link contains the html and css that run the navbar. I will be spending the next few hours working on this and will update or remove this post if I figure it out, but if I do not, any help is appreciated.
This is the html only, the css is too long.
<h2>Auburn PC Repair<br>& Building</h2>
<div id="header-image">
<h1></h1>
</div>
<nav id="buttonbar">
<ul>
<li id="services-button"><div class="buttonHighlight"></div>
<h3>Our Services</h3><p>how can we help you</p>
<ul>
<li>PC Repair</li>
<li>Mobile Device</li>
<li>Networking</li>
<li>PC Building</li>
</ul>
</li>
<li id="contact-button"><div class="buttonHighlight"></div>
<h3>Contact Us</h3><p>phone and email</p>
</li>
<li id="about-button"><div class="buttonHighlight"></div>
<h3>About Us</h3><p>all about us</p>
</li>
</ul>
</nav>
EDIT: The navbar was designed around www.panic.com/coda navbar. It works just fine on the iPad.
EDIT: The current setup works on all non-iOS devices.
Your navigation relies on hover events to trigger menu content to appear.
A hover event is triggered by the mouse moving over an element.
Touch devices, such as all iOS devices, as well as most, if not all, contemporary smartphones and tablets, do not have a mouse and as such there is no way for a hover event to be triggered.
You cannot achieve what you want on contemporary touch devices using only CSS.
There are various touch-related events that can be fired and responded to using JavaScript. You will need to opt not for a CSS-based menu-triggering approach and instead use a JavaScript-based approach where both hover and touch events are handled to produce the menu system you desire.
is there anyway to reference jquery ui icons as regular images anywhere in my site?
If you've linked to the jquery CSS, you can get at the icons by applying the .ui-icon base class and the specific icon class (e.g - .ui-icon-close for close button) to your element (usually span)
The jquery wiki has a comprehensive list of icons and their classes, you can find it here : http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework
Just inspect the icon and get the class.
EDIT
Sample usage
<span class="ui-icon ui-icon-zoomin"></span> <!-- Shows a magnifying glass -->
<span class="ui-icon ui-icon-play"></span> <!-- Shows a play button -->
Take a look at this code snipplet: http://www.xinotes.org/notes/note/773/
you can use icon classes from jQueryUI Icons Cheatsheet
This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)