CSS Bottom to The Parent | PowerApps HtmlText

2022-09-20 245 words 2 minutes

Contents

How to achieve something like the example above? This should work well in most browsers but Power Apps.

(notice calc(100% — 3em); syntex, put - between spaces) (# css height 100% — upper div)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div style='  
     position: relative;  
     width: 100%;  
     height: calc(100% - 100px);  
     max-width: 640px;  
     margin-left: auto;  
     margin-right: auto;  
    '>  
        <h2 style='  
        position: absolute;  
        bottom: 0;  
        right: 20px;  
        color: white;  
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);  
        text-align: right;  
    '><u>Skip</u></h2>

But because the inner div is positioned absolutely, you’ll always have to worry about other content in the outer div overlapping it (and you’ll always have to set fixed heights). by Jon Smock, j08691

css — How can I send an inner <div> to the bottom of its parent <div>? — Stack Overflow

In Power Apps you need to change it to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div style='  
    position: relative;  
    width: 100%;  
    max-width: 740px;  
    height: "&Parent.Height&"px;  
    margin-left: auto;  
    margin-right: auto;  
'>  
    <h3 style='  
        position: absolute;  
        bottom: 20px;  
        right: 20px;  
        color: white;  
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);  
        font-family: "&Char(34)&"Montserrat"&Char(34)&", sans-serif;  
        text-align: right;  
        cursor: pointer;  
    '>  
        <u>Skip</u>  
    </h3>  
</div>