I need to change my popover width and I’m using the –width property like the doc says.
The problem is that my popover is not centered in the middle of the page.
How is it possible to increase a popover width but having the popover centered? I would like to have the width at 80%/90% of the screen so I want use a modal.
This is my ionic version
"#ionic/core": "^5.3.1",
This is the code of how I call the popover:
async openTicketPopover() {
const popover = await popoverController.create({
component: 'app-tickets-popover',
translucent: true,
});
return await popover.present();
}
And this is the popover structure (it's the same code of the documentation):
<ion-content class="">
<ion-card>
</ion-card>
</ion-content>
When you pass the click event to the popover controller, then the popover will be positioned relative to the clicked element. If you don't pass the click event to the popover controller, then the popover will be absolutely positioned in the center of the viewport. https://ionicframework.com/docs/api/popover#presenting
Important to note that changing the --width property on the fly in Chrome dev tools will have no effect because Ionic sets the width and absolute placement of the popover with JavaScript at the moment the click event happens.
It does sound like a modal might be a better UI component for your use case though. Your call.
Related
Is there an easy way to detect when there is content behind a fixed container that is floating on top of a ScrollView.
In native iOS apps, the background of the TabBar and NavigationBar are only visible when there is actually content behind them. So the NavigationBar will fade in it's background as the user scrolls down.
Whilst this can be calculated to provide the scroll position of when to add opacity to the NavigationBar Background, it is much more complicated with any form of bottom bar as it would have to know the total length of the scroll window as well as calculate the bounce scroll offset at the top.
As much as all this can be calculated in theory, is there an easy way. A way of detecting when there is content behind another element.
You will need to pass a ScrollController to your scroll view and then listen to the scroll value and change the state of the appbar.
Example:
scrollController.addListener(() {
//Check offset value
if(scrollController.offset > 10) {
//Change transparency here
setState(() {
...
});
}
});
Adapting this to your use case it should work
Want to use Modal for the delete confirmation in my CRUD application and need to put the modal window on the center of the bottom.
Looks like Blazored Modal is a good package and it provides TopLeft, TopRight, BottomLeft, BottomRight, Center and Custom.
How to use "Custom" to make my Modal dialog to appear on the center of the top?
I have a modal which should have height based on its content, since content could differ from modal to modal. Modal is shown from bottom of the page and is not full screen.
How can I achieve modal behaviour where modals height is equal to its content. Currently whenever modal is opened I calculate height of modals content and then set modals height to it, but this is very bad IMO since it does this on every modal open. If I set height to something like auto or content-fit it is not shown at all. There must be easier way to do this.
I am trying to have my own left/right nav buttons show for my fancybox. I do not want to use fancybox's nav controls. For some reason, I cannot get my buttons in the content area to show outside the lightbox. Any suggestions?
I have a modal view with a textview and a button. When the keyboard is displayed it covers up some of my UI elements. I'd like my modal to be scrollable so that it can be viewed while the keyboard is displayed. How can I do this?
I've had the same question, and i've played with it a bit,
setting a UIScrollView is not enough, as in the inspector
you should 1st. increase it Hight, then in the attributes, check the following checkboxes:
Scrolling enabled, Bounce Scroll, always bounce vertically.
Edited: Forgot the most inportant thing:
in the size inspector, set the Buttom field (under content) to the size you wish, (960 is twice the regular size)
Use a UIScrollView instead of an ordinary UIView. You can disable scrolling when you don't want the user to be able to with:
[theView setScrollEnabled:NO];