How to increase the popover width

Viewed 172

$(document).ready(function(){
 $('#autodelete_spmlds').popover({
  placement: 'bottom',
  title: '<span style="color:black;font-size: 12px;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif">Settings</span>' + ('&nbsp;') + ('&nbsp;') + '<button type="button" class="close pull-right" data-dismiss="alert" style="color:black;">&times;</button>',
  html: true,
  content: function () {
  return $('#autodelete').html();
  }
 });
 
 $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
  
 });
});



<div class='hide' id='autodelete'>
   <form class="form-bordered" action="<?=base_url()?>approval/update_selectedspmlds" id="spm_options" name="" method="post" >
    <div class="panel-group">
     <div class="panel panel-default">
      <label>Delete After</label>
      <select class="form-control" id="spm" name="spm" required>
       <option value=""> Delete Leads automatically </option>
       <option value="7">1 Week Older</option>
       <option value="30">1 Month</option>
       <option value="60">2 Month</option>
      </select>
     </div>
     <br/>
     <div class="popover-footer">
      <input type="submit" id="smtbtn" class="btn btn-info btn-sm" value="Save">
     </div>
    </div>
   </form>
  </div>

here i need to give the Delete After and select box with same width in the same line but i have tried it'e not coming. i don't why. pls anyone help me.

1 Answers

Just write your custom CSS for the popover.

See below example

$(document).ready(function(){
  $('.btn-success').popover({
      title: "Header", 
      content: "Blabla", 
      placement: "bottom"
  });  
});
.popover {
  width:200px
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Options</h3>
  <p>The <strong>placement</strong> option specifies the popover position.</p>
  <div>
    <button class="btn btn-success btn-md">Bottom</button>
  </div>
</div>


</body>
</html>

If you can do nesting for that CSS then please do it. Otherwise, it will apply on all popovers.

Related