Hi using ionic 4 / angular7
I want to inplement pull to refresh and i have done it this way:
<ion-refresher slot="start"
(ionRefresh)="ionRefresh($event)"
(ionPull)="ionPull($event)"
(ionStart)="ionStart($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
and in controller
ionRefresh(event) {
console.log('Pull Event Triggered!');
setTimeout(() => {
console.log('Async operation has ended');
//complete() signify that the refreshing has completed and to close
the refresher
event.target.complete();
}, 2000);
}
ionPull(event){
//Emitted while the user is pulling down the content and exposing the
refresher.
console.log('ionPull Event Triggered!');
}
ionStart(event){
//Emitted when the user begins to start pulling down.
console.log('ionStart Event Triggered!');
}
this works but it shows some weird effects. While pulling down the text pull to refresh hovers over the content also when closing the refresher the text refreshing stays shown for a second or 2. This all makes it look bad. How can i fix this?
I also had to add styles to the refresher otherwise the refresher had a black background with no text showing so i added this:
<style>
ion-content {
background-color: #efefef;
color:#555;
}
ion-refresher {
z-index:1;
}
i have made a gif showing the behavior
i fixed it (thanks Paresh) is was because the background of the content was transparent. also had to set the z-index higher then the refreshher. For some reason no z-index on the refresher did not show text
this is the fix:
<ion-content style="background:#efefef;color:#555;z-index:1;">
<ion-refresher slot="fixed" style=""
(ionRefresh)="ionRefresh($event)"
(ionPull)="ionPull($event)"
(ionStart)="ionStart($event)">
<ion-refresher-content style=""
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<div class="ion-padding" style="background:#fff;z-index:2">
content here
</div>
Related
Antd Button
The following code comes from the antd document
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>,
mountNode,
);
Like the default Button, Dashed Button, when you click, you'll have a highlight and border shadow effect.But I want Button to revert to the default state after clicking, rather than clicking elsewhere before it becomes the default state.
This is what happens when I set up the Uploade's click button, which keeps me clicking (highlighted and bordered) when I upload the file successfully or fails, which makes people look a little unusual.Although this detail is acceptable to most people, it still feels a little strange.
I have thought about using the Dragger component of Upload, which can meet my needs on the display. But I want to automatically hide the upload button when the upload content meets the requirements, and Dragger seems to be unsatisfied. So I chose to use the Upload component. After the condition is met, the content in the Upload is made blank, and the hidden effect is achieved. The above situation will occur in the middle of the Button.
I looked at Button's API
and didn't find an action like reset.
Here is my example code. When you click on the Button component, the highlight will not disappear. When you click on the Button upload component, the highlight will not disappear after uploading the file. After clicking on the Dragger component and uploading the file, the highlighting disappears automatically.
Whether there is a good action to reset the Button style.
If you know thank you for answering.Thank you.
You need to customise ant-btn class like so:
.ant-btn:focus {
color: inherit !important;
border: 1px solid rgb(217, 217, 217);
}
Here is the codepen
In ionic 3 ,Using iPhone when sliding ionic slider the vertical scrolling occur, it causes app ui experience. it’s serious bug I have tried many ideas in googling no one works. please help me any one aware of this issue
We had the same problem with some sliders on our project. The first slide was ok, you could slide left & right without any vertical scroll, however any further slides would scroll the whole page up & down. What fixed it for us was to add the following css:
.swiper-wrapper{
width:auto !important;
}
The .swiper-wrapper was width: 100%, and then being pushed to the left (and off screen) when scrolled. So any further swipes on the slider were outwith the swiper-wrapper thus causing the whole page to move.
i have the solution!
ionSlideDrag Emitted when a slide moves. When the slide moves i call a function which add a class to my content which add
overflow-y: hidden.
ionSlideDidChange Emitted when a slide change ends. it means that when slide change ends i call a function which remove the class and my content is again scrollable.
For add and remove class i have implemented jquery. ( How can I use jQuery with Ionic 2?)
this is an example of my code:
in my view.html
<ion-slides slidesPerView="4" spaceBetween="20" (ionSlideDrag)="dragging()" (ionSlideDidChange)="endDragging()">
<ion-slide *ngFor="let action of actionPages">
<img [src]="url + action.imgSmall">
<h1></h1>
</ion-slide>
</ion-slides>
in my view.ts
dragging(){
$("#contenitore").addClass("no-scroll")
}
endDragging(){
$("#contenitore").removeClass("no-scroll")
}
no-scroll class in app.scss:
.no-scroll {
div.scroll-content {
overflow-y: hidden;
}
}
I have a link button with jQuery mobile.
I want to be able to set it to be constantly pressed or unpressed.
I tried this code for pressed:
$(this).css('background-color', '#e0e0e0');
and this code for unpressed:
$(this).css('background-color', '#f6f6f6');
But when hovering over the unpressed button it does not highlight anymore.
So I tried:
$(this).addClass('ui-button-active');
But the button gets a blue color and I want dark gray color.
Any suggestions?
In jQuery Mobile 1.4.2 CSS you can see that there are button styles for normal/hover/active states (for each theme), and an active style that changes the color of the button (to blue, in your case).
To simulate a "constantly pressed" button you have to add a class for each theme (a and b) based on the button :active class, and override background color:
.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }
Then, in your script, you can toggle the "pressed" state with:
$("#button").toggleClass('button-pressed-a');
Have you been to themeroller? There you can try out different styles.
Adding a Custom Theme
Another good way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).
Otherwise I could recommend you this site
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I have a set of divs that can be scrolled through on my jquery mobile page. Each div has an active class in CSS so they change color when they are tapped. For some reason when I try to scroll through my list the items turn active because I am 'clicking' them.
That isn't too serious and it looks fine, but there's also another glitch. If the page is intertial scrolling, so I just flicked it and it hasn't stopped moving, a tap on the screen will activate the div I pressed when I first scrolled it.
Any idea what is causing this/how to stop it?
You could try the stopPropagation
HTML:
<div id='someID'>
<someElement />
</div>
JS:
$('#someID').click(function(e){
e.stopPropagation(); //stops default behaviour
//check to make active/inactive
if( $('#someID').hasClass('active') ){
$('#someID').removeClass('active');
//do what needs to be done when it becomes activated
} else {
$('#someID').addClass('active');
//do what needs to be done when disabled
}
//do whatever you always want to here
});
Note: whatever requires the click event to work will have to be re-enabled afterwards, though if you use a link/button/etc. within the div that has a click event, it'll still function.
I have buttons in my web app using jQuery Mobile.
When clicked the buttons have the ui-focus class added which displays a blue halo around buttons. The class stays there until another spot on the page is clicked. This happens in firefox, not iPad. I would like that this halo is not displayed.
What must I do for that focus halo not to be displayed at all ?
You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none ;
}
I have found that the best way to do this is to give focus back to the page after your buttons are clicked.
$('yourButtons').click(function(){
//Do some important stuff
// ....
$.mobile.activePage.focus();
});
Well thats easy, just open your xxx-mobile-theme.css file and find the class ui-focus
and remove the box-shadow property manually
None of the solutions worked for me as I had a custom submit button and used data-role="none" on the button. The :focus event still had the blue glow so this worked for me. I wrapped my form in a div called myform.
.myform button:focus {
outline: 0;
}