We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
I have a dialog that I want to display with different widths depending on the user's screen:
For example:
However, it seems that the with is calculated when displayed using the offsets and the width - which doesn't allow for media queries or automatic centering.
Is there a way to use standard css centering/positioning styles? I don't understand why this is being calculated on the fly. This does not seem like a great way to do this since these things are being hardcoded into the rendered page - not allowing for css to do things like re-size, re-position, etc.
Additionally, if the browser is resized, the modal is now in the wrong place.
Am I misunderstanding the component's properties?
Hi Tony,
We suggest you refer the below documentation to know more about the positioning the dialog component.
Documentation: https://blazor.syncfusion.com/documentation/dialog/positioning
Regards,
Sureshkumar P
I have read that. However, that is fixed/static positioning. This do not allow for different browser sizes or re-sizing,
Or the ability to say:
small screens: 100%
Large screens: 800px
Hi Tony,
Your requirement to dynamically change the width of the Dialog can be achieved by using the Width property and RefreshPositionAsync method of the Dialog control. Please find the code snippet and sample for your reference.
private async Task AdjustDialog() { if (Width == "600px") { Width = "1000px"; } else { Width = "600px"; } await Task.Delay(50); await Dialog.RefreshPositionAsync(); } |
Regards,
Priyanka K
Attachment: BlazorDialog2210431584_(2)_682f6fc6.zip
Thanks for the info. However, I think it makes sense to let the browser do all the heavy lifting and do things that it's been designed to do.
Could this functionality be updated to allow sizing and positioning to be controlled with CSS instead of manually sizing and refreshing?
Hi Tony,
If you wish to refresh the Dialog Position when the window resizes, you can use the below code for window resizing and refresh the position using the RefreshPositionAsync public method.
Please follow the below steps for window resizing.
Step #1: Refer to the jquery window resize event and refer to the script file.
_Layout.cshtml
<script src=https://code.jquery.com/jquery-3.5.1.slim.min.js integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script> <script src="listener.js"></script> |
Step #2: Create a listener.js file inside the wwwroot folder.
listener.js
// listen for page resize function resizeListener(dotnethelper) { $(window).resize(() => { let browserHeight = $(window).innerHeight(); let browserWidth = $(window).innerWidth(); dotnethelper.invokeMethodAsync('SetBrowserDimensions', browserWidth, browserHeight).then(() => { // success, do nothing }).catch(error => { console.log("Error during browser resize: " + error); }); }); } |
Step #3: Create a BrowserService.cs file using the below code.
using Microsoft.JSInterop; using System; namespace Blazor_Dialog.Pages { public class BrowserService { private IJSRuntime JS = null; public event EventHandler<int> Resize; private int browserWidth; private int browserHeight; public async void Init(IJSRuntime js) { // enforce single invocation if (JS == null) { this.JS = js; await JS.InvokeAsync<string>("resizeListener", DotNetObjectReference.Create(this)); } }
[JSInvokable] public void SetBrowserDimensions(int jsBrowserWidth, int jsBrowserHeight) { browserWidth = jsBrowserWidth; browserHeight = jsBrowserHeight; // For simplicity, we're just using the new width this.Resize?.Invoke(this, jsBrowserWidth); } } }
|
Step #4: Add the above service to the program.cs file.
using Blazor_Dialog.Pages;
builder.Services.AddSingleton<BrowserService>(); |
Step #5: Add this code into the index.razor file.
@code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { Browser.Init(JS); } Browser.Resize += UpdatedBrowserWidth; } protected void UpdatedBrowserWidth(object sender, int width) { Dialog.RefreshPositionAsync(); // Refresh the SfDialog component when window resize }
} |
Regards,
Priyanka K
Attachment: BlazorDialog22139883544_(2)_38b0f530.zip
I understand that there is a work around - and I do appreciate that.
However, I would recommend that this should be reviewed and redesigned. You're asking developers to add a lot of code and dependencies to something that should just work using normal, basic CSS.
Requiring a resize handler and event so that a div is resized when the viewport changes is a really poor way to do this. The performance and energy involved is not needed in 2023 - this is a solved problem.
Truthfully, this concerns me for the rest of the library and components.
Hi Tony,
Thank you for reaching out to us with your question about dynamically setting the width for the SfDialog based on different screen sizes.
To achieve this, you can use the RefreshPositionAsync method to refresh the SfDialog component when changes are made to the Width property. This will allow the dialog to adapt to the new width settings.
If you specifically want the dialog width to adjust based on the screen size, you can set the width in percentage values such as 50% or 80%. By doing so, the dialog will automatically adjust its width according to the available space on the screen.
Alternatively, if you prefer to set a fixed width in pixels for one screen size and use a percentage value for another screen size, you can achieve this by defining different width settings for the SfDialog component using CSS styles.
Regards,
Priyanka K
