Bottom border/outline disappears ion-button inside ion-card - ionic-framework

Im trying put ion-button inside the card.
But it's bottom border/outline disappears, as shown below.
It comes back when I click the button.
Why is this happening?
the image on top is loading late and causing this how do i wait for the image to load before rendering the page
or occupy the image space for image is loaded

Found a messy fix.
<img src="..." (load)="homeImageLoaded = true"/>
<ion-buttons *ngIf="homeImageLoaded">
<button> </button>
</ion-buttons>

Related

How to show\Hide button according to scrolling in ionic4

I want to use scrollToTop in my ionic project . In my code scrollToTop working but i am want to show button when scroll the content in ionic . How to show sticky button in ionic please help me...
In images my button show at end want to show at middle and show when i am scrolling..
tab1.page.html
<ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">
<button class="scroll" (click)="ScrollToTop()">
<ion-icon name="arrow-dropup-circle"></ion-icon>
</button>
</ion-content>
tab1.page.ts
ScrollToTop(){
this.content.scrollToTop(1500);
}
For the "when I'm scrolling", you can detect if your heart icon is visible in your scroll-able card with something like:
How to Check if element is visible after scrolling?

Creating ionic list with thumbnails, buttons and clickable rows

I am trying to create an ion-list where each row has the following items from left to right
A thumbnail with an image from a URL OR and an ionic with 'clipboard'
A small text string
A tappable button/icon with the iso-information-circle-outline image (will be used to show a popover
A right-arrow at the far side showing that tapping this row will take them user to the next page
Originally I had the ngFor loop producing buttons for each row, and that made the arrow at the end appear, but stopped any buttons inside each row for being tapped correctly.
Other variants have meant the buttons are not aligned with text or if I use an ion-label around {{survey.label}} the button disappears altogether.
<ion-item *ngFor="let survey of surveys" (click)="openSurvey(survey)">
<ion-thumbnail item-start>
<img *ngIf="survey.icon" width="35" src="{{survey.icon}}"/>
<ion-icon *ngIf="!survey.icon" name="clipboard"></ion-icon>
</ion-thumbnail>
{{survey.label}}
<button (click)="showSurveyInfo($event, survey);$event.stopPropagation();" ion-button icon-only clear >
<ion-icon name="ios-information-circle-outline"></ion-icon>
</button>
<button ion-button item-end icon-only clear>
<ion-icon name="ios-arrow-forward"></ion-icon>
</button>
</ion-item>
This is how I'd like to lay it out, all there red parts are just annotations for this question. The Title and I have their vertical enters horizontally aligned. There is a subtitle in the lower half of the row and the lower text stops, preferably with an ellipsis (though probably out of scope for this question) so that the right arrow is always visible. Note too that the circle around the I is complete. In my current mark it is within a button and that clips the top and bottom off the icon.

Ionic full size background

I'm trying to give my app a full-sized background. But I don't really know where to put it because wherever I put the image the navbar hasn't the background.
So I tried to surround my ion-content and my ion-footer with a <div> and hoped to give it the background-class. but in this case nothing I can't see anything on the screen. Right now my background is only inside the ion-content and the footer is still empty. How can I change it?
My code:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
</ion-toolbar>
</ion-footer>
Just like you can see in the docs, you need to add the fullscreen property to the ion-content:
<ion-content fullscreen="true">
<!-- ... -->
</ion-content>
If true, the content will scroll behind the headers and footers. This
effect can easily be seen by setting the toolbar to transparent.

Ionic3 - How do avoid scrolling on a single html item?

I have a simple full screen page that shows a photo and you can enter a caption. The trouble I am having is that when I focus on the input box, the page scrolls and half the image is removed.
<ion-content fullscreen [ngClass]="{'focus': focus, 'focus-out': !focus}" class="focus" [ngStyle]="{'background-image': 'url(' + image + ')'}" no-border>
<div class="gradient"></div>
</ion-content>
<ion-footer>
<ion-toolbar color="transparent">
<ion-grid>
<ion-row>
<ion-col col-10>
<image-caption (caption)="saveCaption($event)" (focusIn)="focus = true" (focusOut)="focus = false"></image-caption>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
I would like the ion-content not to scroll but the text box (inside image-caption component) to appear when focused. I have tried no-scroll and no-bounce in ion-content. I have also tried the native keyboard method to disable scroll this.keyboard.disableScroll(true);
Can I disable scroll on one item? The other solution I see here is to disable scroll and change to position of the input box to show when the keyboard is shown.
Ended up using transform to scale the image but the problem seems to be solved.

Replace back button with menu if no page to go back - Ionic

I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only