I am trying to figure out, how to enlarge an Input-Field so that it fills the whole page below the title.
I want to enlarge the "highlighted" part to cover the remaining part of the page.
The code looks like this:
tagebuch.html:
[........]
<ion-content>
<ion-list>
[........]
<ion-item id="description">
<ion-label floating>Description</ion-label>
<ion-input type="text" [(ngModel)]="Eintrag"></ion-input>
</ion-item>
</ion-list>
<button full ion-button class="iButton" (click)="saveEintrag()">Speichern</button>
</ion-content>
tagebuch.scss:
page-tagebuch-anlegen {
#description{
height: 80%;
}
}
I can't understand why this code does "nothing", but if I specify the height in "px" it does work.
Can anybody tell me, why this is not working and how I can fix this?
Thank You :)
You need to use a textarea to get multiline handling.
<textarea name="Text1" cols="40" rows="5"></textarea>
Here is the Code that worked for me in this example:
<ion-item>
<ion-label floating>Tagebucheintrag</ion-label>
<!-- <ion-input type="text" [(ngModel)]="description" id="description"></ion-input> -->
<ion-textarea name="description" cols="40" rows="5" id="description"></ion-textarea>
</ion-item>
Related
I have multiple apps where I’m using svgs not just as small icons, but also as background, as interactive buttons or as animations.
The problem that I’m having is that I’m not able to position correctly one svg as a background image. The background image is cut on the bottom of the screen.
I tried different variations of integrating the svg but none were successfull.
I have created a github example project
https://github.com/studentrk/svgPlacement
How can I fill the available space with the svg?
Any help would be appreciated.
<ion-content [fullscreen]="true">
<ion-button (click)="addSvg()">Add svg</ion-button>
<ion-list mode="ios" mode="md">
<ion-radio-group value="mode1" [(ngModel)]="mode">
<ion-list-header>
<ion-label>Change Mode</ion-label>
</ion-list-header>
<ion-item lines="none">
<ion-label>Mode 1</ion-label>
<ion-radio slot="start" value="mode1" mode="md"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>Mode 2</ion-label>
<ion-radio slot="start" value="mode2" mode="md"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<div id="svgContainer">
<ion-icon id="svgIcon" src="./assets/balloon.svg"></ion-icon>
</div>
</ion-content>
#svgIcon {
height: 100%;
width: 100%;
}
#svgContainer {
height: 100%;
}
I have an ion-card in an ion-footer. It has an ion-textarea in it, as it will be used for a chat window. I am trying to place an icon beside the ion-card (an arrow) so a user can submit a message.
Whether I put the icon inside the ion-card, inside the ion-card-content, inside or outside the ion-footer, it just doesnt have the right positioning. If I put it inside the footer, it doesn't even show. If I put it outside the footer, it obviously rests on top or on the bottom of the footer.
<IonFooter style={{backgroundColor: 'white'}}>
<IonCard style={{width: '75%'}}>
<IonCardContent>
<IonTextarea
placeholder="Enter message here..."
value={text}
ionChange={e => setText(e.detail.value)}
/>
</IonCardContent>
</IonCard>
<IonIcon icon={arrowForwardSharp} size={"large"} color={"black"} />
</IonFooter>
Inside the footer (its below but you can't see it for some reason, even if i use a black icon)
Outside the footer (strangely places in a black box)
You can try by adding a grid inside you ionCard and adapt the number of col
If you want the icon separated from the textarea
<ion-footer>
<ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
<ion-col>
<ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-footer>
If you want the icon "inside" :
<ion-item>
<!-- <ion-label position="floating">Write Here</ion-label> -->
<ion-textarea></ion-textarea>
<ion-icon name="send" color="primary" slot="end"></ion-icon>
</ion-item>
im having troubles trying to customize the sidemenu which ionic generates automatically.
The sidemenu is located at "app.component.html" and it looks like it follows:
<ion-app>
<ion-menu contentId="content1" side="start" >
<ion-header >
<ion-toolbar >
<ion-avatar>
<img [src]="image">
</ion-avatar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main ></ion-router-outlet>
</ion-app>
i've tried to use the attribute "style:background-color:#000000" etc to change the style and it works if i put it on every element , but i would like to know if there is some easier and efficient way to customize the sidemenu.
Thank you team!
The first thing you need to know is in ionic '<ion-content>', '<ion-list>' is directives. You can manipulate these directive's template design using css.
for Eg.
In HTML-
<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</div>
In Your Application's Global css file which is app.scss
.side-nav-menu{
//add style if you want any...for eg border, shadow.etc
}
.side-nav-menu .ion-item{
//style for ion-item
}
NOTE:- Remember the directives(attributes) name is also the class name of the same directive. for eg. if the directive name is ion-item and you want to add custom css to this directive than you have to add css using .ion-item class in global scss file
<ion-content class="abc">
</ion-content>
use content class to change background this way
.abc {
--background: var(--ion-background-color,linear-gradient(to left,#E67D22, #1C4577)) !important;
}
or use only color instead of gradient
.abc {
--background: var(--ion-background-color,red) !important;
}
I am building IONIC app and made a card layout as below.
<ion-content padding>
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="/../../img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-row>
<ion-icon name="thumbs-up"></ion-icon>
</ion-row>
<ion-row>
<ion-icon name="thumbs-down"></ion-icon>
</ion-row>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
The card is splitted into three columns (as expected), how ever I am facing the below issue
The thumbs up and thumbs down icon are displaying but not taking the full available height . instead they are taking a fraction area of the column only. How can I make sure that the two icons take half the width of the Row of that specific column.
Any inputs on how to fix this please.
Okay so this is how you can solve both your problems, here's the code for your page:
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="./assets/img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-icon name="thumbs-up"></ion-icon>
<ion-icon name="thumbs-down"></ion-icon>
</ion-col>
</ion-row>
</ion-card>
And this is the css for your page
.col[col-2] {
display: grid;
ion-icon {
display: flex;
font-size: 2em;
align-self: center;
justify-self: center;
}
}
Let's go through the code:
For the image you'll need to add the path relative to your index.html file, since an Ionic app is simply an SPA (Single Page App) so every page is served as it was part of your index.html. The same works for images rendered though javascript files and CSS.
For your thumbs up buttons you first need to remove the rows from the HTML, they doesn't need to be inside of a row.
Then you can manipulate it with CSS, apply a display: grid to your col element with the col-2 attribute, if you want you can change it to a class or ID and use something like <ion-col col-2 class="thumbs-col">...</ion-col> and change the CSS selector to .thumbs-col instead of .col[col-2].
The display grid is enough to separate into 2 equal rows, but if by any reason it desn't separate this way just add grid-auto-flow: row; to your col selector.
For the icon i added a code so it can center the icon both vertically and horizontally with flexbox. For the size since the icon is not an image, but an SVG, you'll need to manipulate it's size with font-size and not height/width. If you change to a button with an icon, for an example, then you can use height/width.
Hope this helps.
I need to position two checkboxes inline next to each other with their belonging
label on the left of each checkbox.
Here is picture for better understanding: (on picture there is an e-mail checkbox which does not exist in app so just ignore it, there should be only two checkboxes)
Everything I tried so far didn't gave me wanted output so this is a code which I have now in the app.
This is in my form element:
<ion-item>
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls"
[ngModel]="(contact$ | async).receive_calls">
</ion-checkbox>
</ion-item>
<ion-item>
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages"
[ngModel]="(contact$ | async).receive_messages">
</ion-checkbox>
</ion-item>
I won't provide style code because it does not work at the moment.
You can replace the <ion-item>-elements with <div>'s, to get away from the extra styling you get from the <ion-item> elements. Also i wrapped the checkboxes in an outer <div>:
HTML:
<div>
<div float-left class="my-checkbox">
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls">
</ion-checkbox>
</div>
<div float-right class="my-checkbox">
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages">
</ion-checkbox>
</div>
</div>
SCSS:
.my-checkbox {
display: flex;
align-items: center;
}
RESULT:
You can use instead of
<ion-item>
<span>SMS </span>
<ion-checkbox></ion-checkbox>
</ion-item>