web-dev-qa-db-ja.com

Ionicポップオーバー：ポップオーバーの高さがコンテンツに適合しません

ionic-popover の高さを彼のコンテンツに合わせて調整したいと思います。このポップオーバーを使用して、いくつかの情報を表示します。これらには、ion-headerとion-contentが含まれているだけです。

<ion-popover-view>
    <ion-header-bar>
        <h1 class="title">Title</h1>
    </ion-header-bar>
    <ion-content scroll="false" class="padding">
        I want the parent's height to fit the content's height
    </ion-content>
</ion-popover-view>

しかし、ポップオーバーは私が表示したいいくつかのテキストには大きすぎます：

Ionic popover: too many blank

height: auto;でion-popover-viewの高さを設定しようとしましたが、この場合はヘッダーバーのみが表示されます。固定の高さを設定する（height: 100px;）は機能していますが（説明されているように ここ ）、コンテンツの長さに応じて動的な高さが必要です。

CodePenの例

cssionic-frameworkionicpopoverionic-popover
11
Getz

ポップオーバーが非常に大きい理由は、Ionic CSSファイルが（他のプロパティの中でも）以下を定義しているためです。

.popover {
   height: 280px;
}

それは、両方の<ion-header-bar>および<ion-content>は絶対的に配置された要素です。つまり、独自の動的な高さが必要な場合は、これらの要素のデフォルトスタイルをハックするか、独自のポップオーバーを最初から設計する必要があります。

デフォルトの変更は非常に簡単です。

.popover {
    height: auto !important;
}
.popover ion-header-bar {
    position: relative;
}
.popover ion-content {
    top: 0;
    position: relative;
}

できれば、デフォルトの代わりに独自のクラスを使用して値をオーバーライドし、他のことを台無しにしないようにしてください。しかし、これはあなたに良いスタートを与えるはずです。そこからパディングなどを追加できます。

Working CodePen

27
JoeLinux

以前の回答に加えて、次のスタイルも使用することを検討してください

.platform-ios  {
  .popover-arrow {
    right: 0px;
  }
  div.list {
    a.item:first-child{
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    a.item:last-child{
      border-bottom-left-radius: 10px;
      border-bottom-right-radius:10px;
    }
  }
}
0
Víctor Hugo