192

मैं बूटस्ट्रैप 3 का उपयोग करके एक पेज डिजाइन कर रहा हूं। मैं placement: rightइनपुट तत्व पर पॉपओवर का उपयोग करने की कोशिश कर रहा हूं । नया बूटस्ट्रैप यह सुनिश्चित करता है कि यदि 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>

आबादी की चौड़ाई बहुत कम है, मेरी राय में क्योंकि उनकी कोई चौड़ाई नहीं है। मुझे बाईं ओर इनपुट फ़ॉर्म चाहिए, और दाईं ओर एक विस्तृत पॉपओवर।

अधिकतर, मैं एक ऐसे समाधान की तलाश में हूं, जहां मुझे बूटस्ट्रैप से आगे निकलने की जरूरत नहीं है।

संलग्न JsFiddle। दूसरा इनपुट विकल्प। Jsfiddle का बहुत अधिक इस्तेमाल नहीं किया है, इसलिए पता नहीं है, लेकिन परिणाम देखने के लिए आउटपुट बॉक्स का आकार बढ़ाने की कोशिश करें, छोटे स्क्रीन पर इसे नहीं देखा जाएगा। http://jsfiddle.net/Rqx8T/

— mayankbatra
स्रोत

343

सीएसएस के साथ चौड़ाई बढ़ाएँ

आप अपनी आबादी की चौड़ाई बढ़ाने के लिए 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 देखें )

ट्विटर बूटस्ट्रैप कंटेनर

यदि वह काम नहीं करता है, तो आपको संभवतः कंटेनर निर्दिष्ट करने की आवश्यकता है:

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

और जानकारी

Twitter बूटस्ट्रैप पॉपओवर चौड़ाई बढ़ाता है

पॉपओवर उस तत्व के भीतर समाहित होता है जिसे वह चालू करता है। इसे "पूर्ण चौड़ाई" विस्तारित करने के लिए - कंटेनर निर्दिष्ट करें:

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

JSFiddle

इसे आज़माने के लिए JSFiddle देखें।

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

— Anil
स्रोत

1

+1, लेकिन अगर आपका पॉप्यूलर मोडल में है तो वह काम करेगा / नहीं कर सकता: नीचे मेरा जवाब देखें।

— ईएमएल

2

ऊपर दिया गया जवाब मेरे लिए TLDR था लेकिन इसमें इस जीनियस स्निपेट को सम्‍मिलित किया गया, जिसने सभी आबादी को सम्‍मिलित करने के लिए चौड़ाई और समस्‍या दोनों को हल किया:$('[data-toggle="popover"]').popover({ container: 'body' });

— ग्रेगोरी कॉस्मो हुन

2

मुझे जोड़ना था!important

— पीटर एर्लिच

आप neater डेटा विशेषता का उपयोग कर सकते हैं: data-container="body"तत्व पर

— स्टीफन

@ surfer190 एक प्रति-जनसंख्या के आधार पर खानेवाला, लेकिन अव्यवस्था यदि आप चाहते हैं कि हर आबादी हो container: "body"।

— क्रिस क्रेफ़िस

39

मुझे खोज पाठ क्षेत्र के लिए एक व्यापक आबादी की भी आवश्यकता थी। मैं इस जावास्क्रिप्ट समाधान के साथ आया था (यहाँ कॉफी में ):

$(".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"))

वर्कअराउंड अंतिम पंक्ति में है। इससे पहले कि पॉपओवर प्रदर्शित किया जा रहा है अधिकतम-विकल्प एक कस्टम मान पर सेट है। आप टिप तत्व में एक कस्टम वर्ग भी जोड़ सकते हैं।

— 2called-अराजकता
स्रोत

28

यदि आप कॉफी-साक्षर नहीं हैं, तो नियमित js के समान ही अंतिम पंक्ति है:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });

— कॉलिन

1

.Tip () क्या है? .Data () का उपयोग क्यों करें? XD मैं वास्तव में यह समझ में नहीं आता है, लेकिन यह काम करता है! मुझे डिफ़ॉल्ट को बदलने के लिए नए सीएसएस लिखने से बेहतर यह समाधान पसंद है max-width। इस समाधान के लिए धन्यवाद! इसके बजाय Btw "600px", मैं इसे करने के लिए सेट करें "none"। यह मेरे लिए बेहतर है।

— तौफीक नूर रहमानंद

36

मुझे भी यही समस्या थी। एक उत्तर की खोज में काफी समय बिताया और मेरा अपना समाधान मिला: निम्नलिखित पाठ को सिर पर जोड़ें:

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

— अलेक्सी शफ्रांसस्की
स्रोत

1

बूटस्ट्रैप डिफ़ॉल्ट सेटिंग को ओवरराइड करने के लिए आपको महत्वपूर्ण जोड़ने की आवश्यकता हो सकती है।

— जॉन क्रेमर

