In my application I've got an ItemReorder as described in the docs:
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
It works as intended, I can drag the ion-items by pointing at the reoder icon (see freehand circle):
Testing with potential users on a tablet I found out, many users don't see the icon at first and/or try to drag the ion-item without pointing at the icon. They expect the whole ion-item to be draggable:
How can I implement this? Any insight is appreciated!
I've already checked the docs twice, googled and found this unanswered question on the ionic forum and this plugin for Ionic v1. I also scanned the code on Github without success.
The ideea of this css solution is to have the reorder icon invisible above the zone which you want to reorder. I have changed the icons to be on the right side <ion-list side="start" and I have changed the css like this
Now for me it's working.
ion-reorder{
position: absolute;
width: 22%;
max-width: 100%;
opacity: 0;
}
The cons is that there is no more visible reorder icons.
Related
I am experiencing the following when having an ion-list within an ion-content:
At first I thought that the ion-refresh was causing this bug, but now that I removed it, it is still there.
So I have an ion-content and in there an ion-list. If I now go to the top of the page and i scroll the content a bit down, i can no longer scroll the ion-list, it even seemed to be cut off.
This happens on iOS - anybody any idea?
Theres not really code to show or any styles, as there are none.
<ion-content>
<ion-list>
</ion-list>
</ion-content
When upgraded to Ionic 5, the padding attribute is not working anymore as in Ionic 4:
<ion-content color="primary" padding></ion-content>
Any fixes?
Story in Ionic v4:
Use of attributes got deprecated in Ionic v4 and if you would have noticed in developers console, Ionic 4 was throwing warnings of using these attributes to style.
Story in Ionic v5:
In Ionic v5, these attributes got removed permanently and got replaced with CSS classes. So even if those attributes there in your code, no effect will be there.
As per the Breaking Changes https://github.com/ionic-team/ionic/blob/v5.0.0/BREAKING.md#css:
We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with ion avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes
Solution:
You need to replace all your attributes to CSS classes. For example:
Before
<ion-header text-center></ion-header>
<ion-content padding></ion-content>
After
<ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>
For your case, replace
<ion-content color="primary" padding></ion-content>
to
<ion-content color="primary" class="ion-padding"></ion-content>
Try this,
<ion-content color="primary" class="ion-padding"></ion-content>
According to the official documentation, you can use these CSS custom properties to set padding of ion-content component:
--padding-bottom Bottom padding of the content
--padding-end Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
--padding-start Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
--padding-top Top padding of the content
In the SCSS file associated with your component, add:
ion-content {
--padding-bottom: 10px;
--padding-end: 10px;
--padding-start: 20px;
--padding-top: 20px;
}
This should add padding inside the content area.
ion-item {
--padding-start: 10px;
--padding-end: 10px;
--padding-top: 0px;
--padding-bottom: 0px;
--inner-padding-top: 0px;
--inner-padding-bottom: 0px;
--inner-padding-start: 0px;
--inner-padding-end: 0px;
--border-width: 0;
--inner-border-width: 0;
--border-color: transparent;
}
ion-header {
--min-height: auto;
}
In ionic 4 and Ionic 5 the use of padding like this:
<ion-content color="primary" class="ion-padding"></ion-content>
and see https://ionicframework.com/docs/layout/css-utilities
I have a page that scrolls, and I want to add a fixed div to the bottom of it in ionic2. I use the ion-fixed, and it works great on android devices staying fixed in the bottom of the page, but on iOS upon scrolling the page, it sort of jumps all the time until get the position.
I am sure someone working in ionic has forced the same issue.
I have tried to detect platform and to use a css tweak of
position: sticky;
and it moves smootly, but I am facing another bouncing issue once you are in the end of the page ( the native over-scroll ios behavior, if you continue to scroll the page from the top or the bottom area).
If you want to place a div in the bottom of the page, fixed, the best way to do it in Ionic is to put that div outside of the ion-content:
<ion-header>
<!-- ... -->
</ion-header>
<ion-content>
<!-- ... -->
</ion-content>
<div class="fixed">
<!-- ... -->
</div>
And then use some css style rules to set its position according to your needs:
div.fixed {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
z-index: 999
}
Since it's outside of the content, it will be ignored by Ionic during the scroll event.
Using the following markup:
<ion-list>
<ion-item>
<ion-label></ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label></ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
It adds weird :last-child styling for the borders, which is even found in the documentation:
Notice how the password's border doesn't align like the username field's. Is there a reason for this behavior? Is there a way to change it [easily] without having to go through a ton of styles, i.e. selectors like this:
.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child
I am not sure if it is something they have done intentionally or accidentally, but to overcome this quickly whilst I have a ticket outstanding with them I did the following
I created a new ion item at the bottom of the list to act as the last item, then just set the display none on it.
This fixes the border issue for me as it is then applied to the hidden last ion item.
Ticket - https://ionic.zendesk.com/hc/en-us/requests/5283
I have my simple application using Ionic Framework.
It looks like :
Here the list code :
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap" href="#/bands/{{auth.profile.name}}/{{band.id}}">
My problem is, when I try to scroll the list up and down, it always shows blur on the selected list, and it makes the view when doing scrolls is not smooth enough.
I can solve that blur problem, but I lose the list ng-click and href capabilities, like
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap">
How to resolve that blur problem without losing ng-click and href capabilities, in order to make scrolls are smoother?
Try using ui-sref instead of href. If this doesn't work create an anchor link inside your ion-item and redirect through it. Hopefully this will solve your problem.