I have an ionic card modal overlay that's triggered by a button. When I first added it, it worked as expected. But the moment I refresh the app, it changes behavior.
This first screenshot shows the correct behavior. The modal covers part of the screen and it touches all the screen edges, except the top.
And this is how it behaves after I refresh. The modal is confined to the shrunk background, leaving spacing between the screen edges.
Here's my modal code:
<ion-modal #modal mode="ios" class="auto-height" trigger="open-schedule-modal" [presentingElement]="presentingElement">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
<ion-buttons slot="end">
<ion-button (click)="modal.dismiss()">
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<div class="inner-content">
<ion-list>
<ion-item>
...
</ion-item>
<ion-item>
...
</ion-item>
</ion-list>
</div>
</ng-template>
</ion-modal>
And the relevant SCSS:
The issue doesn't lie here because I tried removing all styling and it still occurs.
ion-modal.auto-height {
&.bottom {
align-items: flex-end;
}
--height: auto;
.ion-page {
position: relative;
display: block;
contain: content;
bottom: 0;
.inner-content {
max-height: 80vh;
overflow: auto;
padding: 10px;
}
}
}
When initially loading the ‘app’, at browser launch, your developer tools aren’t active. Ionic selects an ‘theme’ based on your device. If you inspect your page you’ll see that the gets the ‘md’ with ‘platform-core’ classs (and some more stuff) at startup. When using the developer tools with the device mode enabled and you refresh at that point, the app reloads and the class is set again based on your ‘selected device’. In your case iPhone 6/7/8. You’ll now have e.g. ‘ios’ and ‘platform-ios’ and more set. This is giving you that ‘css error’.
This is not an error btw. You’ll just have to implement some platform specific css tweaks. That will fix your problem.
Try using:
ionic serve --lab
You’ll be able to view multiple platforms and it’s styles. This way you’ll be able to inspect them easily and create platform specific css tweaks easier.
Related
I'am developing an ionic 4 application and I've created a popover.
Inside this popover I want to use a ion-fub-button that has to be fixed in the top-right position of the popover.
The HTML code that I've written is like this:
<ion-content>
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button (click)="getStats()">
<ion-icon id="closeBTN" name="stats" color="light">
</ion-icon>
</ion-fab-button>
</ion-fab>
<div>
......
</div>
</ion-content>
As you can see, I want that the ion-fab-button should stay FIXED in the top-right position of the popover, but in reality it doesn't stay fixed, but scrolls with the rest of the content.
May anyone tell me why and how I can fix it?
I've also tried to insert the button inside a ion-header, but also the ion-header scrolls with the rest of the popover. And I've also tried to use css position:fixed for this button, but it doesn't work.
May anyone help me?
This works for me on 25-02-2021 with Ionic 5
html
<div class="fixed">
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button size="small">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
css
.fixed {
position: fixed;
bottom: 30px;
right: 0;
}
Maybe this link will help you. In my case, if ion-fab is placed in the custom component inside ion-content, fixed property not work properly.
I use angular material for ui component and follow the below tutorials to create my own page.
https://stackblitz.com/angular/pbndqaomepr?file=app%2Fmenu-overview-example.html
When I click menu, angular shows a div containing Item 1 and Item 2 that's ok fro big screen. What I tried to do is to be sure that the div expands to the full browser windows just in case mobile devices.
So I added the following css:
#media only screen and (max-width: 600px) {
.menu-screen {
position: fixed;
width: 100vw;
height: 100vh
}
}
And use the following menu template:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class="menu-screen">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
And nothing happens.
I need that matMenu item to cover the full monile screen.
What I'm doing wrong ? One of my friends suggested listening menu item opened event and to show a pop-up filling the window. However, I felt that it would be cumbersome.
Thanks
First of all, you either need to apply that css code for the whole document, or if you keep the css in your component, you need to set the encapsulation mode of the component to NONE.
Because the menu is created in an overlay container as a child to your body element, not as a child to your component.
Secondly, angular material creates several containers with which encapsulate the menu, and their positions need to be overridden.
So, in your menu-overview-example.css file, put this code:
.cdk-overlay-connected-position-bounding-box {
left: 0 !important;
}
#media only screen and (max-width: 600px) {
.menu-screen {
position: fixed;
max-width: unset !important;
width: 100vw;
}
}
and in your menu-overview-example.ts file, add this to your component decorator:
#Component({
...
encapsulation: ViewEncapsulation.None
})
I've created a forked working version of your code here:
https://stackblitz.com/edit/angular-sjy3em
You probably want to make the selectors more specific so you can remove the !important directive from your code, it's bad practice but I used it for simplicity here.
Firstly, I was unable to reproduce this issue on plunker, but my attempt is linked here: http://plnkr.co/edit/yFe07e
I have an ng-repeat which repeats A-Z and are displayed as buttons, for the user to click to filter their results.
The letters are arranged in a table to display horizontally, filling up all available width. It works perfectly for B-Z... but A does not show its animation effect. If I watch via an ng-click it does indeed register the click, the it does not animate the click like the rest of the letters.
I don't know why I'm unable to reproduce the issue on plunker, but hoping someone can point me in the right direction.
<ion-view view-title="Title">
<ion-header-bar class="header-bar stable-bg">
<img src="content/img/logo.png" class="logo">
<span class="royal">Title</span>
<div class="time royal">{{getTime()}}</div>
</ion-header-bar>
<ion-content class="energized-bg">
<div class="letter-repeater stable-bg">
<span ng-repeat="letter in letters" class="button button-outline button-royal">{{letter}}</span>
</div>
</ion-content>
</ion-view>
CSS in question:
.letter-repeater {
z-index: 2;
height: 15px;
width: 100%;
display: table;
table-layout: fixed;
}
.letter-repeater > span {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
1) Why is the first element in the ng-repeat not animating on click but the rest work perfectly?
Update
I have tried to isolate what's going on here by recreating on plnkr but have yet to be successful; I will try to explain the nesting of the view in question and my stack below.
The HTML near the top of this post is the root of home.html
index.html simply has <body ng-app="myApp"> <ion-nav-view></ion-nav-view> </body> with no css
The view is governed by Ionic->Angular UI-Router, as below
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'app/home/home.html',
controller: 'homeController'
}
}
})
As you can see, nothing terribly interesting. The only customizations on Ionic's SCSS are color variables. Further, I have poured through all elements in the browser to ensure there's no overlap, and where I've found any I pushed it behind with z-index.
I am using Ionic, AngularJS, Cordova, JQuery
The issue presents itself when viewing in browser or on device
I cant figure this one out. I use phonegap on an ios7. I have a pagecontainer in which I put page elements. I have select element which uses the default ios7 select list thing. The select gets a black background - so the text is impossible to read. If I remove the glb_pagecontainer and page from my css, the select list gets transparent as it should. so the problem seems to be with the glb_pagecontainer in combination with the page?
#glb_pagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="glb_pagecontainer">
<div class="page" id="pageid">
<div class="row row1" style="margin-top:50px;">
<section class="col">
<div class="input">
<select id="theid" class="inputpicker" style="text-indent: 92px;">
<option>one option</option>
</select>
</div>
</section>
</div>
</div><!-- End page -->
</div><!-- End glb_pagecontainer -->
It happens when the <select> element is too close to the bottom of the form. In that case the browser control overscrolls to keep the HTML control visible in the top half, while showing the selection spinner on the bottom. In the auto-generated Phonegap project, the default overscroll background is black, which combined with the new iOS 7 blurred background overlay, makes the text very hard to read.
One solution could be re-arranging your form so the select is not on the bottom, as well as picking a light background in your CSS for good contrast when the overlay appears.
For me the above was not possible, I only had a few selects on the form, nothing else. If you have created your project using the Phonegap CLI, open the file at:
[project-folder]/platforms/ios/[project-name]/Classes/MainViewController.m
and comment out or delete the following line:
theWebView.backgroundColor = [UIColor blackColor];
This is what responsible for the black overscroll background. By removing that line, it resets back to a default medium-light grey.
There is a pretty sweet Plugin, that let's you set the background-color of the Web-View - even dynamically during runtime.
It solved the problem for me.
https://github.com/EddyVerbruggen/iOSWebViewColor-PhoneGap-Plugin
What happens if you remove the following from the select element?
text-indent: 92px;
As mentioned by the OP in a comment, adding the value of
height=device-height
To the meta viewport fixes this for iOS 7.0.x , it's fixed on 7.1.
Put this line of code in css
html { -webkit-tap-highlight-color: transparent;}
I'm writing a page that is meant to be printed and styling is different from the rest of the pages in my application. Essentially I'm trying to create a wallet card with login information for a user to print out, cut, and keep with them.
I've only tried printing my login card with chrome and IE. IE get's it perfectly but chrome unfortunately makes the card too big. Not sure if it matters (I'm not a CSS expert) but I tried using different units; inches, pixels, and points.
When I use the developer tools in chrome, I see that the pixels are calculated correctly. I checked that to see if the browser was adding additional padding inside the div.
Here's what I have for the login card elements.
<div id="divLoginCard">
<div id="divLoginCardHeader">
<h3>User Login - <span id="spnUserName"></span></h3>
</div>
<div id="divLoginCardContent">
<div class="fieldRow">
<span class="fieldLabel">Website:</span>
<span class="fieldValue">http://www.xxx.zzz</span>
</div>
<div class="fieldRow">
<span class="fieldLabel">ID:</span>
<span class="fieldValue" id="spnUserID"></span>
</div>
<div class="fieldRow">
<span class="fieldLabel">Contact's Name:</span>
<span class="fieldValue" id="spnContactsName"></span>
</div>
</div>
</div>
Here is my CSS styling. I'm trying to achieve a physical size of 3.5" x 2" which is a standard US business card size.
#divLoginCard
{
margin:0 auto;
width:252pt;
height:144pt;
border-style:dashed;
border-color:gray;
}
#divLoginCardHeader
{
text-align:center;
}
#divLoginCardContent
{
margin-left:25px;
margin-right:15px;
padding-top:15px;
}
.fieldRow
{
margin-bottom: 3px;
display: table;
width: 100%;
}
.fieldLabel
{
font-weight: bold;
width: 96px;
text-align: left;
display: table-cell;
}
.fieldValue
{
min-width: 100%;
display: table-cell;
word-wrap: break-word;
width: 200px;
}
body
{
font-family:Arial;
}
Naturally, I would prefer to have a cross browser solution for this where I don't have to use a lot of browser specific style rules but that may not be possible in this case.
Do I need some sort of CSS reset in order to properly size this for printing with any browser?
UPDATE
Chrome renders my html as a PDF document when it is printed. I noticed that the print dialog in chrome is simply a modal window on top of the page. I checked out the elements in developer tools and the print preview is a pdf document. The html provides the source URL (chrome://my_path/print.pdf) which is the full document that is printed by a printer.
SO, long story short; my issue seems to be how chrome renders my html as pdf. Is there a way to control how it renders the html or maybe some chrome friendly CSS that I could use?
Try the #media print specification in your CSS. Chrome is probably overriding your on-screen CSS with print CSS that sizes the elements to fit the printed page.
#media print {
/* put your fixes here */
}
I think this is more likely to be the issue than that Chrome is translating to pdf.