29

चौड़ाई बदलने के लिए आप सीएसएस का उपयोग कर सकते हैं

निश्चित आकार के लिए

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

अधिकतम चौड़ाई के लिए:

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

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

— बेनार्ड पैट्रिक
स्रोत

2

यह सबसे पहले साइट पर आबादी की चौड़ाई को बदल देगा। लेकिन एक जवाब मिला। सही ढंग से एक वर्कअराउंड, अब इसे पोस्ट करना।

— मयंकबतरा

@Peter, मैं आपके मुद्दे को पुन: पेश नहीं कर सकता, मुझे लगता है कि आप सिर्फ अपने इनपुट में डेटा-प्लेसमेंट जोड़ना भूल गए ...

— बेनार्ड पैट्रिक

@ पेन्बर्ड मुझे एक ही समस्या हो रही है, आपका समाधान 276px की तुलना में अधिकतम-चौड़ाई कम करने के लिए काम करता है। लेकिन अगर आप अधिकतम-चौड़ाई को बदलने की कोशिश करेंगे तो इससे ज्यादा नहीं बदलेगी।

— हार्दिक पटेल

18

पॉपओवर चौड़ाई बदलने के लिए आप टेम्पलेट को ओवरराइड कर सकते हैं:

$('#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>'
})

— tyczo
स्रोत

1

मेरे लिए काम नहीं किया .. मुझे max-width: 500pxस्टाइल से भी जोड़ना था ।

— क्रोनफ़ी

7

उन लोगों के लिए जो जावास्क्रिप्ट समाधान पसंद करते हैं। में बूटस्ट्रैप 4 टिप () बन गया getTipElement () और यह एक कोई jQuery वस्तु देता है। तो बूटस्ट्रैप 4 में पॉपओवर की चौड़ाई को बदलने के लिए आप इसका उपयोग कर सकते हैं:

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

— Dirceu
स्रोत

यह मेरे लिए काम कर चुका है, हालांकि केवल तब जब सेटिंग्स widthनहींmax-width

— डीनो

6

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

मूल रूप से मैं इनपुट डिव के बजाय पंक्ति में पॉपओवर कोड डालता हूं। समस्या का हल किया।

— mayankbatra
स्रोत

