Alignment issue in multi column dropdown list

[KINS]

I have used dropdown control with multi column field.I have an alignment issue in multi column dropdown.please check below screencast and below code for your reference.

Screencast:-

https://www.screencast.com/t/1NiC5nUrE

Code:-

<div class="col-sm-12 col-md-6 col-lg-6">

                                <SfDropDownList @ref="@ddlObj" DataSource="@srfSetups" @bind-Value="@srfReviewSetup.SrfID" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" AllowFiltering="true" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SrfNo")" FloatLabelType="@FloatLabelType.Auto">

                                    <DropDownListEvents TValue="int" TItem="SrfSetup" Filtering="@OnFilter" ValueChange="OnChange"></DropDownListEvents>

                                    <DropDownListTemplates TItem="SrfSetup">

                                        <ItemTemplate Context="sampledet">

                                            @{

                                                        var sampledets = (sampledet as SrfSetup);

                                            }

                                            <div class="row ml-md-2">

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    @(sampledets.SrfNo)

                                                </div>

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    @(sampledets.BuyerStyleNo)

                                                </div>

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    @(sampledets.BuyerName)

                                                </div>

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    @(sampledets.ProductName)

                                                </div>

                                            </div>

                                        </ItemTemplate>

                                        <HeaderTemplate>

                                            <div class="row ml-md-2">

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    SrfNo

                                                </div>

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    BuyerStyleNo

                                                </div>

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    Buyer

                                                </div>

                                                <div class="col-sm-12 col-md-6 col-lg-3 border p-2">

                                                    Product

                                                </div>

                                            </div>

                                        </HeaderTemplate>

                                    </DropDownListTemplates>

                                    <DropDownListFieldSettings Value="SrfID" Text="SrfNo"></DropDownListFieldSettings>

                                    <ValidationMessage For="@(() => srfSetup.SrfID)" />

                                </SfDropDownList>

                            </div>

[Deepak Ramakrishnan]

Hi Kins, 

Greetings from Syncfusion support. 

We are currently working on your requirement , And we will update the possibilities in two business days ( 13^th,September 2021) . We appreciate your patience until then. 

Thanks, 

Deepak R. 

[KINS]

ok thanks.

please check the exact requirement in attached file

Attachment: Untitled_9bd61e42.zip

[Berly Christopher]

Hi Kins, 

  

As we mentioned earlier, we will check and update the details on 13^th September 2021. We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[KINS]

Is it possible to get reply today ??

[Deepak Ramakrishnan]

Hi Kins, 

 

Thanks for your patience. 

 

We have created a sample based on your requirement , Please find the below highlighted code and  sample link for reference. 

 

[snapshot] 

 

 

  

<style> 

<style> 

    .headertable { 

        background-color: #80ff00; 

    } 

    table{ 

        width: 431px; 

    } 

 

    td { 

        width: 30%; 

        border: 1px solid black; 

    } 

    .e-content.e-dropdownbase { 

        padding: 0px 0 !important; 

    } 

</style> 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/168640/ze/BlazorApp1413283729 

  

Thanks, 

Deepak R. 

[KINS]

Thanks

and sorry for late reply..

Please check my comments in below 

[Deepak Ramakrishnan]

Hi Kins,  

 

Thanks for the update. 

 

We couldn’t find any comments in last update . We request you to update the query again to proceed further in our end. 

 

Thanks, 

Deepak R 

[KINS]

Sorry 

The table column width should be Autowidth based on value.

[Deepak Ramakrishnan]

Hi Kins, 

 

Thanks for your update. 

 

You can modify the each column based on the provided field values length. If you modify the table data based on the content provided generically the row partition get misaligned based on the content length. So we suggest you to modify the styles as like below highlighted code . 

 

<style> 

  td { 

        border: 1px solid black; 

    } 

    td.slno 

    { 

        width: 10%; 

    } 

    td.empinfo 

    { 

        width: 40%; 

    } 

    td.photo 

    { 

        width: 52%; 

    } 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/168640/ze/BlazorApp1-1756834311 

 

Thanks, 

Deepak R.