Datepicker Layout

[Jonah Coleman]

Any idea why I'm seeing this behavior?

https://screencast-o-matic.com/watch/cYirqPEYYG

It is new with the most recent release.

Code below:

 <div style="margin-bottom:10px">

                <SfButton CssClass="e-unselected" OnClick="ExcelExport" Content="Export"></SfButton>

                <SfButton CssClass="e-unselected" OnClick="@(async () => await theGridView.GroupCollapseAll())" Content="Collapse"></SfButton>

                <SfButton CssClass="e-unselected" OnClick="RefreshEMButtonClick" Content="Refresh EM"></SfButton>

                @if (EmServiceInstance.UserHasPermission($"Edit {GridName} Bottleneck"))

                {

                    <SfButton CssClass="e-unselected" OnClick="KanBan" Content="KanBan"></SfButton>

                    <SfButton CssClass="e-unselected" OnClick="AddItemButtonClick" Content="Add Item"></SfButton>

                }

                <SfButton CssClass="e-unselected" OnClick="CreateTaskButton" Content="Create Task" Disabled="@(!gridItemsAreSelected)"></SfButton>

                <SfCheckBox @ref="tooltipCheckBox" TChecked="bool">Tooltips</SfCheckBox>

            </div>

            <div>

                @{

                    string completionText = "Bid Date";

                    if (!Estimating)

                    {

                        completionText = "Completion Date";

                    }

                    <SfComboBox @ref="@bulkEditTypeCombo" Enabled="@gridItemsAreSelected" AllowCustom="false" Width="90px" TValue="string" TItem="string" Value="@("Row")" DataSource="@(new string[] { "Row", "Target", "Actual" })">

                        <ComboBoxEvents TValue="string" ValueChange="@BulkEditTypeComboOnChange"></ComboBoxEvents>

                    </SfComboBox>

                    <SfComboBox @ref="@bulkEditStepComboBox" @bind-Value="@bulkEditStepValue" Enabled="@gridItemsAreSelected" Width="240px" TValue="string" TItem="string" Placeholder="Step..." DataSource="@ValidSteps.Select(x => x.TextWithNumber).ToList()"></SfComboBox>

                    <SfDatePicker @bind-Value="bulkEditDateValue" Placeholder='@(completionText + "...")' @ref="@bulkEditDatePickerCompletion" Enabled="@gridItemsAreSelected" Width="200px"></SfDatePicker>

                }

                @if (!Estimating)

                {

                    <span>Mat'l Here:</span>

                    <SfCheckBox @bind-Checked="@bulkEditMatlHere" Disabled="bulkEditMatlHereDisabled"></SfCheckBox>

                }

                <SfTextBox @bind-Value="@bulkEditPhase" Enabled="bulkEditPhaseEnabled" Placeholder="Phase Name..." Width="145px"></SfTextBox>

                <SfComboBox @ref="@bulkEditStatusComboBox" @bind-Value="@bulkEditStatusValue" Enabled="@(bulkEditStatusComboBoxEnabled)" Width="150px" TValue="string" TItem="string" Placeholder="Status..." DataSource="@invoiceStatusList.Select(x => x.StatusName)"></SfComboBox>

                <SfButton CssClass="e-unselected" OnClick="BulkEditButton" Content="Apply" Disabled="@(!gridItemsAreSelected)"></SfButton>

            </div>

[Jonah Coleman]

FYI this simple example reproduces it on my system:

<SfDatePicker Width="200px" TValue="DateTime"></SfDatePicker>

<Syncfusion.Blazor.Buttons.SfButton Content="Change View"></Syncfusion.Blazor.Buttons.SfButton>

<Syncfusion.Blazor.Buttons.SfButton Content="Remove Draw"></Syncfusion.Blazor.Buttons.SfButton>

If it makes any difference I am using Bootstrap4.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jonah,

Greetings from Syncfusion Support.

We have seen the attached video. But unfortunately we cannot able to understand what you are trying to report except that you have customized some CSS styles of popup. So kindly share the styles which you referred for layout and exact scenario where you encounter the issue so that we can assist you further.

Thanks,  

Jeyanth.  

[Jonah Coleman]

I haven't customized any CSS- as I said, it worked before the recent release and no longer does.

You can see this behavior in a brand new project, from the Syncfusion template.  Just create a new project, and put this on the Index page:

@using Syncfusion.Blazor.Inputs;

@using Syncfusion.Blazor.Calendars;

<SfDatePicker Width="200px" TValue="DateTime"></SfDatePicker>

<Syncfusion.Blazor.Buttons.SfButton Content="Change View"></Syncfusion.Blazor.Buttons.SfButton>

<Syncfusion.Blazor.Buttons.SfButton Content="Remove Draw"></Syncfusion.Blazor.Buttons.SfButton>

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jonah,

Thanks for your update.

We have tried the same as you mentioned by creating a new project using Syncfusion template and placed the code in index.razor file. Unfortunately, we could not reproduce the issue. We suspect that this issue will be produced if you referred two themes (Say Bootstrap and Highcontrast ). Kindly share the Host.cshtml file if possible thereby we can provide better solution.


 

[Index.razor]

 

 

Screenshot:


 

 

Thanks, 

Jeyanth. 

[Jonah Coleman]

Your last screen shot shows the reported behavior- when you drop down the calendar, the two buttons next to it moved down to the next row!  I'm guessing I did a bad job explaining the problem, sorry about that.

Example attached, but as I mentioned it is shown in your screen shot:

Before dropping:

After dropping you can see the buttons moved down to the next row:

Attachment: Date_Example_c6b7606a.zip

[Jonah Coleman]

Any response to this?  Again, your screenshot shows the reported behavior and I gave a better description of it.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jonah,

Thanks for providing the details. We are validating this issue and update the further details on two business days(04/08/2020)

We appreciate your patience until then.

Regards,
Jeyanth.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jonah,

Thanks for your patience. We considered the reported issue as a bug in our end and the fix for the issue will be included in 2020 Vol2 SP1 release which is expected to roll out on 12^th August 2020. You can track the status of the issue using below feedback link. We appreciate your patience until then.

Feedback Link : https://www.syncfusion.com/feedback/16653

 You can work around it by applying the below CSS style to get rid of this issue.


 

<style> 

    .e-datepicker.e-popup-holder { 

        position: absolute; 

    } 

</style> 

We have modified the sample. Please find the sample below.

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazorApp11659708752 

Regards,
Jeyanth.