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.
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.
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)
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 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 am looking to add some labels to an Ionic 2 range element (the documentation for which can be found at http://ionicframework.com/docs/v2/api/components/range/Range/)
You can add a label at the beginning and end using the following markup
<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
<!-- Setting the labels here -->
<ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
I would however like to add some labels throughout the range, on either side if possible in an attempt to make it look more like a progress bar. So you might have labels like 25%, 50% etc ..
What would be a good way to approach this, without interfering too much with the Ionic HTML?
My approach so far is just to create an ion-row above the range, then use css to place it.
HTML
<!-- TIMELINE -->
<div class='timeline'>
<ion-grid class="timeline-grid">
<ion-row class="timeline-labels">
<ion-col width-20>Label One</ion-col>
<ion-col width-20>Label Two</ion-col>
<ion-col width-20>Label Three</ion-col>
<ion-col width-20>Label Four</ion-col>
<ion-col width-20>Label Five</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-range color='secondary' [(ngModel)]="progress">
</ion-range>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
CSS
ion-row.timeline-labels {
padding-left: 20px;
z-index: 1;
position: absolute;
top: 10px;
}
Which does in a way work, however I am thinking there is maybe a better/cleaner way to go about it.
Any advice would be great.
Thanks!
Wouldn't setting the pin="true" (in the range slider tag) basically do what you want?
It would show the current value of the slider like a progress bar would.
If you are looking to achieve more of a specified label at the bottom at specific points I think the best way would be to add a div with spans directly below the range slider and then toy with the CSS till its close enough to what you want.
main css issues will be removing padding or margin space around the Range element, and then getting the font size and spacing of the 'progress' in the right spots.
eg.
<ion-range min="0" max="100" pin="true">
<!-- Setting the labels here -->
<ion-label range-left>0</ion-label>
<ion-label range-right>100</ion-label>
</ion-range>
<div>
<span>20%<span>
<span>40%<span>
<span>80%<span>
<span>100%<span>
</div>
This might be too late but for others looking in the future I put my labels inside of spans within a label below and used css to style the padding and width.
Here is my HTML:
<div class="slide-rating">
<ion-range min="1" max="4" step="1" snaps="true" ticks="false" ></ion-
range>
<ion-label class="rating-labels">
<span> Beginner </span>
<span> Casual </span>
<span> Advanced </span>
<span> Expert </span>
</ion-label>
</div>
And my CSS:
span{
color: #354D37;
font-family: Gotham-Book;
font-size: small;
padding-left: 12px;
}
.slide-rating{
align-items: center;
width: 80%;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating-labels{
margin-left: -5%;
margin-right: -5%;
text-align: center;
}