How can be built a modal right sidebar ? In the modal component I do not see this option. I have found in CodePen a CSS code, but for some reason it does not work. Does anybody know a way to build a modal right sidebar in Wappler ? Thanks
This is an example for Boostrap 3. For Bootstrap 4 you need to change in to show
as in
.modal.left.fade.show .modal-dialog {
left: 0;
}
1 Like
Thank you @ben . I have changed the css to show as per your suggestion, but apparently I am making some mistakes elsewhere. In the file mystyle.css I put the CodePen CSS and this is the html
I have only manually added the class “right” in the DIV that opens the modal. The thing is that in Wappler I see the modal on the left side and in the browser I see the original modal. No changes.
What am I missing ?
Hello,
Can you show us an example of what are you trying to achieve?
But does it need to be a modal? Why not just design the right side panel, position it as you like it, and toggle its visibility using a variable?
No need to be a modal. But I could not find a right side panel element. Can you please tell me how to do that ?
Well you can use the Design panel to style any element on your page so you can make your “right side panel” like you need it.
I have tried yesterday for hours, but it seems to be too difficult for me to understand. Sorry, but can you be more specific when you sat “any element” ? Should it be a container, a row, a column ? Also about styling, I tried to make a container float right but it does not work in browser. Also using variable it too complicated for me at this stage. I am trying to learn Wappler very hard. Please be patient, but maybe the modal solution it’s easier to implement. Thanks.
Any element can be literally any element, any div or container.
You don’t use floats for this. You need to specify the position to be fixed, height 100%, width as you need it and top and right set to 0px;
I am getting there … slowly but progressing ! Now I try to add a variable.
One more question: is it possible to hide this element in building mode inside Wappler ? As you can see, it’s not possible to work on the rest of the page with the yellow area visible. Thanks
Here’s how to toggle this element visibility:
Thanks a lot, @Teodor. Don’t know if a screen recording can be viewed as an attachment, but I try. This is what I was able to do.
Right Side Panel using a Container and a toggler variable. Works fine but since it is not a modal you there is no backdrop option. To close it a specific button is needed.
Registrazione schermo 2019-05-28 alle 12.13.25.mov (737.6 KB)
I have also made Right Side Modal using the design panel. Same set up as per the container, but applied to the Modal Body (not to the Dynamic Modal element).
Registrazione schermo 2019-05-28 alle 12.10.01.mov (596.2 KB)
One thing not properly working in the modal is the Fade effect: as you can see from the last video, before the modal body appears on the right side of the screen there is an annoying effect showing for a second the modal in the top center of the page. Any suggestion on how to fix that ? Or in general about how can I get the same results in a better way ? Thanks
You can create your own “backdrop” by adding a simple div, covering your page and showing it the same way as the panel.
Using the dynamic events > mouse > click you can make it change variable value so that when it’s clicked it will close the panel and hide itself.
You need to have a bit more advanced CSS skills to customize the Modal component the way you need.
1 Like