Why is the content in a modal dialog being truncated? - oracle-apex-5

Question

I'm following along a book tutorial and I've hit a problem that I can't solve. Hopefully somebody here can help.
There is essentially a modal dialog - wizard dialog - with dynamic pl/sql content, which is being truncated for some reason. I'm wondering if this is normal behaviour:
The db is sending more than those 3 rows displayed in the Product/Price table. If I hack the code to stop rendering rows after one row:
Is this something that's easily explainable? The code that's building all this stuff is this; I don't expect anyone to read it in detail, but I'm just left wondering if a browser is supposed to automatically insert a vertical scrollbar:
[original lengthy code removed]
Thanks
Edit:
I've removed inline CSS on the page, and reduced the dynamic PL/SQL to this, but it's still happening:
declare
l_customer_id varchar2(30) := :P11_CUSTOMER_ID;
begin
-- display products
sys.htp.p('<div class="Products" >');
sys.htp.p('<table width="100%" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr><th class="left">Product</th><th>Price</th><th></th></tr>
</thead>
<tbody>');
for c1 in (select product_id, product_name, list_price, 'Add to Cart' add_to_order from demo_product_info where product_avail = 'Y' union all
select product_id, product_name, list_price, 'Add to Cart' add_to_order from demo_product_info where product_avail = 'Y'order by product_name) loop
sys.htp.p('<tr><td class="left">'||sys.htf.escape_sc(c1.product_name)||'</td>
<td>'||trim(to_char(c1.list_price,'999G999G990D00')) || '</td>
<td><a ><span>Add<i class="iR"></i></span></a></td>
</tr>');
end loop;
sys.htp.p('</tbody></table>');
sys.htp.p('</div>');
sys.htp.p('<b>DONE</b>');
end;
There are 11 rows returned by the sql query; I've doubled them up to 22 so there should be 22 rows in the resulting table, but this is the output:
I don't know if it helps, but...

Answer 1

Have you set a height for your modal page in page settings?
Try to put this css in your page settings:
*Change this number (400) by the height of your modal or something close to that.
.CustomerInfo {
height: 400px;
overflow: auto !important;
}
I don't know why this happen, I think this issue is related of this property https://www.w3schools.com/cssref/pr_pos_overflow.asp
EDIT
I created this page to test: page 25 is the modal page, page 23 have a link to the modal page.
https://apex.oracle.com/pls/apex/f?p=145797:23
Login on: https://apex.oracle.com/pls/apex/f?p=4550:1
workspace: stackquestions
user: test
pwd: test
app: 145797
wizard modal page: 25
Could check if is there any diference in the page settings or in the region settings between your modal page and this page above? or could you try to replicate this problem in this workspace?
The wizard modal page have a region with this pl/sql, the same of yours, but with fake data.
declare
v_count NUMBER := 0;
v_max_count NUMBER := 30;
begin
-- display products
sys.htp.p('<div class="Products" >');
sys.htp.p('<table width="100%" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr><th class="left">Product</th><th>Price</th><th></th></tr>
</thead>
<tbody>');
loop
sys.htp.p('<tr><td class="left">'||'product - ' || v_count ||'</td>
<td>'|| '50 - ' || v_count || '</td>
<td><a ><span>Add<i class="iR"></i></span></a></td>
</tr>');
v_count := v_count + 1;
EXIT WHEN v_count >= v_max_count;
end loop;
sys.htp.p('</tbody></table>');
sys.htp.p('</div>');
sys.htp.p('<b>DONE</b>');
end;