web-dev-qa-db-ja.com

UI Bootstrap Popover：幅を変更

UIからポップオーバーを使用しようとしていますBootstrap： http://angular-ui.github.io/bootstrap/#/popover

<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

次のようなポップオーバーが表示されます。

enter image description here

このポップオーバーの幅をどのようにスタイル変更できますか？

angularjsangular-ui-bootstrap
17
dhrm

Popover-contentクラスをオーバーライドすることで実現できます：

.popover-content {
width: 200px;
}

PDATE： Chromeでこれを確認できます。-F12を押します-拡大鏡を選択します-検査する要素をクリックします-スタイルを変更します enter image description here

16
TeoMor

docs から使用できます

popover-class属性-ポップオーバーに適用されるカスタムクラス

<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

スタイルシートで

.increase-popover-width {
   max-width: 400px;
}

widthの代わりにmax-widthを設定する理由は、bootstrapにpopover-max-widthが276px。

github bootstrap code

28
Sudarsan GP

非常に広いポップオーバーがある場合の別の解決策は、ポップオーバーを自動サイズ変更できるようにすることです

このようにCSSを設定するだけです

.popover {
    max-width: 800px; /* optional max width */
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
}
7
Gourneau

私にとっては、以下が働いた

.popover {
    max-width: 450px;
}

これにより、実際にポップオーバーホワイトコンテナーのサイズが変更されました。

5
erdinger

ポップオーバーコンポーネントのpopover-append-to-body属性を試しましたか？

1
nerezo

.popoverをオーバーライドすることにより、幅を簡単に変更できます。

.popover {
    width: 200px;
}
0
Catalin MUNTEANU