diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 609bde9fed..9295e7254f 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -227,7 +227,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog](./images/blazor-dialog.png) N> * In the dialog control, max-height is calculated based on the dialog target element height. If the **Target** property is not configured, the **document.body** is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. @@ -260,7 +261,8 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Prerender Blazor Dialog](./images/blazor-prerender-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png) ## Modal Blazor dialog @@ -330,7 +332,8 @@ The Dialog header can be enabled by adding the header content as text or HTML co {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Header](./images/blazor-dialog-header.png) ## Render Blazor Dialog with buttons @@ -387,7 +390,8 @@ By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.B {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog). diff --git a/blazor/dialog/getting-started.md b/blazor/dialog/getting-started.md index 2c84a0f593..f2bdef622c 100644 --- a/blazor/dialog/getting-started.md +++ b/blazor/dialog/getting-started.md @@ -157,7 +157,8 @@ Add the Syncfusion® Blazor Dialog component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog](./images/blazor-dialog.png) N> * In the dialog control, max-height is calculated based on the dialog target element height. If the **Target** property is not configured, the **document.body** is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. @@ -190,7 +191,8 @@ The dialog component is maintained in the DOM after hiding the dialog when the [ {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Prerender Blazor Dialog](./images/blazor-prerender-dialog.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png) ## Modal Blazor dialog @@ -260,7 +262,8 @@ The Dialog header can be enabled by adding the header content as text or HTML co {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Header](./images/blazor-dialog-header.png) ## Render Blazor Dialog with buttons @@ -317,7 +320,8 @@ By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.B {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png) ## See also