বুটস্ট্র্যাপ পপওভারের প্রস্থ পরিবর্তন করা হচ্ছে

Question

আমি বুটস্ট্র্যাপ ৩ ব্যবহার করে একটি পৃষ্ঠা ডিজাইন করছি I আমি placement: rightএকটি ইনপুট উপাদান দিয়ে একটি পপওভার ব্যবহার করার চেষ্টা করছি । নতুন বুটস্ট্র্যাপ নিশ্চিত করে যে আপনি যদি ব্যবহার করেন তবে form-controlমূলত একটি পূর্ণ-প্রস্থের ইনপুট উপাদান রয়েছে।

এইচটিএমএল কোডটি এরকম কিছু দেখাচ্ছে:

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

আমার মতামত অনুযায়ী পপওভারের প্রস্থ খুব কম, কারণ তাদের কোনও প্রস্থ ডিভের মধ্যে বাকি নেই। আমি বাম দিকে ইনপুট ফর্ম এবং ডানদিকে প্রশস্ত পপওভার চাই।

বেশিরভাগ ক্ষেত্রে, আমি এমন একটি সমাধান খুঁজছি যেখানে আমাকে বুটস্ট্র্যাপ ওভাররাইড করতে হবে না।

সংযুক্ত জেএসফিডাল। দ্বিতীয় ইনপুট বিকল্প। জাস্টফিল্ড বেশি ব্যবহার করেন নি তাই জানেন না, তবে ফলাফলগুলি দেখতে আউটপুট বাক্সের আকার বাড়ানোর চেষ্টা করুন, ছোট স্ক্রিনগুলি এমনকি এটি দেখতে পাবেন না। http://jsfiddle.net/Rqx8T/

Answer 1

সিএসএস সহ প্রস্থ বৃদ্ধি করুন

আপনি আপনার পপওভারের প্রস্থ বাড়াতে সিএসএস ব্যবহার করতে পারেন:

