web-dev-qa-db-ja.com

ブートストラップポップオーバーの幅を変更する

Bootstrap 3を使用してページをデザインしています。入力要素にplacement: rightを使用してポップオーバーを使用しようとしています。新しいBootstrapにより、form-controlを使用する場合、基本的に全幅の入力要素があることが保証されます。

HTMLコードは次のようになります。

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Popoverの幅は、divに残っている幅ではないので、私の意見では小さすぎます。左側に入力フォーム、右側に広いポップオーバーが必要です。

主に、Bootstrapをオーバーライドする必要がないソリューションを探しています。

添付のJsFiddle。 2番目の入力オプションjsfiddleをあまり使ったことがないのでわかりませんが、出力ボックスのサイズを大きくして結果を確認してください。小さい画面では表示されないこともあります。 http://jsfiddle.net/Rqx8T/

csstwitter-bootstraptwitter-bootstrap-3popover
173
mayankbatra
<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

基本的に、ポップオーバーコードを入力divではなく行divに入れます。問題を解決しました。

6
mayankbatra

CSSで幅を広げる

CSSを使ってポップオーバーの幅を広げることができます。

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

これでうまくいかない場合は、おそらく以下の解決策を望み、container要素を変更します。 （ JSFiddleを表示します ）

Twitterのブートストラップコンテナ

それでもうまくいかない場合は、おそらくコンテナを指定する必要があります。

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

より多くの情報

Twitter Bootstrap popover increase width

ポップオーバーは、それがトリガーされる要素内に含まれています。それを「全幅」に拡張するには、コンテナーを指定します。

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSフィドル

試してみるにはJSFiddleを見てください。

JSFiddle：http://jsfiddle.net/xp1369g4/

321
Anil

私はまた検索テキストフィールドのためのより広いポップオーバーが必要でした。私はこのJavascriptソリューションを思いついた（ここで コーヒー ）：

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

回避策は最後の行にあります。ポップオーバーが表示される前に、max-widthオプションはカスタム値に設定されています。 tip要素にカスタムクラスを追加することもできます。

37
2called-chaos

私は同じ問題を抱えていました。かなりの時間をかけて答えを探して、私自身の解決策を見つけました。頭に以下のテキストを追加してください：

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>
30
Aleksey Shafransky

幅を変えるにはcssを使います。

固定サイズの場合

.popover{
    width:200px;
    height:250px;    
}

最大幅を希望する場合：

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle： http://jsfiddle.net/Rqx8T/2/

27
Pimento Web

ポップオーバーの幅を変更するには、テンプレートを上書きします。

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})
18
tyczo

@EMLがモーダルウィンドウでのポップオーバーと@ 2called-chaosによって示されたコードに関して上記で説明したことを利用して、これが私が問題を解決した方法です。

クリックするとポップアップ表示されるはずのアイコンがモーダルにあります

私のHTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

私の台本

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
6
ajitweb

ここで最終的な解決策はありません：/この問題を「きれいに」解決する方法をいくつか考えてみてください...

オリジナルのJSFiddleの更新バージョン（jQuery 1.11 + Bootstrap 3.1.1 + class = "col-md-"の代わりにclass = "col-xs-"）： http://jsfiddle.net/ tkrotoff/N99h7 /

これであなたの 提案された解決策と同じJSFiddle ： http://jsfiddle.net/tkrotoff/N99h7/8/
うまくいきません。ポップオーバーは<div class="col-*">に対して相対的に配置されています。同じ<div class="col-*">..に対して複数の入力があると想像してください。

それで、もし私達が入力にポップオーバーを保ちたいのなら（意味的にもっと良い）：

  • .popover { position: fixed; }：しかし、ページをスクロールするたびにポップオーバーはスクロールに追従しません
  • .popover { width: 100%; }：親の幅にまだ依存しているのでそれほど良くありません（例：<div class="col-*">）
  • .popover-content { white-space: nowrap; }：ポップオーバー内のテキストがmax-widthより短い場合にのみ有効です

参照 http://jsfiddle.net/tkrotoff/N99h7/11/

たぶん、ごく最近のブラウザを使って、 新しいCSSの幅の値 で問題を解決できるかもしれませんが、私は試しませんでした。

4
tanguy_k

container: 'body'は、通常はうまくいきますが（上のJustAnilの答えを参照）、ポップオーバーがモーダルになっていると問題があります。 z-indexは、ポップオーバーがbodyにアタッチされたときに、の後ろにmodalを配置します。これは BS2 issue 5014 に関連しているようですが、私は3.1.1でそれを得ています。あなたはcontainerのbodyを使うことを意図していません、しかしあなたがコードを修正するならば

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

それであなたはz-index問題を解決します、しかしpopover幅はまだ間違っています。

私が見つけることができる唯一の修正はcontainer: 'body'を使用してそしていくつかの追加のcssを追加することです：

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

CSSソリューションだけではうまくいかないことに注意してください。

4
EML

Popover内で属性data-container = "body"を使用できます。

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>
4
Nayan Hodar

JavaScriptソリューションを好む人々のために。 Bootstrap 4でtip（）がgetTipElement（）になり、no jQueryオブジェクトを返します。そのため、Bootstrap 4でポップオーバーの幅を変更するには、次のようにします。

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
3
Dirceu

これは、ホバーでそれを行うための非コーヒースクリプトの方法です。

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});
3
Abram

ポップオーバーの幅は上で示した方法で調整できますが、行うべき最善の方法は、Bootstrapが表示する前にコンテンツの幅を定義してその計算を行うことです。たとえば、私はテーブルを持っていて、幅を定義してからブートストラップでポップオーバーを作りました。 （時々Bootstrapは幅を決定するのに苦労しています、そしてあなたは手を入れてその手を握る必要があります）

2
CloudMagick
 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

Divの "popover-content"の幅を必要な数に設定することになります。 （他のIDやクラスは動作しません.....）頑張ってください！

  #popover-content{
      width: 600px;

  }
2
CincyBella

私はこれを使用しました（うまく動作します）：

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-Word;
}
2
Bimal Das

仕事をするべきdata-container = "body"を追加することもできます。

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>
1
treize

Bootstrap 4 Betaのテスト済みソリューションの1つ。

.popover {
        min-width: 30em !important;
    }

JQueryステートメントと一緒に：

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

サイドノート、HTMLのdata-container="body"またはcontainer: "body"、あるいはpopover({})オブジェクトへのoptionは、実際にはうまくいきませんでした。

また、Bootstrap 4ベータ版は、ポップオーバーとツールチップの配置を popper.js に依存していたことを覚えておいてください（以前はtether.jsでした）。

0
vzR

TypeScriptコンポーネントの場合

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :Host >>> .popover {
          max-width: 100%;
        }
    `]
})
0
Joshua