How to Have A Fixed Position Overlaying Container

Wappler General
1

I want to create a fixed width and fixed location container in my app for displaying notifications. When notifications are turned on, the container should overlay the main content of my app, aligning to the right and be exactly below my main navigation bar.

What is the best way to achieve using Wappler/Bootstrap features?

So showing this on the old version of my app built in Bubble, here is the right of the screen without notifications:

n1

And here is how the notifications window overlaps:

n2

2

Just use custom CSS for this or use the Design panel.
Add some class to your element and style it as you wish using the Design or Styles panel.

Example HTML: <div class="my-fixed-div"></div>

Example CSS:

.my-fixed-div {
    position: fixed;
    top: 50px;
    right: 5px;
    z-index:9999;
    width: 400px;
    min-height: 170px;
    border: 1px solid #666;
    background: #fff;
    border-radius: 4px;
}

Of course, that’s just an example - you can customize it as you need.

2 Likes
3

Perfect, thank you @Teodor.

I just wanted to be sure there wasn’t a simple option to select in Wappler to do this.

4

I really like what you are doing there, very nice :grinning:

5

Thanks! :slight_smile:

6

Yes I agree with @turn3636!
Really curious to see it when it will be done!!