How to use the entire screen length for ionic elements?

Ionic Framework ionic-v3
1

Hi,

Majority of view layer content in my app is in ion-content.
However, I notice that there are small blank space in the left and right. Is it possible to let the element to use the screen more efficiently, i.e. extends to the entire screen width?

Illustration as below:
| |<------ my content ----> | |
|<–device screen length---->|

Thanks,
D

2

Yup very much! You are looking for the no-padding attribute, use it like this <ion-content no-padding>

There are some element specific attributes too, for example, you can use the full attribute in a button like this:

<button ion-button full>Full Button</button>

Basically, for these kinds of things you should learn about the CSS Utilities.

3

Thank you KishuPro :), exactly what I am after!

1 Like