New to Telerik UI for Blazor? Start a free 30-day trial
Resize Signature with the Browser
Updated over 6 months ago
Environment
| Product | Signature for Blazor |
Description
This KB article answers the following questions:
- How to use percentage value for the Signature
WidthandHeight? - How to resize the Signature component together with the browser window viewport?
- How to change the Signature dimensions relative to the screen size?
- How to use flexible Signature size, instead of hard-coded pixel values?
Solution
The Signature component uses a drawing <canvas>. Relative sizes with automatic HTML element resizing are not supported and that's why the component requires pixel dimensions.
A possible workaround is to change the component Width and Height at runtime, depending on the size of browser window viewport.
- Use
JSInteropto obtain the user screen size. - Calculate and set the desired Signature
WidthandHeight. - If you need to resize the Signature on browser window resize, use debouncing in the JavaScript event handler for better Blazor app performance.
- Remove the Signature from the page temporarily while changing its size.
Resize Signature with the browser viewport
@inject IJSRuntime js @implements IDisposable @if (ShowSignature) { <TelerikSignature @bind-Value="@SignatureValue" Width="@SignatureWidth" Height="@SignatureHeight" Maximizable="false"> </TelerikSignature> } @* Move JavaScript code to a separate JS file in production! *@ <script suppress-error="BL9992">// var dotNet; var timeoutId; var resizeDebounceDelay = 300; function saveDotNetRef(dotNetRef) { dotNet = dotNetRef; window.addEventListener("resize", onWindowResize); } function onWindowResize() { clearTimeout(timeoutId); timeoutId = window.setTimeout(function() { dotNet.invokeMethodAsync("RecreateSignature", window.innerWidth, window.innerHeight); }, resizeDebounceDelay); } function getViewportSize() { return { Width: window.innerWidth, Height: window.innerHeight }; } //</script> @code { private string SignatureValue { get; set; } = string.Empty; private string SignatureWidth { get; set; } = "600px"; private string SignatureHeight { get; set; } = "400px"; private bool ShowSignature { get; set; } = true; // Replace <__Main> with your Razor class name. private DotNetObjectReference<__Main>? DotNetRef { get; set; } [JSInvokable("RecreateSignature")] public void RecreateSignature(int viewportWidth, int viewportHeight) { // Signature bug related to Width and Height changes // https://feedback.telerik.com/blazor/1588545 ShowSignature = false; // StateHasChanged is necessary, because this is not an EventCallback. StateHasChanged(); // Optionally reset the Signature Value. //SignatureValue = string.Empty; SignatureWidth = $"{viewportWidth - 60}px"; SignatureHeight = $"{viewportHeight - 60}px"; ShowSignature = true; StateHasChanged(); } protected override void OnInitialized() { DotNetRef = DotNetObjectReference.Create(this); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // Ensure the HTML is ready. await Task.Delay(1); await js.InvokeVoidAsync("saveDotNetRef", DotNetRef); var viewportSize = await js.InvokeAsync<ViewportSize>("getViewportSize"); RecreateSignature(viewportSize.Width, viewportSize.Height); } await base.OnAfterRenderAsync(firstRender); } public void Dispose() { DotNetRef?.Dispose(); } public class ViewportSize { public int Width { get; set; } public int Height { get; set; } } }