I'm using Ionic 3 to make a website which will be part of another native app in a webview so I don't user cordova or any native plugins.
I have a form with an embedded Google Map View above the elements and here is my HTML :
<div style="height: 40%; width: 100%">
<div id="map_loader" *ngIf="showMapLoader">
<div class="sk-wave">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
</div>
<div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
<ion-list>
......
......
.....
</ion-list>
</form>
and here is my CSS :
#map_loader {
margin:auto;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 1000;
position: absolute;
}
.scroll-content {
top: 38%;
position: absolute;
margin-top: 32px;
}
Now once the user open the website on his phone and start filling the form the keyboard shifts the map out of the screen ( Up ) and it stays that way and a blank empty space shows bellow the form.
Am I doing it right? Is that happening because of my CSS? and what is the best way to make a div takes a specific percentage of the screen height? I tried ion-grid but it seems that it can't help me for this case.
it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard.
I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.
.scroll-content {
padding-bottom: 0 !important;
}
Change in the AndroidManifest.xml file did the trick for me. android:windowSoftInputMode="adjustPan"
Yes, You can avoid this issue by using Ionic grid.You need to set CSS as shown below.
your-page.scss
ion-grid {
min-height: 100%;
}
Related
I'm working on a project, and would like to have a side panel in a fixed position on the screen (just below the navbar) until it reaches the top of the footer so the two don't overlap. I've found some suggestions using Jquery, but this project is in react and I am using the materialize css framework. Here is the code I am working with in App.js...
<div className="App">
<Navbar />
<div className="row" id="landingcontainer">
<div className="col s3" id="sidebar">
<Sidebar />
</div>
</div>
<Footer />
</div>
And here is what my css looks like:
#landingcontainer {
height: 120vh;
position: relative;
}
#sidebar {
position: fixed;
height: 85vh;
background-color: plum;
color: white;
top: 12vh;
right: 5px;
}
I've also made a sandbox for this: https://codesandbox.io/s/dawn-snow-3cmdv
Right now the when the user scrolls all the way to the bottom, the sidebar overlaps the footer.
Thanks!!
Why are you using materialize?
Just use this: https://material-ui.com/components/drawers/,
at least you'll avoid that kind of problems.
If you want to keep using materialize,
just, tell me why are you using position:fixed ?
Are you aware of that position:fixed make an element
to stay always in the same place even if the page is scrolled?
Are you sure you didn't want to do this :
#landingcontainer {
height: 120vh;
position: relative;
margin-bottom:0;
}
#sidebar {
position: absolute;
height: 100%;
background-color: plum;
color: white;
top: 0;
right: 0;
}
I'm using ngx-loading and working very well.
any.component.html
<div class="my-container">
<ngx-loading [show]="loading" [config]="{
backdropBorderRadius: '14px',
backdropBackgroundColour: 'rgba(0,0,0,0.87)',
fullScreenBackdrop: 'true'
}">
</ngx-loading>
</div>
I wanna know if is possible add labels in black screen. Something like image below:
You can do this quite easily just by setting the z-index on the label, that way it will show in front of the black screen.
.text {
z-index: 2000;
position: absolute;
color: white;
left: 0;
right: 0;
text-align: center;
top: calc(50% + 40px);
}
<div class="my-container">
<ngx-loading [show]="true" [config]="{
backdropBorderRadius: '14px',
backdropBackgroundColour: 'rgba(0,0,0,0.87)',
fullScreenBackdrop: 'true'
}">
</ngx-loading>
<span class="text">Here is some text</span>
</div>
Here is a StackBlitz demo: https://stackblitz.com/edit/angular-7wwp3m?file=src%2Fapp%2Fapp.component.html
I don't think this component support text from their documentation. What you could do is
<div class="spinner" *ngIf="spinnning">add some text</div>
The show/hide is controlled by spinning, or a variable passed from your spinner service.
The style of the spinner is controlled by class spinner. You can find tons of implementation of the spinner on the internet. Ex. https://www.w3schools.com/howto/howto_css_loader.asp
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
I want to add a sticky button at the bottom of screen (not page) in my angular 2 material project.
I tried some tweaks but currently when I scroll down the button doesn't stays where it was supposed to be.
before scroll it looks like below:
after scroll:
Elements's HTML inside template:
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
CSS Applied on the Element Except for any defaults:
#fab{
position: fixed;
right: 30px;
bottom: 30px;
}
*{
margin: 0;
}
How can I fix this?
Additionally is there any built in way with Angular material to do what I want?
UPDATE:
My main component's Template:
<toolbar></toolbar>
<side-nav></side-nav>
Side Nav's Template:
<md-sidenav-container id="sidenav-container">
// contents
<router-outlet></router-outlet>
</md-sidenav-container>
and its CSS:
#sidenav-container { // styling to make side nav of full height
position: fixed;
height: 90%;
min-height: 90%;
width: 100%;
min-width: 100%;
}
and then inside the component added by the router-outlet will come FAB element.
Notes-list component's template (the one shown in the images):
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
//rest of the content
LIVE DEMO
You are correct to put the router-outlet within the md-sidenav-container.
Add the follow class to your FAB element.
.md-fab-bottom-right2 {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
}
This is how I got it to work.
Add a custom class and apply your styles also look for the hierarchy in which files are referenced to DOM
<div class="example-container">
<h3>sticky icons</h3>
<a class="mine" md-fab routerLink=".">
<md-icon>check</md-icon>
</a>
<a md-mini-fab routerLink=".">
<md-icon>check</md-icon>
</a>
</div>
LIVE DEMO
Update 1 :
You are using the icon inside the md-sidenav container which is a mistake
<div class="example-container">
<md-sidenav-container>
<md-sidenav #sidenav>
<p>side nav works</p>
</md-sidenav>
</md-sidenav-container>
<p>content</p>
<a class="mine" md-fab (click)="sidenav.open()">
<md-icon>check</md-icon>
</a>
</div>
Updated Demo
Update 2 :
Look at the below code, you are wrapping everything inside sidenav which is wrong. Use as below
<md-sidenav-container id="sidenav-container"> </md-sidenav-container>
// contents
<router-outlet></router-outlet>
I'm very new to Ionic and I have a simple question that I couldn't find in the documentation.
Is there any way to use Ionic classes to simply align the content which is now below the image, to the left?
The code I currently have is:
<ion-item class="item-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster">
<h2>Title</h2>
<h3>Something else</h3>
Thanks!
See this demo: http://play.ionic.io/app/e8f309f71714
You dont need to do any styling for this, ionic thumbnails will be of best use to you, see here Documentation.
This is how you will do
<ion-item class="item-thumbnail-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster" class="customized-image">
<h2>Title</h2>
<h2>Something else</h2>
<p>your large content goes here</p>
</ion-item>
item-thumbnail-left class is provided by ionic. You will only have to make some style class to make image rectangle. Because by default image will be square.This is how class can look like
.customized-image{
max-height: 100px !important;
}
customized-image class should be added to image tag.That is it, no more custom styling.
You Can acomplish it using inline-block
.item-left img {
display: inline-block;
width: 33%; /* or waterver you need = w1 */
vertical-align: top;
}
.item-left h2,.item-left h3 {
display:inline-block;
width: 66%; /* (100-w1)% */
vertical-align: top;
}