mirror of
https://github.com/tabler/tabler.git
synced 2026-08-05 19:03:18 +04:00
Fix signature pad clear button accessibility and canvas height drift (#2789)
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
.signature {
|
||||
--#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
|
||||
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
|
||||
--#{$prefix}signature-canvas-height: 12.5rem;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
padding: var(--#{$prefix}signature-padding);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
@@ -14,4 +15,8 @@
|
||||
display: block;
|
||||
cursor: crosshair;
|
||||
width: 100%;
|
||||
// A fixed height is required: without it the canvas height comes from its own
|
||||
// width/height attributes, which `resizeCanvas()` rewrites on every resize —
|
||||
// each run then measures a different `offsetHeight` and the pad drifts.
|
||||
height: var(--#{$prefix}signature-canvas-height);
|
||||
}
|
||||
|
||||
@@ -50,8 +50,6 @@ ${clearSnippet}
|
||||
function resizeCanvas() {
|
||||
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
||||
|
||||
console.log(canvas.offsetWidth, canvas.offsetHeight);
|
||||
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
canvas.getContext("2d").scale(ratio, ratio);
|
||||
@@ -72,9 +70,9 @@ ${extraSnippet}
|
||||
{
|
||||
clear && (
|
||||
<div class="position-absolute top-0 end-0 p-2">
|
||||
<div class="btn btn-icon" id={`signature-${id}-clear`} title="Clear signature" data-bs-toggle="tooltip">
|
||||
<button type="button" class="btn btn-icon" id={`signature-${id}-clear`} title="Clear signature" data-bs-toggle="tooltip">
|
||||
<Icon name="trash" />{' '}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user