Overlay feature - height specification for overlay page

[arminunruh]

the height of an overlay depends on the height of your rows in your overlay

so if u want a full-height overlay, just in your overlay page, create a row, right click → use browser height for row height, then set frame top and frame bottom to 0

[jj7ks]

Hey @arminunruh thanks for the answer !
But I described it a little unclear, i'm sorry. I didn't want the overlay page to fill 100% of the page, but only, lets say, 95% in height.

i guess in the style css it would mean a different max-height-value, like this

.lay-overlay > .lay-content {
  background-color: white;
  overflow-y: auto;
  max-height: 95vh;

[arminunruh]

oh yea

yea if that css works, thats a good solution

[Glyph]

Is there a way to position the overlay more specifically so it's for example in the bottom right hand corner, 50px from the bottom and right edge of the browser window? Then on mobile maybe it's just in the bottom third of the window?

[arminunruh]

use these settings:

add this in:
lay options -> custom css & html -> custom css for desktop

.lay-show-overlay.lay-slide-from-right{
    transform: translateX(-50px)!important;
}
.lay-slide-from-right{
    top: auto!important;
    bottom: 50px!important;
}
.lay-overlay > .lay-content{
    height: 500px!important;
}

add this in:
lay options -> custom css & html -> custom css for mobile

.lay-show-overlay.lay-slide-from-right{
    transform: translateX(-50px)!important;
}
.lay-slide-from-right{
    top: auto!important;
    bottom: 50px!important;
}
.lay-overlay > .lay-content{
    height: 300px!important;
}

will result in:

[Glyph]

Ok without being greedy. Is there a way to add a drop shadow to an overlay page? So that it looks more like it's floating onto of the page?

[arminunruh]

sure!

.lay-overlay{
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

[Glyph]

@arminunruh You are Yoda. Thankyou.

[Glyph]

@arminunruh I have tested the positioning code you have shown, the challenge is I only want to apply it to one overlay, not all of them (because I use overlays as slide out menus). I have tried to target the overlay id, but it won't work no matter what I do. This is the code I keep arriving at but still no luck. What am I doing wrong here?

/* 1. Only transform this specific overlay */
.lay-overlay .overlay-id-974.lay-show-overlay.lay-slide-from-right {
  transform: translateX(-50px) !important;
}

/* 2. Only reposition this specific overlay */
.lay-overlay .overlay-id-974.lay-slide-from-right {
  top: auto !important;
  bottom: 50px !important;
}

/* 3. Only set height for this specific overlay */
.lay-overlay .overlay-id-974 {
  height: 300px !important;
}

[arminunruh]

your selectors are not correct, they should be like:

desktop CSS:

.overlay-id-2381.lay-show-overlay.lay-slide-from-right{
    transform: translateX(-50px)!important;
}
.overlay-id-2381.lay-slide-from-right{
    top: auto!important;
    bottom: 50px!important;
}
.overlay-id-2381.lay-overlay > .lay-content{
    height: 500px!important;
}

.overlay-id-2381.lay-overlay{
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

mobile CSS

.overlay-id-2381.lay-show-overlay.lay-slide-from-right{
    transform: translateX(-50px)!important;
}
.overlay-id-2381.lay-slide-from-right{
    top: auto!important;
    bottom: 50px!important;
}
.overlay-id-2381.lay-overlay > .lay-content{
    height: 300px!important;
}

(instead of 2381 use 974)

[Glyph]

Thankyou Armin. That works!

[Glyph]

Sorry one more query on this. On mobile, I want the overlay to site centred full width at the bottom of the screen with 10px on each side. However again struggling to get this working. I've gotten this far but it causes issues. The overlay close button no loner works and its become buggy.

.overlay-id-974.lay-slide-from-right {
  top: auto !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

[arminunruh]

mobile css:

.overlay-id-3506.lay-show-overlay.lay-phone-slide-from-right{
    transform: translateX(0px)!important;
}
.overlay-id-3506.lay-phone-slide-from-right{
    top: auto!important;
    bottom: 0px!important;
    left: 10px!important;
    right: 10px!important;
    width: auto!important;
}
.overlay-id-3506.lay-overlay > .lay-content{
    height: 50svh!important;
    /* or height: 300px!important; */
}

use your id instead of 3506

[Glyph]

Thankyou this is perfect. I spend half a day tweaking code that just never works as I really want ir. Appreciate the help.

[arminunruh]

sure no problem!