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{...}
Related
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've designed a mobile video chat website UI in Sketch and used a plugin to convert the design into HTML and CSS. I need to turn what are now button images into actual buttons. Here is what the code looks like
I need to make this image with text into a button
</div>
<div class="startbutton">
<img anima-src="./img/iphone---during-chat-btn 1#2x.png" class="btn-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<div class="start">
START
</div>
<button> click me! </button>
.button {
background-image: url ('/image/img1.jpeg') no-repeat;`enter code here`
cursor:pointer;
}
Here you can add the image background to a button which full the button background with an image.
Wrap it in a button tag. Or, make it look like a button with padding and border.
I want to separate my <ion-checkbox> from <ion-label>. So the main issue is that I have to display additional informations if you click on the label, but you should not activate the checkbox. The checkbox should only be activated, if clicked on the "checkbox icon/checkbox square".
<div>
<ion-list>
<ion-item *ngFor="let list of list">
<ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
<ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
</ion-item></ion-list>
</div>
Can someone help me?
This does not work with Ionic 4 because Shadow Dom creates a button element that overlays the label element and captures the click events.
A workaround for Ionic 4 is to wrap the ion-checkbox with a span, and make it relative.
This way, the button in the Shadow Dom will fit only this new span, keeping the label free to asign a custom click event.
<span class="checkbox-container">
<ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>
.checkbox-container {
position: relative;
}
For ionic-4, give the property "position:relative" to ion-checkbox. It works !
ion-checkbox {
position:relative;
}
You can try to add this piece of code to your CSS. It will hide the overlay which wraps both your checkbox and your label.
ion-checkbox .item-cover{
display:none;
}
This did the trick for me:
ion-checkbox {
.item-cover {
width: 70px;
}
}
For ionic 4 there is a workaround by using the start slot of ion-item as laid out here.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
With lines="full" the bottom border is fixed.
For whoever gets here via Google like me, using Ionic 6 (2022) - I resolved this issue giving the label a z-index:3.
This also works for an ion-button slotted at end.
<ion-item>
<ion-label>Select/unselect all</ion-label>
<ion-checkbox slot="start" (ionChange)="selectAllFarmers($event)"></ion-checkbox>
<ion-button style="z-index:3" slot="end" (click)="exportSelectedFarmers(remoteFarmers)">Export selected</ion-button>
<ion-button style="z-index:3" slot="end" (click)="finaliseSelected()">Finalise farmers</ion-button>
</ion-item>
Credits: https://rubberchickin.com/how-to-fix-ion-checkbox-stealing-clicks-on-ion-item-elements/
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
I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...
This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.
<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</button>
Clicking in the green or orange area works fine.
The image on the right, clicking on the element in blue, doesn't trigger the click.
I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)
try with this:
<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</a>
I've managed to get it working using z-index.
The icon and the span needed to have the position set for the z-index to have any effect.
I added the following to my .scss file.
.awesome {
.icon {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.
For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:
<button class="btn btn-default btn-xs" ng-click="myFunction()">
<span class="glyphicon glyphicon-th-list">
</span></button>
Hope this helps.