/* 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উপাদানকে পরিবর্তন করুন । ( জেএসফিডাল দেখুন )

---

টুইটার বুটস্ট্র্যাপ কনটেইনার

যদি এটি কাজ না করে, আপনার সম্ভবত ধারকটি নির্দিষ্ট করতে হবে:

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

---

অধিক তথ্য

পপওভারটি সেই উপাদানটির মধ্যে থাকে যা এটি ট্রিগার হয় it এটি "পূর্ণ প্রস্থ" প্রসারিত করার জন্য - ধারকটি নির্দিষ্ট করুন:

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

---

JSFiddle

এটি ব্যবহার করার জন্য জেএসফিটাল দেখুন।

জেএসফিডাল: http://jsfiddle.net/xp1369g4/

Comments

+1, তবে / আপনার পপওভারটি মডেলে থাকলে কাজ করবে না: নীচে আমার উত্তরটি দেখুন।

— EML

উপরের উত্তরটি আমার জন্য টিএলডিআর ছিল তবে এতে জিনিয়াস স্নিপেট রয়েছে যা প্রস্থ এবং সমস্ত পপওভারগুলি ক্যাপচার করার সমস্যা উভয়ই সমাধান করেছিল:$('[data-toggle="popover"]').popover({ container: 'body' });

— গ্রেগরি কসমো

আমাকে যুক্ত করতে হয়েছিল!important

— পিটার এহরলিচ

আপনি নীটার ডেটা অ্যাট্রিবিউটটি ব্যবহার করতে পারেন: data-container="body"উপাদানটিতে

— স্টিফেন

@ surfer190 একটি প্রতি-পপওভার ভিত্তিতে নীচে, তবে আপনি যদি প্রতিটি পপওভার চান তবে বিশৃঙ্খলা container: "body"।

— ক্রিস সাইরেফাইস

Answer 2

অনুসন্ধানের পাঠ্য ক্ষেত্রের জন্য আমার আরও বিস্তৃত পপওভার প্রয়োজন। আমি এই জাভাস্ক্রিপ্ট সমাধানটি নিয়ে এসেছি (এখানে কফিতে ):

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

কর্মক্ষেত্রটি শেষ লাইনে রয়েছে। পপওভার প্রদর্শিত হওয়ার আগে সর্বাধিক প্রস্থের বিকল্পটি একটি কাস্টম মানতে সেট করা আছে। আপনি টিপ উপাদানটিতে একটি কাস্টম ক্লাস যুক্ত করতে পারেন।

Comments

আপনি যদি কফি-সাক্ষর না হয়ে থাকেন তবে এখানে নিয়মিত জেএসের মতো একই শেষ লাইনটি রয়েছে:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });

— কলিন

.Tip () কি? .ডাটা () ব্যবহার করবেন কেন? এক্সডি আমি আসলে এটি বুঝতে পারি না, তবে এটি কার্যকর! আমি এই সমাধানটি ডিফল্ট প্রতিস্থাপনের জন্য নতুন সিএসএস লেখার চেয়ে ভাল max-width। এই সমাধানের জন্য আপনাকে ধন্যবাদ! এর পরিবর্তে বিটিডব্লিউ "600px", আমি এটি সেট করেছি "none"। এটা আমার জন্য ভাল।

— তৌফিক নূর রহমন্দা

Answer 3

আমারও একই সমস্যা ছিল। উত্তরের জন্য অনুসন্ধান করতে বেশ কিছু সময় ব্যয় করেছেন এবং আমার নিজের সমাধানটি খুঁজে পেয়েছেন: নীচের পাঠ্যটি মাথায় যুক্ত করুন:

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

Comments

বুটস্ট্র্যাপের ডিফল্ট সেটিংসকে ওভাররাইড করার জন্য আপনাকে গুরুত্বপূর্ণ যোগ করতে হবে!

— জন ক্রিমার

Answer 4

প্রস্থ পরিবর্তন করতে আপনি CSS ব্যবহার করতে পারেন

স্থির আকারের জন্য চেয়েছিলেন

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

সর্বোচ্চ প্রস্থ জন্য চেয়েছিলেন:

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

জেএসফিডাল : http://jsfiddle.net/Rqx8T/2/

Comments

এটি প্রথমে সাইটের জুড়ে পপওভার প্রস্থ পরিবর্তন করবে। তবে একটি উত্তর খুঁজে পেয়েছে oreএকটি সঠিকভাবে এখনই পোস্ট করছেন a

— মায়াঙ্কবত্র

@ পিটার, আমি আপনার ইস্যুটি পুনরুত্পাদন করতে পারছি না, আমি মনে করি আপনি কেবল নিজের

— ইনপুটটিতে

@pbenard আমারও একই সমস্যা হচ্ছে, আপনার সমাধানটি 276px এর চেয়ে সর্বাধিক প্রস্থ কমিয়ে আনতে কাজ করে। তবে আপনি যদি সর্বাধিক প্রস্থের চেয়ে বেশি পরিবর্তন করার চেষ্টা করেন তবে এটি পরিবর্তন হবে না।

— হার্ডিক প্যাটেল 25'18

Answer 5

পপওভার প্রস্থ পরিবর্তন করতে আপনি টেমপ্লেটটিকে ওভাররাইড করতে পারেন:

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

Comments

আমার জন্য কাজ করে নি .. আমারও max-width: 500pxস্টাইলে যুক্ত হওয়া দরকার ছিল ।

— 32

Answer 6

এমন জাতির জন্য যারা জাভাস্ক্রিপ্ট সমাধানটি পছন্দ করেন। ইন বুটস্ট্র্যাপ 4 ডগা () হয়ে ওঠে getTipElement () এবং এটি একটি কোন jQuery এর অবজেক্ট ফেরৎ। সুতরাং বুটস্ট্র্যাপ 4-এ পপওভারটির প্রস্থ পরিবর্তন করতে আপনি ব্যবহার করতে পারেন:

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

Comments

এটি আমার পক্ষে কাজ করেছে, তবে কেবল সেটিংস widthনা থাকলেmax-width

— ডানো

Answer 7

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

মূলত আমি ইনপুট ডিভের পরিবর্তে পপওভার কোডটি সারি ডিভিতে রেখেছি। সমস্যার সমাধান.

Comments

আমার জন্য কাজ করে না। আমি এটি কাজ করবে বলে আশা করেছি :( অদ্ভুত

— t.durden

Answer 8

মডেল উইন্ডোতে পপওভার এবং @ 2called- বিশৃঙ্খলা দ্বারা দেখানো কোড সম্পর্কে @ EML উপরে উল্লিখিত বিবরণীর সাহায্যে, আমি এইভাবে সমস্যার সমাধান করেছি।

আমার কাছে মডেলের আইকন রয়েছে যা ক্লিক করার পরে পপআপ করা উচিত

আমার এইচটিএমএল

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

Answer 9

এখানে কোনও চূড়ান্ত সমাধান নেই: / কীভাবে "পরিষ্কারভাবে" এই সমস্যাটি সমাধান করবেন সে সম্পর্কে কিছু ধারণা ...

আপনার আসল জেএসফিডেলের আপডেট সংস্করণ (jQuery 1.11 + বুটস্ট্র্যাপ 3.1.1 + শ্রেণি = "কল-এক্সএস-") = "কল-এমডি-" এর পরিবর্তে) http://jsfiddle.net/tkrotoff/N99h7/

আপনার প্রস্তাবিত সমাধানের সাথে এখন একই জেএসফিডাল : 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/ দেখুন

হতে পারে, খুব সাম্প্রতিক ব্রাউজারগুলি ব্যবহার করে নতুন সিএসএস প্রস্থের মানগুলি সমস্যার সমাধান করতে পারে, আমি চেষ্টা করি নি।

Answer 10

container: 'body'সাধারণত কৌতুকটি করে (উপরের জাস্টঅনিলের উত্তর দেখুন), তবে আপনার পপওভার কোনও মডেলে থাকলে সমস্যা আছে। z-indexস্থান এটা পিছনে মোডাল popover সংযুক্ত যখন body। এটি BS2 ইস্যু 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;
}

মনে রাখবেন যে সিএসএস সমাধানগুলি নিজেরাই কার্যকর করবে না work

Comments

মোডেলের পিছনে পপওভার উপস্থিত হওয়ার সময় এটির বিরক্তিকর হবে। আমি এই একই সমস্যার সাথে কৌণিক-ইউআই বুটস্ট্র্যাপ নির্দেশিকাটি দিয়ে একটি টুলটিপ ব্যবহার করেছি tooltip-append-to-body, এটি মডেল এবং মডেলের পিছনে উপস্থিত হয়েছিল 'ধূসর আউট' ব্যাকগ্রাউন্ড।

— ড্যারেন

Answer 11

আপনি পপওভারের মধ্যে অ্যাট্রিবিউট ডেটা-ধারক = "বডি" ব্যবহার করতে পারেন

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

Answer 12

হোভার দিয়ে এটি করার নন-কফিসিপি পদ্ধতিটি এখানে:

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

Answer 13

বুটস্ট্র্যাপ 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 বিটা তার পপওভার এবং টুলটিপ পজিশনিংয়ের জন্য পপার.জেজেসের উপর নির্ভর করে (এর আগে এটি টিথার.জেএস ছিল)

Answer 14

উপরের নির্দেশিত পদ্ধতিগুলির সাহায্যে আপনি পপওভারের প্রস্থটি সামঞ্জস্য করতে পারেন তবে বুটস্ট্র্যাপ দেখায় এবং গণিত করার আগে বিষয়বস্তুর প্রস্থকে নির্ধারণ করা ভাল কাজ। উদাহরণস্বরূপ, আমার একটি টেবিল ছিল, আমি এটির প্রস্থটি সংজ্ঞায়িত করেছি, তারপরে বুটস্ট্র্যাপ এটির জন্য একটি পপওভার তৈরি করেছে। (কখনও কখনও বুটস্ট্র্যাপের প্রস্থ নির্ধারণ করতে সমস্যা হয় এবং আপনাকে তার হাতটি ধরে রাখতে হবে)

Answer 15

আমি এটি ব্যবহার করেছি (ভাল কাজ করছি):

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

Answer 16

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

আমি চাই এমন নম্বরটি ডিভ "পপওভার-সামগ্রী" প্রস্থ সেট করে শেষ করছি। (অন্যান্য আইডিস বা শ্রেণি কাজ করবে না .....) শুভকামনা!

  #popover-content{
      width: 600px;

  }

Answer 17

আপনি ডেটা-ধারক = "বডি" যুক্ত করতে পারেন যা কাজটি করা উচিত:

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

Comments

বাহ ... মূল প্রশ্নের উত্তরও দেয়। পরিষ্কার এবং বুটস্ট্র্যাপ ওভাররাইড করে না।

— জনাথন এলমোর

কীভাবে পপওভারটির প্রস্থ পরিবর্তন হয়?

— t.durden

Answer 18

আপনি আপনার পপওভারের টেম্পলেটটি পরিবর্তন করতে পারেন। হয় 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>

Answer 19

একটি টাইপ স্ক্রিপ্ট উপাদান জন্য:

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

Answer 20

কৌণিক ক্ষেত্রে ng-bootstrapআপনি container="body"পপওভারকে ট্রিগার করে এমন নিয়ন্ত্রণে রাখতে পারেন (যেমন বোতাম বা পাঠ্যবাক্স)। তারপরে আপনার গ্লোবাল স্টাইলিং ফাইল ( style.cssবা style.scss) ফাইলে আপনাকে অবশ্যই যুক্ত করতে হবে .popover { max-width: 100% !important; }। এর পরে, পপওভারের সামগ্রী স্বয়ংক্রিয়ভাবে এর সামগ্রীর প্রস্থে সেট হয়ে যাবে।

Answer 21

বুটস্ট্র্যাপ 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-st সূত্র / থেমিং /#variable-deafults

Answer 22

বুটস্ট্র্যাপ 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>'
});

যদি আপনার পৃষ্ঠাতে বেশ কয়েকটি পপওভার থাকে তবে এটি একটি ভাল সমাধান।

Answer 23

এটা চেষ্টা কর:

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

Comments

শেষ লাইনের কারণে এটি কাজ করবে না। প্রস্থের মান হিসাবে পূর্ণসংখ্যা পার্স করা CSS এর বিরতি ঘটাবে। পরিবর্তে আপনি চেষ্টা করা উচিত: $('.popover').css('width', popover_size + 'px');যেহেতু পপওভার_সাইজটি পূর্ণসংখ্যা হিসাবে পার্স করা হয়। আরেকটি বিষয় হ'ল: popover_size = ((parseInt(string[0])+350));অতিরিক্ত প্রস্থ যুক্ত হবে।

— টডর টডোরভ