Dropdown Multiple Template Checkboxes Wrapping

I have a Dropdown with Multiple set to true that works great when I use a single value for the TextProperty. However, I need to show 2 strings within the dropdown for each item. Using Template this makes it easy. The problem is, when Multiple is enabled, the checkbox is on one row and the 2 values in the Template are below it (as opposed to next to it.) This is my problem. Can I have a single row of a checkbox and my 2 values. This is my code:

<RadzenDropDown Multiple="true"
                AllowClear="true"
                AllowFiltering="true"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                Placeholder="Select..."
                @bind-Value="SelectedClaimIds"
                Data="availablePerformanceClaims"
                TextProperty="Name"
                ValueProperty="Id"
                TValue="IEnumerable<int>"
                Class="w-100">
  <Template Context="claim">
    <div class="d-flex justify-content-between">
      <span style="width: 70%;">@($"{claim.Name}")</span>
      <span style="width: 30%;">@($"{claim.Version}")</span>
    </div>
  </Template>
</RadzenDropDown>

I thought it might be the style="width: 70%" I was adding but dumbing those values down made no difference.

Here is an image of what it looks like:
image

What I need (also) is that the 3rd/last value be left-aligned near the right side. This is where flex would come into play or width percentages.

With a bit of styling, I was able to come up with a (hopefully is just temporary) solution:

.rz-multiselect-item {
  display: flex !important;
  justify-content: flex-start !important;

  span {
    width: 100%;
  }
}

Which gives me the following output (that I like):
image

1 Like