Problem for small screen using bootstrap modals

[danielemaddaluno]

Issue Overview

Bootstrap modals does not work responsively following one of these modals examples.

Current Behaviour

Bootstrap modals are not visible in small screens.

Expected Behaviour

The modal should work even on mobiles as in the Bootstrap modals examples

How to reproduce

1. Paste in the index.xhtml, inside the <ui:define name="body"> the following code:

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
      Launch demo modal
  </button>
  
  <!-- Modal -->
  <div class="modal" tabindex="-1" role="dialog" id="exampleModalCenter">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&#215;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

2. Click the button Launch demo modal.
3. Try shinking the screen size, the modal will disappear (even on mobiles the modal is not positioned well)

Additional Information

• Mojarra version: 2.2.15
• AdminTemplate version: 1.0.0-RC18
• PrimeFaces version: 6.2

[rmpestano]

Hi @danielemaddaluno,

Any reason for not suing PrimeFaces dialog? See example on showcase here.

To be honest I hardlly use "pure" bootstrap components and I tend to use PrimeFaces ones because they usually are more feature complete and the final markup is less verbose because PrimeFaces generates the html/js.

thanks for reporting!

[danielemaddaluno]

Thank you for the fast response @rmpestano, you are right, basically I'm currently using PrimeFaces dialogs.
I just wanted to get a better aesthetic result with the minimal programmatical effort.
If there isn't another option I'll certainly continue in using PrimeFaces dialogs as you suggested.
Thank you again!

[rmpestano]

Hi, I think it is easier to change the look&feel of Dialog the way you want than using BS modals.

Please let this issue open, I'll have a look on your sample code when I find some time.

PS: If I would guess the issue I'D say it is slideout integration. You can try to disable it to see if it helps:

.admin-config.properties

admin.enableSlideMenu=false

[danielemaddaluno]

Yes, setting admin.enableSlideMenu=false makes it visible and responsive, there is still something different from the bootstrap example in the modal look and style.
But now at least it is visible, responsive and works.
Thank you @rmpestano.