dropdown template in small screen

[Indra]

im using your example in designing dropdown template in auto complete https://blazor.syncfusion.com/documentation/dropdown-list/templates/

but when i implement it. its working perfectly in normal screen. but in mobile or small laptop screen, the text cannot be wrap in one cell. i already using table-layout : fixed and word-wrap : break-word or text-wrap or overflow-wrap, it still not working. 

the text continue on and not breaking. screenshoot attached

Attachment: Dropdown_content_wont_break_ed1d8133.rar

[Berly Christopher]

Hi Indra, 

  

Greetings from Syncfusion support. 

  

Based on the provided screenshot, you have used multi columns in the DropDownList popup. We have provided the multicolumn style class in the built-in Syncfusion Blazor theme files. Here, we need to give the multicolumn root class name “e-multi-column” in the CssClass API, like in the following code example. This will help you to achieve the requested requirement in your end.  

  

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Data 

 

<SfDropDownList TValue="string" Width="300px" TItem="Countries" Placeholder="e.g. Australia" CssClass="e-multi-column" DataSource="@Country"> 

    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings> 

    <DropDownListTemplates TItem="Countries"> 

        <HeaderTemplate> 

            <table><tr><th>Name</th><th>Position</th></tr></table> 

        </HeaderTemplate> 

        <ItemTemplate> 

            <table><tbody><tr> 

    <td>@((context as Countries).Name)</td> 

    <td >@((context as Countries).Job)</td> 

    <td >@((context as Countries).Job)</td> 

    <td >@((context as Countries).Name)</td> 

</tr> </tbody></table> 

        </ItemTemplate> 

    </DropDownListTemplates> 

</SfDropDownList> 

@code{ 

    public class Countries 

    { 

        public string Name { get; set; } 

        public string Code { get; set; } 

        public string Job { get; set; } 

 

    } 

    List<Countries> Country = new List<Countries> 

{ 

       new Countries() { Name = "AustraliaAustraliaAustralia", Code = "AU",Job= "Team Lead" }, 

        new Countries() { Name = "Bermuda", Code = "BM",Job="Developer"  }, 

        new Countries() { Name = "Canada", Code = "CA",Job="CEO"  }, 

        new Countries() { Name = "Cameroon", Code = "CM" ,Job="HR" }, 

        new Countries() { Name = "Denmark", Code = "DK",Job="Product Manager"  }, 

        new Countries() { Name = "France", Code = "FR",Job="Developer"  }, 

        new Countries() { Name = "Finland", Code = "FI",Job="Team Lead"  }, 

        new Countries() { Name = "Germany", Code = "DE",Job="Product Manager"  }, 

        new Countries() { Name = "Greenland", Code = "GL",Job="Developer"  }, 

        new Countries() { Name = "Hong Kong", Code = "HK",Job="CEO"  }, 

        new Countries() { Name = "India", Code = "IN",Job="HR"  }, 

        new Countries() { Name = "Italy", Code = "IT",Job="Team Lead"  }, 

        new Countries() { Name = "Japan", Code = "JP",Job="Developer"  }, 

        new Countries() { Name = "Mexico", Code = "MX",Job="Product Manager"  }, 

        new Countries() { Name = "Norway", Code = "NO",Job="HR"  }, 

        new Countries() { Name = "Poland", Code = "PL",Job="Team Lead"  }, 

        new Countries() { Name = "Switzerland", Code = "CH",Job="Product Manager"  }, 

        new Countries() { Name = "United Kingdom", Code = "GB",Job="CEO"  }, 

        new Countries() { Name = "United States", Code = "US",Job="Developer"  }, 

        }; 

 

} 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL_MultiColumns_163660-542090797  

  

Else, if we want to use template alone in the sample, we need to configure the popup element styles based on our requirement. If yes, please share the details along with issue reproducing code or sample that will help us to proceed further our end. 

  

Regards, 

Berly B.C 

[Indra]

Im using your example and suggestion. but the text didnt break down, it just replace by three dots at the end.

i wanna see all the text in every cell even if one cell have longer text than the other without three dots, like text wrap that break it self.

Attachment: AutocompleteDropdown_47d152bb.rar

[Berly Christopher]

Hi Indra, 

  

When we used multi column support, overflow text will be showcased with ellipsis (three dots). So, we have modified the sample based on the requested requirement and attached it below, 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDown_App-2079394600  

  

<style> 

    .e-multi-column.e-ddl.e-popup.e-popup-open { 

        text-overflow: unset !important; 

      

    } 

    .e-dropdownbase .e-list-item { 

        white-space: unset !important; 

        overflow-wrap: break-word !important; 

        text-overflow: unset !important; 

    } 

    .e-multi-column.e-ddl.e-popup.e-popup-open td { 

        padding-right: 0px !important; 

        text-indent: 0px !important; 

    } 

    .name { 

        padding-left: 10px; 

    } 

</style> 

 

  

Screenshot: 

 

  

Regards, 

Berly B.C