CODEWITHSUNDEEP
cssangularionic-frameworkfrontendpopover
MiguelEsc
MiguelEsc

Reputation: 21

how to overwrite an ion-popover element.style css

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

Upvotes: 2

Views: 1704

Answers (1)

Nicho
Nicho

Reputation: 606

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;
            }
        }
    }

Upvotes: 1

Related Questions