CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Geeth Welagedara
Geeth Welagedara

Reputation: 614

How to customize Bootstrap JS Popover

I designed HTML page with age selector using Bootstrap JS Popover I get following output 1 and i want to achieve output 2 and following tasks

  1. li list as liner as the output 2.
  2. li should clickable and once click li it should appear in button text.

output 1

output 2

 $(document).ready(function() {
   $('#age-select-1').popover({
     content: "<ul><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>",
     html: true,
     trigger: "focus",
     placement: "bottom"
   });
 });
#age-select-1 li {
  float: left;    /*not working*/
  display: inline; /*not working*/
}
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label class="label nav-label">Age</label>
    <button class="btn nav-age-select" id="age-select-1">21</button>
  </div>
</body>

</html>

Upvotes: 1

Views: 1017

Answers (2)

elreeda
elreeda

Reputation: 4597

this #age-select-1 li will not work because the li are not insde the #age-select-1 elements but you can give the ul an id and change your css to #column li

$(document).ready(function() {
   $('#age-select-1').popover({
     content: "<ul id='column'><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>",
     html: true,
     trigger: "focus",
     placement: "bottom"
   });
 });
#column li {
  float: left;    /* working*/
  display: inline; /* working*/
}
<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label class="label nav-label">Age</label>
    <button class="btn nav-age-select" id="age-select-1">21</button>
  </div>
</body>

</html>

Upvotes: 1

StudioTime
StudioTime

Reputation: 23969

Changed CSS on the list - gave it it's own class

Basically the browser adds it's own padding so we simply reshape it, set the width to 25% and you have your effect

 $(document).ready(function() {
   $('#age-select-1').popover({
     content: "<ul class='foo'><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>",
     html: true,
     trigger: "click",
     placement: "bottom"
   });
 });
.foo { padding-left: 0; }
.foo li {
  float: left;
  display: inline-block;
  width: 25%;
}
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label class="label nav-label">Age</label>
    <button class="btn nav-age-select" id="age-select-1">21</button>
  </div>
</body>

</html>

Upvotes: 2

Related Questions