In the app, the buttons under Edit column don't show vertically aligned with the other columns. It is always aligned at bottom which makes the row look bad.
The code is given below:
<ion-row>
<ion-col col-3> {{item.projectname}} </ion-col>
<ion-col col-4> {{item.loginid}} </ion-col>
<ion-col col-3> {{item.password}} </ion-col>
<ion-col col-2>
<button ion-button menuToggle strong *ngIf="buttonclicked"
(click)="editdata(item)"><ion-icon name="menu"></ion-icon>
</button>
</ion-col>
</ion-row>
Please guide in this regard.
Try adding this CSS to your component:
ion-col {
display: flex;
align-content: center;
align-items: center;
}
If i understand correctly this will solve your issue by vertical aligning the text. (since the button is already centered)
P.S You should make a class for this so it does not affect every ion-col in your component!
Related
I have an ionic clickable icon (svg) and I placed it in a button. I set the fill to clear because I only want that the point cursor appears. The icon is in a grid on a cell.
Without the button around it looks correctly like this
With the button around it looks like that
The row is defined in this way. I set no-padding because in the next row I have more icons and the padding should be minimal.
<ion-row no-padding>
<ion-col></ion-col>
<ion-col ion-item no-lines no-padding text-center (click)="cmbAButton.open()">
<ion-button icon-only fill="clear" >
<ion-icon class="big" src="/assets/{{aSelectedIcon}}.svg"></ion-icon>
</ion-button>
</ion-col>
<ion-col></ion-col>
</ion-row>
In scss I have
ion-icon {
&.big {
width: 40px;
height: 40px;
}
I want to center the ionic button inside the column.Please help me in doing this.
<ion-grid>
<ion-row>
<ion-col size="6" ><ion-button >Button 1</ion-button>
</ion-col >
<ion-col size="6" > <ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
Now the button 1 is towards right. and button 2 is towards left
The expected result is button is in center in each column.
The expected output is as follows
..............................................................................
. button1 . button2
. .
. .
. .
. .
.
..............................................................................
When i applied some styles and examined i found it like this
<ion-grid style="background-color:red">
<ion-row style="background-color:blue;">
<ion-col size="6" style="background-color:green;" class="ion-text-center">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
The image to be like this..
Why is the grid not occupying the full browser area.
You can do like this:
Solution-1:
<ion-grid>
<ion-row>
<ion-col size="6" class="button1">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="button2">
<ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
.button1 {
text-align: center;
}
.button2 {
text-align: center;
}
Solution-2:
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
Let me know if it is won't work.
Ionic has a range of helper classes for formatting the content. In your case I think this should work:
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button>Button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
If that doesn't work then I would investigate the flex classes. You can see them all here:
CSS Utilities - Ionic Documentation
Update
Based on your updated feedback it seems the problem is actually with your ion-grid not the buttons or cols. As per the responsive grid documentation:
Grids take up the full width of their container, but adding the fixed attribute will specify the width per screen size.
So changing your ion-grid to:
<ion-grid fixed>
Might improve things but it does not explain why you are experiencing this in the first place.
Please use the devtools and inspect the ion-grid to see what styles are affecting it.
Did you start your project with the standard cli tooling? (If not you might be missing stylesheets) -- from the css utilities docs:
If your app was not started using an available Ionic Framework starter, the stylesheets listed in the optional section of the global stylesheets will need to be included in order for these styles to work.
Did you start the page with a normal layout? I don't see a header so is your page content in an ion-content? Don't know how this will affect things without testing but just trying to get to the bottom of why you are not getting the normal Ionic experience...
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 am using ionic 3.
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-footer>
<ion-title>
{{ title }}
</ion-title>
</ion-footer>
What ever I put in "ion-content" there is no scroll when content overcome height of the screen.
I tried with grid in content:
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-12 class="left-col">
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
</ion-row>
</ion-grid>
Also tried with list:
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
...
</ion-list>
Nothing works. What is the catch here ?
I think this should be handled automatically by Ionic.
To enable vertical scroll to your page or any other container, there is a tag called
<ion-scroll scrollY="true">
// your content here
</ion-scroll>
To enable horizontal scroll, just change scrollY=true to scrollX=true
in your sass file add the following :
ion-scroll {
white-space: nowrap;
height: 500px;
}
The real problem is that ionic global CSS property was overridden in the project.
"scroll-content" class must not be changed in project styles.
You can use 'ion-list' property in CSS and change this:
ion-list
{
overflow-y: scroll;
};
Also, if doesn't change yet, you can put '!important' after, like this:
ion-list
{
overflow-y: scroll !important;
};
My ion-footer display above the ion-content Please take a look at this image.(when i have more item my view appears like this)
i need my actual view like this image .(this is the look i need)
i tried adding ion-navbar inside my ion-footer but still same result.
here is my code:
<ion-footer *ngIf="shopingCart.length > 0">
<ion-toolbar color="favorite">
<ion-row class="footer_color" >
<ion-col width-50>
Total: {{total}}
</ion-col>
<ion-col width-50 (click)="checkoutNav();">
Checkout >
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>