मेरे लिए काम नहीं किया। मुझे उम्मीद थी कि यह काम करेगा :( विषम

— t.durden

6

इसकी मदद से @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"); });

— ajitweb
स्रोत

4

यहां कोई अंतिम समाधान नहीं: / बस कुछ विचार कैसे "सफाई से" इस समस्या को हल करें ...

आपके मूल JSFiddle के http://jsfiddle.net/tkrotoff/N9977/ पर अपडेट किया गया संस्करण (jQuery 1.11 + बूटस्ट्रैप 3.1.1 + वर्ग = "col-xs-" वर्ग के बजाय "col-md-")।

अब आपके प्रस्तावित समाधान के साथ वही JSField : 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 चौड़ाई मान समस्या को हल कर सकते हैं, मैंने कोशिश नहीं की।

— tanguy_k
स्रोत

4

container: 'body'सामान्य रूप से ट्रिक (ऊपर जस्टऑनिल का उत्तर देखें), लेकिन अगर आपकी पॉप्यूलर मोडल में है तो समस्या है। z-indexस्थानों यह पीछे मोडल पॉपओवर से जुड़ी है, जब body। यह बीएस 2 अंक 5014 से संबंधित प्रतीत होता है , लेकिन मैं इसे 3.1.1 पर प्राप्त कर रहा हूं। आप एक containerका उपयोग करने के लिए नहीं हैं body, लेकिन यदि आप कोड को ठीक करते हैं

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

तब आप समस्या को ठीक कर देते हैं z-index, लेकिन आबादी की चौड़ाई अभी भी गलत है।

एकमात्र फिक्स जो मुझे मिल सकता है वह है उपयोग करना container: 'body'और कुछ अतिरिक्त सीएसएस जोड़ना:

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

ध्यान दें कि सीएसएस समाधान स्वयं काम नहीं करेगा।

— EML
स्रोत

1

+1 यह कष्टप्रद होने पर जब पॉपुलर मोडल के पीछे दिखाई देता है। मैं कोणीय-यूआई बूटस्ट्रैप निर्देशन के साथ इस समस्या में एक टूलटिप का उपयोग करके भाग गया tooltip-append-to-body, यह मोडल और मोडल 'ग्रेड आउट' पृष्ठभूमि के पीछे दिखाई दिया।

— दरियाएन

4

आप पॉपओवर के भीतर विशेषता डेटा-कंटेनर = "बॉडी" का उपयोग कर सकते हैं

<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

यहाँ गैर-कॉफ़सीस्क्रिप्ट तरीका इसे हॉवर के साथ करने का है:

$(".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

बूटस्ट्रैप 4 बीटा के लिए एक परीक्षण किया गया समाधान:

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

एक साथ jQuery के बयान के साथ:

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

अतिरिक्त नोट के, data-container="body"या container: "body"में या तो HTML या एक के रूप में optionकरने के लिए popover({})वस्तु वास्तव में चाल नहीं किया [शायद काम है, लेकिन केवल सीएसएस बयान के साथ एक साथ करना];

यह भी याद रखें कि बूटस्ट्रैप 4 बीटा पॉपअप और टूलटिप स्थिति के लिए popper.js पर निर्भर करता है (इससे पहले कि यह tether.js था)

— vzR
स्रोत

2

आप ऊपर बताए गए तरीकों से पॉपओवर की चौड़ाई को समायोजित कर सकते हैं, लेकिन बूटस्ट्रैप देखने से पहले सामग्री की चौड़ाई को परिभाषित करने के लिए सबसे अच्छी बात यह है कि वह अपना गणित करता है। उदाहरण के लिए, मेरे पास एक मेज थी, मैंने इसे चौड़ाई में परिभाषित किया, फिर बूटस्ट्रैप ने इसे सूट करने के लिए एक पॉपओवर बनाया। (कभी-कभी बूटस्ट्रैप को चौड़ाई निर्धारित करने में परेशानी होती है, और आपको अपना हाथ पकड़ने और पकड़ने की आवश्यकता होती है)

— CloudMagick
स्रोत

2

मैंने इसका इस्तेमाल किया (ठीक काम कर):

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

— बिमल दास
स्रोत

2

 <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" चौड़ाई सेट करके समाप्त करता हूं। (अन्य आईडी या कक्षा काम नहीं करेगा .....) शुभकामनाएँ!

  #popover-content{
      width: 600px;

  }

— CincyBella
स्रोत

1

आप डेटा-कंटेनर = "बॉडी" भी जोड़ सकते हैं, जो काम करना चाहिए:

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

— Treize
स्रोत

वाह ... मूल प्रश्न का उत्तर भी। क्लीन और बूटस्ट्रैप को ओवरराइड नहीं करता है।

— जॉनथन एलमोर

यह पॉपओवर की चौड़ाई कैसे बदलता है?

— t.durden

1

आप अपनी आबादी का खाका बदल सकते हैं। या तो data-template-मैट के साथ या फ़ंक्शन में संबंधित भाग के साथ जो इसे सेट करता है:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

स्निपेट का विस्तार करें

— FalcoGer
स्रोत

0

टाइपस्क्रिप्ट घटक के लिए:

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

— यहोशू
स्रोत

0

कोणीय में ng-bootstrapआप बस container="body"उस नियंत्रण को नियंत्रित कर सकते हैं जो पॉपओवर को ट्रिगर करता है (जैसे बटन या टेक्स्टबॉक्स)। फिर अपनी वैश्विक स्टाइलिंग फ़ाइल ( style.cssया style.scss) फ़ाइल में आपको जोड़ना होगा .popover { max-width: 100% !important; }। उसके बाद, पॉपओवर की सामग्री स्वचालित रूप से इसकी सामग्री की चौड़ाई पर सेट हो जाएगी।

— रमिन अर
स्रोत

0

बूटस्ट्रैप 4 में आप $popover-max-widthअपनी शैलियों में बूटस्ट्रैप वैरिएबल के डिफ़ॉल्ट मान को ओवरराइड कर सकते हैं। फाइल इस तरह:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

ओवरराइडिंग बूटस्ट्रैप 4 डिफॉल्ट्स पर अधिक https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

— अलेक्सी प्रोटोपोपोव
स्रोत

0

बूटस्ट्रैप 4 पर, आप अधिकतम-चौड़ाई को ओवरराइड करके आसानी से टेम्पलेट विकल्प की समीक्षा कर सकते हैं:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

यह एक अच्छा समाधान है यदि आपके पास पृष्ठ पर कई पॉपओवर हैं।

— विन्सेंट डेकाक्स
स्रोत

-2

इसे इस्तेमाल करे:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));

— फणी सी.आर.
स्रोत

आखिरी लाइन के कारण यह काम नहीं करेगा। चौड़ाई के मान के रूप में पूर्णांक को पार्स करने से सीएसएस टूट जाएगा। इसके बजाय आप कोशिश करते हैं: $('.popover').css('width', popover_size + 'px');चूंकि popover_size पूर्णांक के रूप में पार्स किया गया है। एक और बात यह है कि: popover_size = ((parseInt(string[0])+350));अतिरिक्त चौड़ाई जोड़ देगा।

— टोडोर टोडोरोव

बूटस्ट्रैप पॉपओवर की चौड़ाई बदलना

सीएसएस के साथ चौड़ाई बढ़ाएँ

ट्विटर बूटस्ट्रैप कंटेनर

और जानकारी

JSFiddle

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