1. Feedback
  2. Blazor
  3. 27155

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

Unable to align the autocontrol to resemble grid

We are trying to customise the auto complete control, to look similar to the grid, header row and detail row. The header and details are implemented in a simple table (div's with row and form-group classes). However, when the control displays 5 or less rows of detail, the columns are no longer aligned, as the scrollbar doesn't appear. When scroll bar appears the columns for header and detail become properly aligned. Since we do not control the wrapping container we can't figure out how to correct the css to align.

Sample code:

                        <div class="form-group col">

                            <SfAutoComplete TValue="string" TItem="TraineeFinderDTO" @bind-Value="@ViewModel.SearchTraineeText" OnChange="SelectTrainee"

                                            DataSource="@ViewModel.FilteredTraineeList" SuggestionCount="100" AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

                                <AutoCompleteTemplates TItem="TraineeFinderDTO">

                                    <ItemTemplate>

                                        @{

                                            var trainee = (context as TraineeFinderDTO);


                                            <div class="row e-row e-auto-complete-grid-data-row">

                                                @foreach (string colValue in new string[] { trainee.MilitaryId, trainee.LocalizedFirstName, trainee.LocalizedLastName, trainee.BranchName })

                                                {

                                                    <div class="col e-rowcell" role="gridcell"><span>@colValue</span></div>

                                                }

                                            </div>

                                        }

                                    </ItemTemplate>

                                    <HeaderTemplate>

                                        <div class="row e-gridheader e-columnheader e-auto-complete-grid-header-row">

                                            @foreach (string colName in new string[] { "Military ID", "First Name", "Last Name", "Branch" })

                                            {

                                                <div class="col e-headercell e-leftalign e-mousepointer" role="columnheader">

                                                    <span class="e-headertext">@Localize[colName]</span>

                                                </div>

                                            }

                                        </div>

                                    </HeaderTemplate>

                                    <NoRecordsTemplate>

                                        <span class='norecord'>@Localize["NoTraineesFound"]</span>

                                    </NoRecordsTemplate>

                                </AutoCompleteTemplates>

                                <AutoCompleteFieldSettings Value="FilteredDisplayName"></AutoCompleteFieldSettings>

                            </SfAutoComplete>

                        </div>

Ciao!

Jim Shaw