Blazorise
Blazorise copied to clipboard
Published
20 hours ago •
Megabit
Megabit
Blazorise Select component List long text issue
I'm beginner to Blazorise and I used the Select component, so when i using the long text in for select list, the select list not showing correctly , please look at the attached image. any solution for this to wrap the long text?
Thanks
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="int">
<SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>
I cannot reproduce it.
Can you inspect in dev tools and see if any style is interfering with the select element?
I cannot reproduce it.
Can you inspect in dev tools and see if any style is interfering with the select element?
Hi , I updated the question, issue appear in following ColumnSize="ColumnSize.Is4. mode
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="int">
<SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>
It still works
Any chance you could post a whole markup? I suspect you have the wrong structure.
Any chance you could post a whole markup? I suspect you have the wrong structure.
here the code
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="string" Size="Size.Small">
<SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>
No, I meant the entire page markup. here the code
<ModalContent Centered Size="ModalSize.Fullscreen">
<ModalHeader>
<ModalTitle>Advanced Search</ModalTitle>
<CloseButton />
</ModalHeader>
<ModalBody>
<EditForm Model="@model" OnValidSubmit="@ValidFormSubmitted">
<Card Class="mt-0" Style="background: #e7f1ff;">
<CardBody>
<p><Span Class="txt-hash">#</Span> Parties </p><hr />
<Div>
<Fields>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Assignment number</FieldLabel>
<TextEdit @bind-Text="@model.AssignmentNo" Placeholder="Type here" Size="Size.Small">
</TextEdit>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Client name</FieldLabel>
<TextEdit @bind-Text="@model.ClientName" Placeholder="Type here" Size="Size.Small">
</TextEdit>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Practice</FieldLabel>
<Select TValue="string" Size="Size.Small" >
<SelectItem Value="string.Empty" @bind-SelectedValue="@model.SectorsId">Please Select..</SelectItem>
@foreach (var item in sectors)
{
<SelectItem Value="item.Id.ToString()">@item.Name</SelectItem>
}
</Select>
</Field>
</Fields><Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="string" Size="Size.Small">
<SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
<SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>
</Div>
<Div>
<Fields>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Sheffield Haworth entity</FieldLabel>
<Select TValue="string" Size="Size.Small">
<SelectItem Value="string.Empty" @bind-SelectedValue="@model.SheffieldHaworthEntityId">Please Select..</SelectItem>
@foreach (var item in sheffieldEntities)
{
<SelectItem Value="item.Id.ToString()">@item.Name</SelectItem>
}
</Select>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel> Region</FieldLabel>
<Select TValue="string" Size="Size.Small">
<SelectItem Value="string.Empty" @bind-SelectedValue="@model.OriginId">Please Select..</SelectItem>
@foreach (var item in OriginList)
{
<SelectItem Value="item.Id">@item.Name</SelectItem>
}
</Select>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel> Status</FieldLabel>
<Select TValue="int" Size="Size.Small" @bind-SelectedValue="@model.Status">
<SelectItem Value="0">Please Select..</SelectItem>
@foreach (var itm in state)
{
<SelectItem Value="@itm.Key" Label="@itm.Value"></SelectItem>
}
</Select>
</Field>
</Fields>
</Div>
</CardBody>
</Card>
<Card Class="mt-3" Style="background: #e7f1ff;">
<CardBody>
<p><Span Class="txt-hash">#</Span> Contract Dates </p><hr />
<Div>
<Fields>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Remaining term</FieldLabel>
<TextEdit Placeholder="Type here" @bind-Text="@model.RemainingTerm" Size="Size.Small">
</TextEdit>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Expiration Date</FieldLabel>
@*<Addons>
<Addon AddonType="AddonType.Body">
<DatePicker @ref="@datePicker" TValue="DateTime?" Placeholder="Select date..." Size="Size.Small" />
</Addon>
<Addon AddonType="AddonType.End">
<Button Color="Color.Light" Clicked="@(()=>datePicker.ToggleAsync())">
<Icon Name="IconName.CalendarDay" />
</Button>
</Addon>
</Addons>*@
<SfDatePicker TValue="DateTime?" @bind-Value="@model.ExpiryDate">
<DatePickerEvents TValue="DateTime?"></DatePickerEvents>
</SfDatePicker>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
</Field>
</Fields>
</Div>
</CardBody>
</Card>
<Card Class="mt-3" Style="background: #e7f1ff;">
<CardBody>
<p><Span Class="txt-hash">#</Span> Internal Reference </p><hr />
<Div>
<Fields>
@* <Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Contract type</FieldLabel>
<TextEdit Placeholder="Type here" Size="Size.Small">
</TextEdit>
</Field>*@
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Practice</FieldLabel>
<Select TValue="string" Size="Size.Small" @bind-SelectedValue="@model.SectorsId">
<SelectItem Value="string.Empty">Please Select..</SelectItem>
@foreach (var item in sectors)
{
<SelectItem Value="item.Id.ToString()">@item.Name</SelectItem>
}
</Select>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Office</FieldLabel>
<TextEdit @bind-Text="@model.Office" Placeholder="Type here" Size="Size.Small"></TextEdit>
</Field>
</Fields>
</Div>
</CardBody>
</Card>
<Card Class="mt-3" Style="background: #e7f1ff;">
<CardBody>
<p><Span Class="txt-hash">#</Span> Off-Limits </p><hr />
<Div>
<Fields>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Off-Limits</FieldLabel>
<Select TValue="int" Size="Size.Small" @bind-SelectedValue="@model.OffLimit">
<SelectItem Value="0">Please Select..</SelectItem>
@foreach (var item in OffLimitList)
{
<SelectItem Value="item.Id">@item.Name</SelectItem>
}
</Select>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Off-Limits overview</FieldLabel>
<TextEdit @bind-Text="@model.OffLimitOverReview" Placeholder="Type here" Size="Size.Small">
</TextEdit>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
</Field>
</Fields>
</Div>
</CardBody>
</Card>
<Card Class="mt-3" Style="background: #e7f1ff;">
<CardBody>
<p><Span Class="txt-hash">#</Span> Any Other Services </p><hr />
<Div>
<Fields>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel>Cross-sell services</FieldLabel>
<Select TValue="string" Size="Size.Small" @bind-bind-SelectedValue="@model.ProductsId">
<SelectItem Value="string.Empty">Please Select..</SelectItem>
@foreach (var item in products)
{
<SelectItem Value="item.Id">@item.Name</SelectItem>
}
</Select>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<FieldLabel> Other</FieldLabel>
<TextEdit @bind-Text="@model.Other" Placeholder="Type here" Size="Size.Small">
</TextEdit>
</Field>
<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
</Field>
</Fields>
</Div>
</CardBody>
</Card>
@* <Field Flex="Flex.JustifyContent.End " Class="mt-3">
<Div>
<Button Color="Color.Danger" @onclick="() => OnClickCancel()" ><Icon Name="@("fa-times-circle")" /> Cancel</Button>
<Button Color="Color.Primary" ></Button>
</Div>
</Field>*@
<ModalFooter>
<Button Color="Color.Secondary" @onclick="() => OnClickCancel()">Close</Button>
<Button Color="Color.Primary" Clicked="@HideModal" Type="ButtonType.Submit"><Icon Name="@("fa-search")" /> Search</Button>
</ModalFooter>
</EditForm>
</ModalBody>
</ModalContent>
</Modal>
```
It still works
Any chance you could post a whole markup? I suspect you have the wrong structure.
Hi, yes its work but, too long , can wrap it like as Lorem Ipsum is simply dummy text of the printing and Ipsum....
I guess you will need to adjust it with some custom CSS.
BTW, I have noticed you have some invalid HTML.
- SelectedValue should go to Select component
- Have duplicate
bind
I guess you will need to adjust it with some custom CSS.
BTW, I have noticed you have some invalid HTML.
- SelectedValue should go to Select component
- Have duplicate
bind
HI, Thank you for the guidance and valuable time, I'll try to wrote custom CSS
Hi, @Sparkmb21 wants to achieve multiline select items but to my knowledge select options don't accept css styling (browsers ignore it). I suggested to use Dropdown instead. Linking the stackoverflow question https://stackoverflow.com/questions/73471152/blazorise-select-component-list-long-text-issue. @stsrki do you think there is a better approach?
Maybe DropdownList. But it doesn't have any validation. The purpose of the dropdown is to be a menu, not an input element.
Maybe you can truncate the values to a specific character length using string.Substring method
<Select TValue="int">
<SelectItem Value="1">@("Long text...........................".Substring(0, 20))</SelectItem>
</Select>
You can also try our Autocomplete. It's kind of a Select on steroids. :)
