Repository navigation
Problem for small screen using bootstrap modals #129
Description
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
- 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">×</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>
- Click the button
Launch demo modal. - 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
Activity
rmpestano commentedon Sep 16, 2018
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 commentedon Sep 16, 2018
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 commentedon Sep 16, 2018
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
danielemaddaluno commentedon Sep 17, 2018
Yes, setting
admin.enableSlideMenu=falsemakes 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.