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.
Related
We are trying to put checkbox and a button in the same row for our android application. We are using Ionic 4 and Cordova 9 to build the Andriod Application.
so we have used the following code snippet:
<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>
<!-- check box to select user-->
<ion-checkbox color="secondary" [(ngModel)]="test.testId"
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" > </ion-checkbox>
<!-- button to view user-->
<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>
When we click on button then Checkbox click event is being triggered.
Even if we click anywhere in the row in that case Checkbox click event is being called.
Any help would be much appreciated.
Thanks in advance.
I inspected the ion-checkbox element and result that is a bug, or precisely an error of implementation by ionic, ionic bug report.
In short, inside ion-checkbox there is a button that trigger the event click, but the button have css properties to take all width and height of ion-item, and this button is inside of "shadow DOM", so is difficult override its properties.
But if you need a fix temporally.
I saw that this button inside ion-checkbox have a z-index: 2 property, so give a z-index: 3 to ion-label, and with this the space of button not will trigger, but the space of checkbox still work.
add on your .scss of your page
ion-label{
z-index: 3;
}
Also, a recommendation is to disable to effect when click the space of ion-item, that will improve the UX, because show that effect when click on white space and don't trigger an action is bad.
EDIT
My versions of the framework.
I hope I've helped :)
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?
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.
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>
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.