Form elements disabled: Contain Form within a bootstrap popover embedded in Modal

Question

Based on this post I tried to create a popover with an input-field which can be opened via a link within a modal.

But for any reason the input and the submit button are disabled. Does anyone know why and how to fix it?

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <a href="#" id="popover">the popover link</a>
    <div id='popover-head' class='front hide'>
      Lorem Ipsum
    </div>
    <div id='popover-content' class='content hide'>
         <div class='form-group'>
                <input type='text' class='form-control' placeholder='Type something…'>
         </div>
         <button type='submit' class='btn btn-default'>Submit</button>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

JS

$('#popover').popover({ 
html : true,
placement: 'bottom',
title: function() {
  return $("#popover-head").html();
},
content: function() {
  return $("#popover-content").html();
}
});

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

score 1 · Accepted Answer · answered Oct 16 '16 at 17:01

1

You need to place your popover's elements inside modal popup. So have to use "container" attribute for popover.

But if you use Bootstrap 3.0 then you need not to do anything.

Fiddle with bootstrap3.0

Used your same code.

$('#popover').popover({ 
    html : true,
    placement: 'bottom',
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

answered Oct 16 '16 at 17:01

Power Star

1,724
2
13
25

Thanks for your answer. I am still struggling to get it running with bootstrap 4. I am not sure if I am using the container attribute right, I tried to address it by class and id (e.g.: container: "#popover-container"), no success... [Fiddle] (https://jsfiddle.net/Lhvfdw09/4/) – Lukas Oct 16 '16 at 17:49
@Lukas This container is not included in bootstrap 4.. https://github.com/twbs/bootstrap/issues/17755 – Power Star Oct 16 '16 at 18:25

score 0 · Answer 2 · answered Oct 16 '16 at 19:57

As I don't want to replace bootstrap 4 with bootstrap 3 in my running project and it is not possible to get this done with bootstrap popover directly (or I am not aware of it) I will continue with this approach:

HTML

<div id="popover" class="dropdown-menu" role="menu">
<form class="col-sm-12">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <button id="submit" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

JS

$(".popover-btn").click(function() {
  $(this).after($("#popover"));
  $(this).dropEffect();
});

Demo

Form elements disabled: Contain Form within a bootstrap popover embedded in Modal

2 Answers2