I am developing a mobile app that deal with a lot of images. My client want the app main page to have a full screen background image edge to edge. But all I can achieve so far is like the image below:
I just not sure how to get rid of the white gap on top. Here are my code:
home.html:
<!--<ion-header> <ion-navbar>
<ion-title>
Ionic Blank
</ion-title> </ion-navbar> </ion-header>-->
<ion-content> <div class="gmHomeTopScreen">
<p *ngIf="user">
<i>Welcome, {{user}}</i>
<p>
<button class="button button-clear button-positive" (click)="openModal({charNum: 0})">
Gollum
</button> </div> </ion-content>
home.scss:
page-home {
.gmHomeTopScreen{
width: 100%;
height: 100%;
background-color: #999;
}
}
I read the ionicframework docs about content, they did have a instance member called contentTop. But I am not sure how to use it.
How is it possible for me to set every page with the ion-content on top of the page? I know it has to do with app.scss but I am not sure how to do that.
Try adding fullscreen attribute to ion-content
Related
I am trying to create a page with the Ionic Framework and Angular which has a sidebar, and some text content against that sidebar. Right now, the sidebar works well, but when I try to add some text content, the text ends up underneath the sidebar. I am assuming this is because the sidebar is positioned as absolute, and thus is out of the document flow.
Here is my current code:
<div id="sidebar_button_container">
<ion-button href="start-game" color="dark" expand="block">{{ newgame_text }}</ion-button>
<ion-button href="view-previous-games" color="dark" expand="block">{{ viewgames_text }}</ion-button>
</div>
<div id="text_content">
Test. Example Text, This is so that I can read it wherever it is.
</div>
#sidebar_button_container {
text-align: center;
position: absolute;
left: 0;
top: 55px;
bottom: 0;
padding-right: 5px;
padding-left: 5px;
background-color: #dddddd;
}
#media screen and (min-width:400px) {
#sidebar_button_container {
right: 80%;
}
}
#media screen and (max-width:400px) and (orientation:portrait) {
#sidebar_button_container {
right: 50%;
}
}
#media screen and (max-width:600px) and (orientation:landscape) {
#sidebar_button_container {
right: 60%;
}
}
(Btw, the top position of the sidebar is because there is an ion-toolbar at the top of the page, and the media checks are only tested on my phone and laptop, and are included here only for a more complete picture of my code.)
In this picture, you can see that the text in the text_content div is hidden behind the sidebar. I would like to know how I could position the text against the sidebar instead of behind it, while keeping the sidebar intact, and preferably without hardcoding a lot of values in when I want to add paragraphs or line breaks.
You can try a number of things.
The first one that comes to mind for me at-least is to add a CSS padding-left property to "text_content". Short term I don't think this is the best solution, given you will likely have various screen dimensions, and on smaller screens the padding might push the text too much to the right.
The Second idea that comes to mind would be to create a parent/container div. (as shown below) and try adding some flex-box to the "container" CSS class using the following resource (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
<div id='container'>
<div id="sidebar_button_container">
<ion-button href="start-game" color="dark" expand="block">{{ newgame_text
}}</ion-button>
<ion-button href="view-previous-games" color="dark" expand="block">{{
viewgames_text }}</ion-button>
</div>
<div id="text_content">
Test. Example Text, This is so that I can read it wherever it is.
</div>
</div>
The last potential idea/solution I have would be to make the "text_content' relative to the parent. You can find an example of how to do that here (Position absolute but relative to parent).
I hope this helps you find the solution, this is one of my first Stack Overflow contributions, so apologies for not being able to provide an immediate answer. (If you have a public repository you are willing to share, I could clone down your project, and do some more tinkering myself). Cheers.
You should have a look at ionic grid
You can write something like
<ion-grid>
<ion-row>
<ion-col size="2">
<ion-button
href="start-game"
color="dark"
expand="block"
>{{ newgame_text }}</ion-button>
<ion-button
href="view-previous-games"
color="dark"
expand="block"
>{{ viewgames_text }}</ion-button>
</ion-col>
<ion-col>
Test. Example Text, This is so that I can read it wherever it is.
</ion-col>
</ion-row>
</ion-grid>
I'm trying to change the ion-icon title that appears on mouse-hover. Example:
I've tried for at least a couple of hours to find a solution for this. I just don't know how i can access the title element of ion-icon via css to be able to change the content of it to 'Edit' instead of 'Create'. Any help would be appreciated.
You may try disabling ion-icon popup using CSS event blocking and set "title" property on to a parent element.
CSS
ion-icon {
pointer-events: none;
}
Or you can create Icon element using the below code as a workaround and set it on a button.
const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;
Details here - https://github.com/palantir/blueprint/issues/2321
disable events:
ion-icon {
pointer-events: none;
}
and wrap icon with span tag using title attribute:
<span title="Edit" style="font-size: x-large;">
<ion-icon name="create"></ion-icon>
</span>
Ionic 5 - Just wrap it in a div like below:
<div (click)="presentActionsPopover($event, obj)" slot="end" title="Actions" size="small">
<ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon>
</div>
Try the below:
<ion-button title="Create Project">
<ion-icon name="create"></ion-icon>
</ion-button>
I use Ionic 3.
How to make my button change the image of my background by clicking?
This is my button.
<button id="transparent" ion-button round color="light"> </button>
And this is the background that is already installed on my page.
#back {
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 105vw;
height: 100vh;
margin-left: -10%;
background-attachment: fixed;
margin-top: -10%;
background-position: center center;
}
.ion-content {
background: url('myurl');
}
<div id="back" class="ion-content"> </div>
Use [style.background]:
(I created demo:https://stackblitz.com/edit/ionic-mgbhjq?file=pages%2Fhome%2Fhome.html)
<div id="back" class="ion-content" [style.background]="'url('+image+')'"></div>
<button id="transparent" ion-button round color="light" (click)="changeImage()"> </button>
TS(component)
image:any;
ngOnInit(){
this.image ="your first url";
}
changeImage(){
this.image="your second url";
}
TO your comment:
integrate an id for my second background
use attr.id:
<div attr.id="idParam" class="ion-content" [style.background]="'url('+image+')'"></div>
TS(component)
image:any;
idParam:string="back";
ngOnInit(){
this.image ="your first url";
}
changeImage(){
this.image="your second url";
this.idParam="secondBack";
}
Ionic uses Angular under the hood. So best way to handle the event is in controller of your view. So in your 'YourController.ts' file you need to write handler method like this:
changeBackground() {
this.image = '<url_of_new_image>';
}
Then you can use this event in your button like this:
<button id="transparent" ion-button round color="light" (click)="changeBackground()"> </button>
Above is simple angular way of binding event to handler method. Now we can use Angular attribute binding to bind style attribute to 'image' property like this:
<div id="back" class="ion-content" [style.background]="'url('+image+')'"></div>
So basically when user will click your button then following things will happen:
changeBackground() method of YourController.ts will be called.
Here we are setting property image to new value.
So DOM manipulation of Angular will change div background to this new value.
New image replaces existing image.
To all those who are still wondering why Angular is being used here can watch this:
Ionic Intro and Crash course
index behind other div
I drawed a red ligne where the index were
so i have a div which is fixed, but with my ion-refresher,
the fixed div seem to go in absolute when i pull to refresh, i don't know how to fix this.
here my code
.alphabetItem {
color: #ffffff;
font-size: 10px;
position: fixed;
z-index: 99999999;
right: -4%;
top : 200px;
}
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Tirer pour rafraîchir" refreshingSpinner="circles" refreshingText="Relâcher pour rafraîchir ...">
</ion-refresher-content>
</ion-refresher>
<ion-col col-1 class="alphabetItem" scrollY="true" style="width:100%; height:100%">
<div class="divLetter" *ngFor="let letter of alphabets" (click)="alphaScrollGoToList(letter)">
{{letter}}
</div>
</ion-col>
Try to use ion-toolbar component from Ionic Framework (https://ionicframework.com/docs/api/components/toolbar/Toolbar/).
<ion-header>
<ion-toolbar>
<!-- your fixed col -->
</ion-toolbar>
</ion-header>
<ion-content>
...
<!-- your content + refresher -->
...
</ion-content>
The ion-refresher is a really special component. No matter where you place it, it will be put at the top of the nearest ion-content. When you refresh, it will move down your scroll-content, where your fixed container is placed in. <ion-toolbar> should fix this problem.
When creating a button on the ionic creator(v3) I can create a button like this
But when I export the template it renders like so:
Here is my HTML:
<button ion-button icon-end block color="energized">
<span>Edit</span>
<ion-icon name="create"></ion-icon>
</button>
How do I correctly align the button and icon so that the icon is positioned at the end and the button text is centered. Is there a built in way I can do this using ionic directives? Or do I have to create custom CSS to achieve this?
From css, you can add
button ion-icon {
position: absolute;
right: 20px;
}
Selector can be button[icon-end][block] ion-icon{...}