Skip to main content

bootstrap-popper not allowing html table

 

Objective : 

    Creating popover with html using bootstrap-popover.js

Technology: 

  • Bootstrap version - 4.6.1
  • Popper - 1.16.1
  • Jquery - 3.5.1

Challenge:

    1. basic syntax for popover
<button type="button" class="btn btn-lg btn-success" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
   2. Put html to that popover syntax

<button type="button" class="btn btn-lg btn-success" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    $(function () {
          $('button[data-toggle="popover"]').popover({
                html: true,
                title: 'title',
                content: function () {
                  var billId = $(this).data('id');
                  return $('#bill-content-' + billId).html();
                }
            });
     });
Explanation:
    In first syntax you can see popover text placed in `data-content` attribute. But, If we need to put html content in this popover we need to follow second syntax.

But, Here is the challenge, I couldn't popover table element using second syntax. Than i searched AI tools perplexity and claude both were suggested use table tag. But, popover not shown that table. Than i decided to made table using `div` tag like below.
    .discount-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1px;
      margin: 20px auto;
      border-collapse: collapse;
      width: 100%;
      max-width: 800px;
      background: #ccc; /* For cell borders via gap */
      font-size: 8px;
    }
    
    .grid-header,
    .grid-cell {
      background: #fff;
      padding: 5px;
      text-align: center;
      border: 1px solid #ddd;
    }
    
    .grid-header {
      font-weight: bold;
      background-color: #EFF7F0;
    }       <div id="bill-content-1">
          <div class="discount-grid">
          <!-- Header Row -->
          <div class="grid-header"></div>
          <div class="grid-header">Girls</div>
          <div class="grid-header">Boys</div>        
          <!-- Actual Row -->
          <div class="grid-cell">Actual</div>
          <div class="grid-cell">₹1,200.00</div>
          <div class="grid-cell">₹1,800.00</div>
       </div>

Now  it showing table. But next challenge - it not showing full width of table. I solved this issue by increasing popover width and decreasing text font-size. 
.popover{max-width: 400px;} .discount-grid {font-size: 8px;}
Now it appears clearly in mobile and computer. There another problem came if i want to close the popover I just clicked that button again. But, it worked in computer due to big screen it not hide that button it hided in mobile. Than i decided to create custom button within the popover to close that popover. 

       <div id="bill-content-1">     <div class='closeBtn' id='times-1'><i class='fa fa-times'></i></div>     <div class="discount-grid"></div>         </div>       $(function () { $('button[data-toggle="popover"]').popover({ html: true, title: 'title', trigger: 'manual', content: function () { var billId = $(this).data('id'); return $('#bill-content-' + billId).html(); } }); }); $(document).on('click','.closeBtn',function(){ let id = $(this).attr("id").split(/[- ]+/); $('button[data-id='+id[1]+']').popover('hide'); }); $('button[data-toggle="popover"]').on('click', function () { $(this).popover('show') });

Once i changed manul trigger and created event for that closing button it worked seamlesly.
Labels:

Comments

Post a Comment

Popular posts from this blog

PHP can run AI models - no need Python

 Objective:     Run AI models only using php. Now this is possible with  https://github.com/CodeWithKyrian/transformers-php  this library. I have tried object detection and question answering using this library. Technology:       1.  PHP 8.2 Initialization:     Guide -  https://transformers.codewithkyrian.com/getting-started 1. Initialize project by composer init cmd. 2. Install transformer library by  composer require codewithkyrian/transformers cmd. 3. Enable ffi extention in php.ini       extension = ffi      ffi.enable = true 4. Enable opcache      opcache.jit = tracing 5. Increase memory limit      memory_limit = 512M I. Object detection: ( https://transformers.codewithkyrian.com/object-detection )     Object detection can improve web application perspective . Example:  Retail applications can speed up checkout by automatically recognizing ...
Post a Comment
Read more

Don't assign value to reference variable.

Objective:          I just tried to create linked list in php.  Challenges:     In php array is sufficient for most data types (simple array, multi-dimensional array and key-value associative array). But, i just tried using  stdClass Object ( pre-defined interfaces and class ). Here, I created one stdClass with reference key and it reference to another class up to final and that final class  reference key is null. Here I used reference key as reference variable. Once i started assigning reference value to this key it assigning new value to it and old one erased. $a = new stdClass(); $a->name = "Trial"; $a->ref = null; for($i=1;$i <= 10;$i++){  $b = new stdClass();  $b->name = 'Demo mj '.$i;  $b->ref = null;  if($a->ref === null ){   $a->ref = &$b;  }else{   $current = $a->ref;   wh...
Post a Comment
Read more