1. Feedback
  2. Blazor
  3. 27630

Welcome to the Blazor feedback portal. We’re happy you’re here! If you have feedback on how to improve the Blazor, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

While opening the TimePicker popup, “e-time-overflow” class will be added to the body element without space

If we rendered the DateTimePicker component inside the Modal Dialog, while opening the TimePicker popup from the component “e-time-overflow” class will be added to the body element without space. Due to this, popup will not be displayed correctly in the center of view port. This issue occurred only in the mobile mode.


<div id="target" class="col-lg-12 control-section" style="height:100%">

    <div>

        @if (this.ShowButton)

        {

            <button class="e-btn" @onclick="@OpenDialog">Open Dialog</button>

        }

    </div>

    <SfDialog Height="75%" Width="435px" ShowCloseIcon="true" IsModal="true" @bind-Visible="Visibility">

        <DialogTemplates>          

            <Content>

                <div class="dialogContent">

                  <SfDatePicker TValue="DateTime?"></SfDatePicker>

                    <SfDateTimePicker TValue="DateTime?"></SfDateTimePicker>

                    <SfTimePicker TValue="DateTime?"></SfTimePicker>

                </div>

            </Content>          

        </DialogTemplates>

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

    </SfDialog>

</div>

Empty



Issue reproducing sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server-1304159404


Replication procedure:


1. Run the attached sample

2. Change the browser mode from desktop to mobile in the emulator

3. Now, open the TimePicker popup from the DateTimePicker component,

4. We can see the “e-time-overflow” class will be added to the previous body element without space.

5. Now, close the popup. The “e-time-overflow” class will not be removed from the body element.