I am working on a simple app in Ionic.
I have a problem that the keyboard pushes my input field up and over another div while there is enough space for they keyboard. How do I fix this? I already looked around on the internet but wasn't able to find any solution to my problem.
This is what happens:
As you can see, the text is in the image and there is no reason for it being so high. There is more then enough space below it.
This is my code:
HTML:
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="login content">
<div class="logo-container">
<img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
</div>
<div class="center">
<p>Vul hier je naam in:</p>
<ion-item class="code-field">
<ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
</ion-item>
</div>
</ion-content>
CSS:
page-login {
.login {
background-color: #EEEEEE;
}
.logo-container{
position: absolute;
width: 400px;
left: calc(50% - 400px / 2);
}
.logo-img{
display: block;
width: 100%;
height: auto;
}
.center{
position: absolute;
top: 40%;
width: 300px;
left: calc(50% - 300px / 2);
}
#media only screen and (max-width: 600px) {
/* For mobile phones: */
.logo-container{
position: absolute;
width: 300px;
left: calc(50% - 300px / 2);
}
}
}
What I have tried:
I have added the Ionic native keyboard and added this in my app module:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
This unfortunately did not work.
Update:
Adding
.scroll-content {
padding-bottom: 0 !important;
}
is also not working.
This is a known bug of Ionic 3 and can be fixed by adding the following CSS style:
.scroll-content {
padding-bottom: 0 !important;
}
I have had similar issues and this piece of CSS fixed it.
When an input is focused, Ionic adds some padding to the bottom of the scroll-content class, to create room for the keyboard.
Update
Relative top positioning may cause the issue (as well).
This person's answer helped me"
https://stackoverflow.com/a/61337530/10661436
Basically just go to your AndroidManifest.xml file,
search for:
android:windowSoftInputMode=ABC
Replace "ABC" with adjustPan
Just add this to your config.xml and make sure you have your keyboard plugin installed.
<preference name="KeyboardResizeMode" value="ionic" />
Related
I need to fix a button at the bottom of an ionic 3 project page.
The actual scss script works but the button is not totally fixed to the bottom, and it moves while scrolling.
Here is the sass script:
.fixedBtn{
width: 100%;
position: fixed;
left: 0;
bottom: 10px;
right: 0;
}
I tried to use flex:
div{
display: flex;
flex-direction: column;
}
But the result was as shown in this stackblitz, not the right behavior.
put this :
<button ion-button primary class="fixedBtn">a</button>
out side of ion-content
should be like
<ion-content>
/** your content */
</ion-content>
<button ion-button primary class="fixedBtn">a</button>
and in your sass file :
.fixedBtn{
width: 100%;
position: fixed !important;
left: 0;
bottom: 50px;
right: 0;
}
I have a page in my ionic application that on button click opens a Modal Page. Currently, I have override the variable.scss to the code below to make the model cover the 100% of the page.
//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;
However, this applies for all my models in my application. I want to use some models in other pages that use the 50% of the width and around 80% of the height. How can I customize my controls?
You can not change a particular modal height or width.
Now, I will describe an solution which I use to resize my modal.
Ensured that all modal height and width should be 100%. As ionic
resize modal for large screen devices. That's why I added below code
in app.scss.
modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
#media not all and (min-height: 600px) and (min-width: 768px) {
ion-modal ion-backdrop {
visibility: hidden;
}
}
#media only screen and (min-height: 0px) and (min-width: 0px) {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Now In ion-content we make two div and the background of ion-content should be transparent (see main-view css class). Now, One div is used for background of the modal, this will use as backdrop (see overlay css class). Another div should be used for the content, we will resize this div (see modal-content css class).In example I resize the height to 50%. Sample html ans css code is given below,
page-about {
.main-view{
background: transparent;
}
.overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
background-color: #333;
}
.modal_content {
position: absolute;
top: calc(50% - (50%/2));
left: 0;
right: 0;
width: 100%;
height: 50%;
padding: 10px;
z-index: 100;
margin: 0 auto;
padding: 10px;
color: #333;
background: #e8e8e8;
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
border-radius: 5px;
box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
}
}
<ion-content class="main-view">
<div class="overlay" (click)="dismiss()"></div>
<div class="modal_content">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
pages.
</p>
</div>
</ion-content>
Here is a screen shot of the modal,
If you want modal content should scroll then replace <div class="modal_content"> with <ion-scroll class="modal_content" scrollY="true"> as told by Missak Boyajian in comment
For Ionic3 you need to this comment from Alston Sahyun Kim.
this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }
All the code is taken from here. I think this project repo will help you.
I tried before but had not found a generic way to make modals behave the way as I desired.
So I strugled a bit and achieved responsive modals and other kinds of modals with the following global scss:
ion-modal {
&.my-modal-inner {
display: flex;
align-items: center;
justify-content: center;
ion-backdrop {
visibility: visible;
}
.modal-wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
overflow: auto;
width: auto;
height: auto;
left: auto;
top: auto;
contain: content;
max-width: 70%;
max-height: 70%;
border-radius: 2px;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
> .ion-page {
position: relative;
display: block;
width: auto;
height: auto;
contain: content;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
}
&.my-stretch {
.modal-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
> .ion-page {
width: 100%;
height: 100%;
}
}
}
}
&.my-fullscreen {
.modal-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
You can have responsive modals that will have the size of the inner content using cssClass: 'my-modal-inner':
The modal will occupy at maximum 70% of the width and height (like defined in the above css) when the content surpasses the limit:
If the content of the modal is supposed to occupy all the container element (like a page or a component with ion-content), it will not work well with the above case because the modal supposes that the container should have the size of its children, causing a possibly undesired behaviour (the modal will be very small, more than it should):
Instead, you can define the modal to occupy its maximum size with cssClass: 'my-modal-inner my-stretch':
If you want the modal to be full screen, even in a large desktop browser, you can use cssClass: 'my-fullscreen':
Notes:
You can change the prefix my- with any other prefix of your choice (or no prefix).
You can change the maximum width and height of the modal in the above css, as you seem fit (I defined both as 70%, in your case it would be 50% and 80% for the width and height, respectively).
The above screenshots were taken in a desktop browser, but the modal changes also work in a mobile/native app with Ionic (I tested in Android, and it should work in iOS too).
Update (2018-07-30)
About the HTML codes for the modal:
1) Responsive modal that will be as large or as small as the inner content (a single div or a hierarchy of divs, spans and other block and inline elements should do):
<div class="main">
<div class="img-container">
<img src="assets/img/main/icon.png" [alt]="APP_NAME">
</div>
<div class="info-container">
<div class="app-name">{{ APP_NAME }}</div>
<div class="app-version">Version {{ APP_VERSION }}</div>
<div class="app-year">#{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div>
<div class="app-rights">All rights reserved</div>
</div>
</div>
2) Modal will occupies its maximum size (use class my-stretch). In this case, any ionic page will do:
<ion-header>
<ion-navbar>
<ion-title>My Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p> My content </p>
</ion-content>
I am using Ionic Framework to build an Android Application. I need to display horizontally scrollable cards. Each card will display a product image, product title, product price and a button. I tried using ion scroll in x-direction, but cards doesn't seem to scroll in x-direction.
I tried using this plugin, but it seems like it can be use only with ion-pane and i am using ion-content.
In the meanwhile, i found another solution -
<div class="cardHolder">
<ul>
<div>
<img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" >
</div>
</div>
CSS
.cardHolder {
height: 200px;
width:100%;
padding: 8px;
margin: 6px;
}
ul {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.examplePic {
height: 150px;
width: auto;
border:1px solid black;
margin: 2px;
}
The issue with this solution is that, I am only able to retrieve the image and not the other details.
You should look into ionic's built-in ion-scroll. Your code would look something like this. Also checkout this example
<ion-scroll direction="x">`
....your scrollable content here...
</ion-scroll>
Also checkout this example
So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :(
Site: http://s433108212.onlinehome.us
My client wanted the space background in the header to stretch past the 1000px area I have set for the header. So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile.
Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/
Anyone else run into this?
CSS:
body {
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
}
.wrapper_bg {
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
}
.space_stretch_bg {
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
}
.container1000 {
position: relative;
width: 1000px; top: -100px;
margin:auto;
}
#content_container {
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
}
Shortened HTML:
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
First of all: it's because of wrapper_bg background that gets smaller. It's behind space_stretch_bg. Give wrapper_bg min-width: 1000px because your content_container is 1000px.
You can see the white space also on your pc browser if you make the browser smaller.
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}