Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Android: A canvas inside a local webview has the wrong height if it is specified using percentages (i.e. 100%) #14098

Open
1 task done
Informate opened this issue Aug 28, 2024 · 1 comment · May be fixed by #14099
Open
1 task done

Android: A canvas inside a local webview has the wrong height if it is specified using percentages (i.e. 100%) #14098

Informate opened this issue Aug 28, 2024 · 1 comment · May be fixed by #14099
Assignees
@m1ga
Labels
android bug needs triage This issue hasn't been reviewed by maintainers

Comments

@Informate
Copy link

Informate commented Aug 28, 2024 •
edited
Loading

I have searched and made sure there are no existing issues for the issue I am filing

  • I have searched the existing issues

Description

NOTE: Maybe this issue is not directly related to Titanium SDK but to the Canvas - HTML5 framework.

A canvas within a local webview is not sized correctly if its size is specified as a percentage. This applies both to settings via CSS and to the height and width attributes of the canvas itself.

<body>
 <style>
  body {margin: 0 0;padding: 0 0;}
  canvas {margin: 0 0;padding: 0 0; width: 100%; height:100%; background-color: blue;}
 </style>
 <canvas id="plot2d" width="100%" height="100%"></canvas>
</body>

FIXING WORKAROUND:
Programmatically set the dimension of the canvas in pixels.

<script>
 const canvas=document.getElementById('plot2d');
 function rCnv() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drawStuff();
 }
 rCnv();
 window.addEventListener('resize', rCnv, false);
</script>

If you are using the Chart.js plugin instead use:

<script>
 const canvas=document.getElementById('plot2d');
 const chart = new Chart(canvas.getContext('2d'), {} );
 function rCnv(){
  chart.resize(window.innerWidth,window.innerHeight);
 }
 rCnv();
 window.addEventListener('resize', rCnv, false);

while setting maintainAspectRatio and responsive to false inside the chart options:

options: {
 responisve: false,
 maintainAspectRatio: false

Expected Behavior

Canvas sizes correctly

Actual behavior

Height is reduced or the canvas looks like a square, same height as width!

Reproducible sample

X

Steps to reproduce

X

Platform

Android

SDK version you are using

12.4.0.GA

Alloy version you are using

No response
@Informate Informate added bug needs triage This issue hasn't been reviewed by maintainers labels Aug 28, 2024
@m1ga m1ga linked a pull request Aug 29, 2024 that will close this issue
Open
@m1ga
Copy link
Contributor

m1ga commented Aug 29, 2024

there you go: #14099

it's "kind of" by design as the content/body/html doesn't have a height so it can't handle percentage values. It shrinks to the content (and yes, the background color is still the whole webview 🤷 )

@m1ga m1ga self-assigned this Aug 29, 2024
@m1ga m1ga added the android label Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@m1ga m1ga

Labels
android bug needs triage This issue hasn't been reviewed by maintainers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(android): webview fill property tidev/titanium-sdk
2 participants
@m1ga @Informate