How to get ios style for ionic modal - css

im trying to get a modal ios effect but when i use a normal modal i cant get it,
this is the effect with black border in the top
Any ideas how to get this effect with ionic react ?


I found the solution
you need to create this variable
const pageRef = useRef<HTMLElement>(null);
then make the mode propertie in modal = 'ios'
in your curren page put this reference
<IonPage ref={pageRef} >
...
...
Last step is in the modal properties put this
presentingElement={pageRef.current!}
more info here
https://ionicframework.com/docs/api/modal#swipeable-modals

Related

MUI material ui - How to make menu with full width?

I'm trying to make mobile menu with full width
I tried but it looks like I miss understand something my css rules doesn't applied
this is a live code example :
https://stackblitz.com/edit/react-ucvbgt-sur6ne?file=demo.js
thanks...

You should change your Menu to Drawer (with anchor = 'top')
Visit this to learn more : https://mui.com/material-ui/react-drawer/

flatpickr angular 9 calendar alignment problem

I created date component in my angular project. flatpickr is working correctly. Even if I set position as below in the config, when test responsivity of the screen, flatpickr is aligned automatically top of the screen. How can I fix it? How can I align it's position to below of input?

check the dom if the inside flatpikr tag the 2 div are showing or not if not then set alignmemnt to the html element

Creating a Scrolling Nav in Angular 7

I'm trying to build a scrolling navbar in my Angular 7 app.
The functionality should be like this:
When the user clicks on any of the navbar links, the page will scroll smoothly to that section (with that specific ID), and the navbar link should have an active class.
Also when the user scrolls to that section the menu link should also be updated with the active class (based on the OffsetY for example)
something like this:
Scrolling Nav

You could use the scrollTo window function to get the wanted behavior:
scrollTo
About the perfect approach, to get the exact pixels I am not sure.

ripple effect issue with materialize css

I am using materialize-css library in angular. Along with the materialize-css I am using materialize-stepper library that is based on the materialize-css.
MaterializeCSS uses .waves-effect CSS class to provide ripple effect on buttons, a tag and on all other clickables.
materialize-stepper also uses the .waves-effect. When I click on the node with .waves-effect class it appends a div having the ripple effect. Problem is on the next click it adds one new div with ripple effect. So it makes the clickable button or node with dark background (step 2) as this does not remove existing div.
what could be the possible issue?

Conditional Class Attribute

I am busy developing a mobile app in Ionic v4 using Angular as my front end. I am currently using animate.css to animate some of the transitions. I would like one div to fade out and the other fade in once data has been loaded on the backend.
So I have gotten the switching part right, using an *ngIf on each of the div's to check when the data has been pulled through. Using animate.css I can get the second div to fade in by applying animated fadeIn to the class attribute of the div.
So the only part left is to fade out the first div, now I have tried conditionally setting the classes for the div using: [ngClass]="(information != null) ? 'animated fadeOut' : ''" but it would seem to me that this only gets evaluated once when the view renders and never again, unlike *ngIf.
Does anyone know a way I can conditionally apply a class on a div when the evaluated expression is true, that will be checked throughout the lifecycle of the view such as *ngIf?

Resources