Floating group equivalent in Wappler?

From Bubble to Wappler
#1

Hi all,

In Bubble, you could create a ‘floating group’ and align that to the right or left of the page nicely. For example, if I click on a button I can display the floating group as a half page takeover that shows additional detail on a record.

Note - this isn’t a modal, but has the same function in terms of pop-up, and a slight darkening on the rest of the page.

Can anyone point me towards the right Wappler element?

#2

The best I can offer is making the bootstrap modal appear as a floating sidebar using CSS. Give your modal an extra class called modal-right

.modal.modal-right .modal-dialog {
  max-width: 380px;
  height: 100% !important;
  -webkit-transform: translate(100%,0);
          transform: translate(100%,0);
  margin: 0 0 0 auto;
}
.modal.modal-right.show .modal-dialog {
  -webkit-transform: translate(0,0);
          transform: translate(0,0);
}
.modal.modal-right .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

You can set the max-width to your needs.

N.b. I only tested in Chrome

4 Likes
#3

I adjusted the options here:

https://www.w3schools.com/howto/howto_js_sidenav.asp

You can toggle the classes using a variable rather than javascript. With some small adjustments to the css you can have it slide in from either side, full screen, or however you want.

Then just delete the menu and add in whatever other elements you need, including data detail.

Only downside is you can’t really use the visual editor as the panel is off screen. Takes a bit of working through but once it’s done you can reuse most of the code.

3 Likes