Greeting! As per title state, it seems like IONIC 3 Keyboard is not working fine on IOS. The keyboard is overlapping if switching to Emoji keyboard.
Like previous version of IONIC 1, there have directive 'keyboard-attach'. But starting IONIC 2, the directive is gone already and this keyboard issue came.
Anyone have solution for this? Below is my HTML code:
<ion-footer style="background-color: #f1f1f1; padding-bottom: 0px;">
<ion-toolbar>
<ion-row class="message_row">
<ion-col col-10>
<ion-item no-lines>
<input type="text" placeholder="Don't be shy, say something..." class="chatInput">
</ion-item>
</ion-col>
<ion-col col-2>
<button color="primary" (click)="sendMessage()" ion-button icon-only clear>
<ion-icon color="tom" name="md-send"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
SCSS code as below:
.chatInput {
width: 100%;
padding: 3px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border:0px;
font-size: 14px;
}
And here is the screen shot:
Thanks
Related
Following code works fine in mobile view but source code does not work in web view. screenshot is attaced with question. split pane is not working as per required. same is happening with every component. I have tried many things like host: style{width:70%} but nothing works. Basically it should acquire remaining space of page.
<ion-split-pane class="ion-menu" contentId="mis-menu-content" when="xl">
<ion-menu type="overlay" contentId="mis-menu-content" class="menu-gradient">
<ion-content>
<div *ngFor="let p of appPages">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngIf="p.url">
<ion-item
[routerDirection]="'root'"
[routerLink]="[p.url]"
routerLinkActive="active"
>
<ion-img slot="start" class="imgset" [src]="p.icon"></ion-img>
<ion-label class="menu-font"> {{p.title}} </ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item
button
*ngIf="p.children?.length>0"
(click)="p.open = !p.open"
[class.active-parent]="p.open"
detail="false"
>
<ion-img slot="start" class="imgset" [src]="p.icon"></ion-img>
<ion-icon
class="imgset"
slot="end"
name="chevron-forward-outline"
*ngIf="!p.open"
></ion-icon>
<ion-icon
class="imgset"
slot="end"
name="chevron-down-outline"
*ngIf="p.open"
></ion-icon>
<ion-label class="menu-font">{{p.title}}</ion-label>
</ion-item>
<ion-list class="item-md-list" *ngIf="p.open">
<ion-menu-toggle auto-hide="false" *ngFor="let sub of p.children">
<ion-item
[routerDirection]="'root'"
[routerLink]="[sub.url]"
routerLinkActive="active"
>
<ion-img
slot="start"
class="imgset-sub"
[src]="sub.icon"
></ion-img>
<ion-label class="menu-font-sub"> {{sub.title}} </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="mis-menu-content" main>
<link href="roboto.css" type="text/html" />
<ion-row>
<ion-col size-lg="12" size-md="12" size-sm="12" size="12">
<ion-title class="welcomelogo"
><img src="../../../assets/img/pil logo.png"
/></ion-title>
<ion-title class="welcometxt">
Welcome <br /><ion-title class="welcometxt1">To</ion-title
><br /><ion-title class="welcometxt2">Operations Portal</ion-title>
</ion-title>
</ion-col>
</ion-row>
</ion-router-outlet>
</ion-split-pane>
}
.split-pane {
position: absolute;
/* top: $SPLIT_TOP; */
}
ion-menu[type="overlay"] {
z-index: 80;
position: fixed;
}
ion-menu[type="reveal"] {
z-index: 80;
}
.menu-item{
background:none;
color:white;
font-weight:300;
border:0px;
.item-content{
background:none;
&.activated{
/* background: $MENU_TRANSPARENCY; */
}
}
&.active-page-highlight{
.item-content{
/* background: $MENU_TRANSPARENCY; */
}
}
}
I have a side menu always visible in my ionic aplication, the problem is I don't know how to change the #shadow-root css, I tried a few things but still don't work.
The problem is that when I make the menu smaller and empty space is left there. I want to remove that empty space, because when the screen is bigger the empty space is even bigger.
I searched in the debug console and this is the troublesome element:
This is my code:
HTML:
<ion-split-pane contentId="side-menu" class="menu-left" when="md">
<ion-menu side="start" menuId="side-menu" contentId="side-menu" mode="md" class="menu2">
<ion-header>
<ion-toolbar>
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none" class="menu-content">
<ion-item (click)="navigateHome()">
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Inicio</ion-label>
</ion-item>
<ion-item (click)="navigateAnimes()">
<ion-icon name="library" slot="start"></ion-icon>
<ion-label>Animes</ion-label>
</ion-item>
<ion-item (click)="navigateMine()">
<ion-icon name="bookmarks" slot="start"></ion-icon>
<ion-label>Mi lista</ion-label>
</ion-item>
<ion-item (click)="navigateSettings()">
<ion-icon name="options" slot="start"></ion-icon>
<ion-label>Ajustes</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="side-menu"></ion-router-outlet>
</ion-split-pane>
CSS:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
Can anyone tell me how to apply my css attributes to the inner-scroll scroll-y in the shadow class please?
#phantomiam123 I updated my css class and doesn't work:
My css class now is:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
.inner-scroll .scroll-y {
width: 200px;
}
And in the debug console:
This seems to work for me for now:
.split-pane-visible > ion-menu {
max-width: 200px!important;
}
I need to remove hamburger default icon menu on ionic menu. I've added custom menu and I need to remove default icon.
So my code:
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
My layout menu:
Html button code:
<ion-header _ngcontent-yjt-c1="" role="banner" class="ios header-ios hydrated">
<ion-toolbar _ngcontent-yjt-c1="" class="ios hydrated">
<ion-buttons _ngcontent-yjt-c1="" slot="start" class="buttons-first-slot sc-ion-buttons-ios-h sc-ion-buttons-ios-s ios hydrated">
<ion-menu-button _ngcontent-yjt-c1="" class="hydrated ios button ion-activatable ion-focusable"></ion-menu-button>
</ion-buttons>
<ion-title _ngcontent-yjt-c1="" class="ios title-ios hydrated"></ion-title>
</ion-toolbar>
</ion-header>
I need to remove default icon inside circle. How to do to remove?
Can you please try the following css rules?
Can you please check if they don't work if they get added to the css of the page you are viewing?
ion-menu-button {
display: none !important;
}
or
ion-buttons {
display: none !important;
}
or
.button.ion-activatable.ion-focusable {
display: none !important;
}
Add the below styles in your app.scss file to hide the default menu button
.bar-button-menutoggle {
display: none !important;
}
I create scroll into a element, for do this I tried:
.scroll-content {
overflow: hidden;
}
.scrollabe {
overflow-y: scroll;
}
<ion-content>
<ion-grid style="height:100%" *ngIf="plat && ticket">
<ion-row>
<ion-col col-4 padding>
<ticket-info [ticket]="ticket"></ticket-info>
</ion-col>
<ion-col class="scrollabe" col-8 no-margin>
<ticket-acao [ticket]="ticket"></ticket-acao>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
But this hides my content:
My element
Also, i tried this way:
.scroll-content {
overflow: hidden;
}
<ion-content>
<ion-grid *ngIf="plat && ticket">
<ion-row>
<ion-col col-4 padding>
<ticket-info [ticket]="ticket"></ticket-info>
</ion-col>
<ion-col col-8 no-margin>
<ion-scroll scrollY="true" style="height: 100%;width: 100%">
<ticket-acao [ticket]="ticket"></ticket-acao>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
and the same issue occurs...
The problem is solved if i decrease the height, but i lose the responsive layout.
So, what is the best way to make that?
Delete style="height: 100%" and both CSS rules you declared in there. The ion-content component will do the scroll for you if ion-grid overflows.
I need to structure the radio buttons as shown below.
image 1
I have tried as shown below.
.html
<ion-row>
<ion-col col-6>
<ion-grid radio-group formControlName="location">
<ion-row>
<ion-col col-12>
<ion-item *ngFor="let l of locations;let index = index">
<ion-label class="custom-radio">
<ion-radio value="{{index}}"></ion-radio>
<i class="{{l.icon}}"></i><br/> {{l.description}}
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col col-6>
//other part
</ion-col>
</ion-row>
Then it looks like below.
Can you tell me how to design it looks like image 1?
If you can post your HTML and CSS, then I'd be happy to help with your actual code. However, in principle, you can do something like this;
HTML
<div class="ion-item">
<i class="l-icon"></i>
<span class="l-description">Text below the image</span>
</div>
CSS
.ion-item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 60px;
}
.l-icon {
width: 50px;
height: 50px;
}
.l-description {
display: block;
}