The default height of my ion-row is too much. See screenshot. It only contains an icon. I would like to restrict it to the minimum width possible. How? I tried it with no-margin but didn't work.
Below is the code
<ion-grid *ngIf="!drawerIsIdle()" class="ion-no-margin">
<ion-row class="ion-no-margin">
<ion-col size='5' class="ion-no-margin"></ion-col>
<ion-col size='2' class="ion-no-margin">
<ion-button fill="clear" size="small" (click)="hideDrawer()">
<ion-icon name="remove-outline"></ion-icon>
</ion-button>
</ion-col>
<ion-col size='5' class="ion-no-margin"></ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngIf="drawerIsIdle()">
<ion-row>
<ion-col size="4" text-center><ion-button color="10-session" fill="clear" size="small">Hi</ion-button></ion-col>
You also need to remove some padding using class="ion-no-padding".
Inspect your(s) element(s) in the browser to check padding.
Chrome(in example)
Related
I'm not very familiar with Angular. I would like to have a grid like this:
i.e. have one image per row alternating with two images.I tried with this code but I get a slightly different grid (I also get the same image twice because I don't know how to increase the index inside the loop):
.html:
<ion-content>
<ion-grid class="design">
<ion-row size="12" *ngFor="let t of types ; let i=index">
<ion-col *ngIf="i%3==0" size="12">
<img oncontextmenu="return false;" src={{t?.img}} class="center" />
</ion-col>
<ion-col *ngIf="i%3!=0" size="6">
<img oncontextmenu="return false;" src={{t?.img}} class="center" />
</ion-col>
<ion-col *ngIf="i%3!=0" size="6">
<img oncontextmenu="return false;" src={{types[i+1]?.img}} class="center"/>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
.scss:
.design {
position: center;
width: 90%;
height: 90%;
margin-left: auto;
margin-right: auto;
}
.center {
display: block;
width: 100%;
}
How could I modify it ?
You need to wrap rows in ion-row element and everything in the ion-grid, then you can use ion-col for each column. Here is the simple example of full-width element and 2-column row: https://stackblitz.com/edit/ionic-yxpfht?file=pages%2Fhome%2Fhome.ts
You may also refer to the official docs since there is a nice example as well of how to use grid. Additionally, you may want to manipulate spacing/gutter, which is explained in the docs.
And if you have your images in array, like this `['img1', 'img2', 'img3'] you may want to check if you have 3 to display them 2 + 1 (2 in the first row and 1 in the second), so then you can just use something like on the stackblitz example.
I am having trouble positioning this picker at the top of the screen. I have tried overriding many css properties with no success.
I am unable to override the required classes. .sc-ion-picker-md-h
<ion-header>
<ion-toolbar color="custom">
<ion-buttons slot="start">
<ion-menu-toggle><ion-icon name="menu-outline" style="font-size: 30px; color: white !important;"></ion-icon>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Notification Time</ion-label>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z" style="height: 100% !important;"></ion-datetime>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
I managed to get it on top by putting this in the theme/variables.css file:
/** Ionic CSS Variables **/
.picker-wrapper.sc-ion-picker-md {
bottom: auto;
top: 0;
}
(I tested using React, but I guess this should work the same way using Angular or pure js)
I have tabs page app. I have a background image like so. How can I have transparent tabs as shown below?
home.html
<ion-content class="content" fullscreen>
<ion-grid>
<ion-row class="ion-margin-top row1">
<ion-col size="12" class="ion-text-center">
</ion-col>
</ion-row>
<ion-row class="ion-margin-top row2">
<ion-col size="6" *ngFor="let b of buttons;" class="padding">
<app-home-root [data]="b"></app-home-root>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home.scss
ion-content {
--background: url('/assets/img/stella/background/background.png') no-repeat 100% 100%;
}
tabs.page.html
<ion-tabs>
<ion-tab-bar class="tab" slot="bottom" translucent="true">
<ion-tab-button (click)="profileAction()">
<ion-img [src]="myProfileSrc"></ion-img>
<ion-label>
My Profile
</ion-label>
</ion-tab-button>
<ion-tab-button (click)="openBooking()">
<ion-img [src]="bookNowSrc"></ion-img>
<ion-label>Book Now</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This is what I have now with translucent="true"
Ion-content doesn't continue under the tabs (this can be seen when you inspect it when you run it in a browser), so making the tabs transparent would only show you the background color of the app. I don't know if it is possible to even make it transparent, but because it makes no difference you could always just apply a background color to ion-tabs (the same color as your ion-content is).
Edit:
And if you want to remove the border too, this should be enough:
ion-tab-bar {
--background: #FFF;
border-style: none;
}
If you still see a border you can always add border: 0;.
I designed table by using "ion-grid" but my problem in case to make it clickable like button. I could only call function by using (click)="functionX().
for example this is my grid,
<ion-grid style="padding:0px;" (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</ion-grid>
<ion-grid style="padding:0px;" (click)="function2()">
<ion-row>
<ion-col col-6>
Text3<br>Text3<br>Text3
</ion-col>
<ion-col col-6>
Text4<br>Text4<br>Text4
</ion-col>
</ion-row>
</ion-grid>
I want to make each grid clickable like button (if possible) without change the design of grids
I had a problem like this one, but i wanted inside one of the col. The solution I found was to place a button tag inside the row, for your problem it should be something like this:
HTML
<ion-grid style="padding:0px;">
<button id='hidden-button' ion-button (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</button>
</ion-grid>
CSS
#hidden-button{
height: 100%;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
Using the <button> tag styles its contents according to the ionic button style. One of these effects is the onTouch animation (ripple effect) I think the OP is after.
You can also achieve this ripple effect by using ionic's <ion-ripple-effect> within any tag, as long as you assign the class ion-activatable to the parent element, like so:
<div class="ion-activatable">
<ion-ripple-effect></ion-ripple-effect>
Button Text
<div>
Documentation for ionic-ripple-effect
I have the following. As you can see, I have a row with two columns. I set the first column to a width of 90%, and the second column to a width of 10%. But as you can see, the columns are the same length.
I have the following css:
.message-footer-col {
width: 90%;
}
.message-footer-button-col {
width: 10%;
}
If anyone can advise how I can adjust each columns width, I would appreciate it. Thanks
UPDATE
I am using an Ionic2 framework that generates the raw html. Here is my code:
<ion-footer class="message-footer">
<form #f="ngForm">
<ion-grid class="message-footer-grid">
<ion-row class="message-footer-row">
<ion-col class="message-footer-col">
<ion-input class="message-footer-input" [(ngModel)]="message" name="messageText" required placeholder="message..."></ion-input>
</ion-col>
<ion-col class="message-footer-button-col">
<button class="message-footer-button" (click)="messageSend(f.value, f.valid)" full [disabled]="f.valid === false"><ion-icon class="message-send" name="send"></ion-icon></button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-footer>
First remove col class as it has some flex properties,
then apply display:block; to the columns.