发表新帖
发表新帖

Changing the width of Bootstrap popover

后端 未结
关注
23 1558
北恋
北恋 2020-11-27 10:51

I am designing a page using Bootstrap 3. I am trying to use a popover with placement: right on an input element. The new Bootstrap ensures that if you use

相关标签:
23条回答
  • 挽巷
    2020-11-27 11:17

    I used this(working fine) :

    .popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}
    0 讨论(0)
  • 礼貌的吻别
    2020-11-27 11:18

    you can also add the data-container="body" which should do the job : 

    <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>
    0 讨论(0)
  • 半阙折子戏
    2020-11-27 11:18

    In Angular ng-bootstrap you can simply container="body" to the control that triggers popover (such as button or textbox). Then in your global styleing file (style.css or style.scss) file you must add .popover { max-width: 100% !important; }. After that, the content of the popover will automatically set to its content width.

    0 讨论(0)
  • 不要未来只要你来
    2020-11-27 11:19

    To change width you can use css

    For fixed size wanted

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

    For max width wanted:

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

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

    0 讨论(0)
  • 执念已碎
    2020-11-27 11:20 
     <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>

    I end up by setting div "popover-content" width to the number I want. (other ids or class won't work.....) Good luck! 

      #popover-content{
      width: 600px;

  }
    0 讨论(0)
  • 醉酒成梦
    2020-11-27 11:20

    You can change the template of your popover. Either with the data-template-attribute or with the relevant part in the function that sets it up:

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

    0 讨论(0)
 看不清?
提交回复
热议问题