Just add: .modal-content { height:250px; overflow:auto; } The height can of course be adapted to your personal needs. Working Example Update: It’s actually pretty easy. Just add: .modal-body { max-height: calc(100vh – 212px); overflow-y: auto; } to your css. It uses vh and calc, which also happen to have a good browser support (IE9+). This … Read more
You can, by using the RequestContext (or PrimeFaces if you are using the version 6.2 or higher) class. Suppose you have the following: <p:dialog id=”myDialogID” widgetVar=”myDialogVar”> …. </p:dialog> So the way you do in the facelet itself, i.e. onclick=myDialogVar.show();, the same can be done in your managed bean like so: For PrimeFaces <= 3.x RequestContext … Read more
The question is the answer. I’m just posting this to close it out. Sorry for twisting the stackoverflow format.
Updated answer (29/02/2024) As pointed out by Wes Goulet, this will change (or has changed) and we may have the expected behaviour of the original poster. So, the following probably works on all major browsers: document.querySelector(‘dialog’).showModal(); :root { –color-backdrop: red; } dialog::backdrop { background: var(–color-backdrop); } <dialog> <p>This is a dialog. My backdrop should be … Read more
Edit February 1, 2024: The inert attribute is now fully stable and can be used to prevent a user escaping a modal by making everything outside the modal inert. Additionally, you can use the dialog element with the showModal function to handle modal dialog focus automatically. Using showModal will open the dialog element as a … Read more
I had a similar problem, which I solved with a slight twist My modal div is rendered on the calling page (from a partial) and not by the response of the JS request: <div class=”modal hide fade” id=”modal-window”> <div class=”modal-header”> <a href=”#” class=”close”>×</a> <h3>Loading…</h3> </div> <div class=”modal-body center”> <%= image_tag “loading.gif” %> </div> <div class=”modal-footer”> </div> … Read more
You need use the data-target tag. Try to replace the href=”#myModal” attribute with data-target=”#myModal”. Besides, you have put a hide class, I guess it shouldn’t be there. Look at the examples here
OK, looking at this through Firebug… The Dialog control create a div with a class called ui-dialog-buttonpane, so you can search for that. If you are dealing with multiple buttons, you will probably want :first and :last attributes. So, $(“.ui-dialog-buttonpane button:first) should get you the first button. and $(“.ui-dialog-buttonpane button:last) should get you the last … Read more
I finally found this solution from “Sven” and solved the problem. what I did was I included “https://stackoverflow.com/questions/10560630/bootstrap.min.js” with: <script src=”https://stackoverflow.com/questions/10560630/bootstrap.min.js”/> instead of: <script src=”https://stackoverflow.com/questions/10560630/bootstrap.min.js”></script> and it fixed the problem which looked really odd. can anyone explain why?
Ok, so I figured out the issue. If the modal container has a fixed position or is within an element with fixed position this behavior will occur. Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body … Read more