1. Home
  2. Forum
  3. Blazor
  4. Ask about the position and how to close it.

Ask about the position and how to close it.

스크린샷 2024-08-01 140459.png

1.photo

localhost_44393_sample (2) (1).jpeg


2. photo

12.jpg

3. photo


There are two issues.

1. If I click the button in the first picture, I want to make the Dialog location visible right underneath, is there a solution?

2. I want Dialog to close automatically when I click outside of Dialog, is there a way?


8 Replies
UD UdhayaKumar Duraisamy Syncfusion Team August 5, 2024 04:40 PM UTC

Query 1: If I click the button in the first picture, I want to make the Dialog location visible right underneath, is there a solution?


The Blazor Dialog can be positioned using the DialogPositionData property by providing the X and Y coordinates. It can be positioned inside the target of the container or <body> of the element based on the given X and Y values. Please refer to the below shared documentation for more information.


Documentation: Positioning in Blazor Dialog Component | Syncfusion


Query 2: I want Dialog to close automatically when I click outside of Dialog, is there a way?


You can use the Modal Dialog for your requirement. By setting the IsModal property to true, you can enable the Modal Dialog. Additionally, you can use the OnOverlayModalClick event, which triggers when the overlay of the dialog is clicked. In the OnOverlayModalClick event, you can call the HideAsync method to close the dialog when the user clicks outside of it. Please refer to the documentation below for more details:


?? ??? replied to UdhayaKumar Duraisamy August 6, 2024 12:15 AM UTC

It's an additional reactive web in the first question, and the component should also be located reactive, but if you give me a position value, it's fixed, is there any other way?


?? ??? replied to UdhayaKumar Duraisamy August 6, 2024 02:56 AM UTC

두 번째 질문에서 isModal을 true로 설정하면 뒤에 있는 화면을 클릭할 수 없습니다. 다른 방법이 있나요?

이미지_4200_1722912967250


UD UdhayaKumar Duraisamy Syncfusion Team August 6, 2024 03:39 PM UTC

To assist you more effectively, we request that you provide the following additional details:


  • A detailed description of the requirement along with the use case scenario.

  • Please share a Dialog component code snippet. This will help us understand how you are integrating and handling the component in your project.

  • A video illustration of the requirement.


This information will be very helpful in helping us achieve your requirement as quickly and efficiently as possible.


?? ??? replied to UdhayaKumar Duraisamy August 12, 2024 04:04 AM UTC 



<div>


<SfDialog CssClass="popAlarm" Width="400px" ShowCloseIcon="true" @bind-Visible="Visibility" IsModal="true">


<DialogEvents OnOverlayModalClick="@OnOverclick" />


<DialogPositionData X="right" Y="top" />


<DialogTemplates>


<Content>


<SfTab CssClass="fixed-header">


<TabItems>


<TabItem>


<ChildContent>


<TabHeader Text="@($"미확인 ({allCnt})")"></TabHeader>


</ChildContent>


<ContentTemplate>


<SfTab @ref="obj_sftab" CssClass="fixed-header">


<TabEvents Selecting="selectTab"/>


<TabItems>


<TabItem>


<ChildContent>


<TabHeader Text="@($"오류 ({vCnt_en})")"></TabHeader>


</ChildContent>


<ContentTemplate>


<SWDT.Pages.Common.Pg_AlarmList @ref="pg_AlarmList_en" v_status="e" v_read="N" />


</ContentTemplate>


</TabItem>


<TabItem>


<ChildContent>


<TabHeader Text="@($"경고 ({vCnt_wn})")"></TabHeader>


</ChildContent>


<ContentTemplate>


<SWDT.Pages.Common.Pg_AlarmList @ref="pg_AlarmList_wn" v_status="w" v_read="N" />


</ContentTemplate>


</TabItem>


</TabItems>


</SfTab>


</ContentTemplate>


</TabItem>


<TabItem>


<ChildContent>


<TabHeader Text="확인" />


