2

I am triyng to push down the ion-popover but i can`t. i tried a lot of things in the css class but nothing is working. and i find out that there is a div inside de ion-popover component that set a top position of 169px of the popover, and i think thats the problem.

<div class="popover-content sc-ion-popover-ios" style="top: 169px;left: calc(5px + var(--ion-safe-area-left, 0px));transform-origin: left top;"> 

this is the html of the ion-popover

<ion-content> <ion-header class="ion-no-border"> <ion-toolbar class="ion-no-border"> <h1 class="ion-text-center" style="font-family: Poppins; font-weight: bold;"> <ion-icon slot="icon-only" src="../../../assets/logoBitcoin.svg"></ion-icon> Bitcoin </h1> </ion-toolbar> </ion-header> <div style="width: 100vw; color: white;"></div> <div> <h1>{{user.name}}</h1> <h2> ${{user.btcBalanceUsd}}</h2> </div> </ion-content> 

this is the class of the popover in global.scss

.criptoTransfer{ .popover-content { width: 100vw; height: 50vh; } } 

this is how i want it to look i`m using ionic 5 and angular 9.1

1 Answer 1

1

I used something like below for styling popover in my global.css :

ion-popover { ion-backdrop { opacity: 0.5 !important; } .popover-wrapper { .popover-content { width:80vw; max-width:600px; } } } 
Sign up to request clarification or add additional context in comments.

1 Comment

yes i used that but not working still. i use an ion-modal to fixed the problem

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.