</ChildContent>


<ContentTemplate>


<SWDT.Pages.Common.Pg_AlarmList @ref="pg_AlarmList" v_read="Y"/>


</ContentTemplate>


</TabItem>


</TabItems>


</SfTab>


<div class="allRefresh">


<button @onclick="OnRefresh">새로고침</button>


</div>


<div class="allRead">


<button @onclick="OnsuccessMesage">모두읽음</button>


</div>


</Content>


</DialogTemplates>


<DialogAnimationSettings Effect="animationEffect"></DialogAnimationSettings>


</SfDialog>


</div>


This is the code for the problem.


There are two problems that need to be solved.




1. If you press the button, the Dialog under the button will be positioned.


2. If you click away from the Dialog, the Dialog should be closed automatically.



That's about it.


UD UdhayaKumar Duraisamy Syncfusion Team August 19, 2024 08:29 AM UTC

Query 1: If you press the button, the Dialog under the button will be positioned.


As we suggested in our initial response, you can modify the position of the Dialog using the DialogPositionData property. By setting the X and Y coordinates, you can control the Dialog's position as demonstrated in the code snippet below. The X and Y coordinates support offset values, allowing you to adjust the positioning based on your specific requirements.


<div>

    <div id="target">

        <SfButton ID="open-Btn" Content="Open Dialog" @onclick="@OpenDialog"></SfButton>

    </div>

    <SfDialog ID="defaultDialog" Target="#target" Width="400px" IsModal="true" ShowCloseIcon="true" @bind-Visible="@Visibility">

        <DialogTemplates>

            <Header>

                <span>Set the X and Y coordinates</span>

            </Header>

            <Content>

               

                <SfNumericTextBox ID="X" Placeholder="X" @bind-Value="@Xvalue" Step="1" Min="0" Max="1000"></SfNumericTextBox>

                <br />

                <br />

                <SfNumericTextBox ID="Y" Placeholder="Y" @bind-Value="@Yvalue" Step="1" Min="0" Max="1000"></SfNumericTextBox>

            </Content>

        </DialogTemplates>

        <DialogPositionData X="@Xvalue.ToString()" Y="@Yvalue.ToString()"></DialogPositionData>

        <DialogEvents OnOpen="@BeforeDialogOpen" Closed="@DialogClosed" OnOverlayModalClick="@OnOverclick"></DialogEvents>

    </SfDialog>

</div>

 

<style>

    #target {

        min-height: 450px;

        height: 100%;

    }

    #open-Btn{

        margin: 100px auto auto 100px;

    }

</style>

 

@code {

    private int? Xvalue = 123;

    private int? Yvalue = 150;

    private bool Visibility { get; set; } = false;

 

    private void OnOverclick()

    {

        this.Visibility = false;

    }

 

    private void OpenDialog()

    {

        this.Visibility = true;

    }

}


Query 2: If you click away from the Dialog, the Dialog should be closed automatically.


As previously mentioned, you can achieve this behavior by using the Modal Dialog. To ensure that clicking outside the Dialog closes it, you can modify the background by applying the e-dlg-overlay class with a transparent background. Below is a sample implementation:

<style>

    .e-dlg-overlay{

        background-color: transparent;

    }

</style>


Sample: https://blazorplayground.syncfusion.com/embed/hjVJtFskgNTeSGEZ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5 





?? ??? replied to UdhayaKumar Duraisamy August 22, 2024 08:06 AM UTC

Is there a way to move on like that if I go to another resolution?

When the resolution changes, it looks cut off like the picture


UD UdhayaKumar Duraisamy Syncfusion Team August 25, 2024 11:59 AM UTC

In your scenario, you'll need to dynamically calculate the Button element's position based on your specific requirements and then set the DialogPositionData's X and Y values accordingly.

For more information on how to calculate element positions in Blazor, you can refer to the following resources:



These references should help you determine the exact position of the elements in your application.


Loader.
Up arrow icon