Multi Select Alignment Problem

[n/a]

The multi-select is not aligning correctly in the material theme when it is inside a tab strip with floating labels.

 

See code at:  https://stackblitz.com/edit/angular-4tq9po

 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `

      <kendo-tabstrip [tabPosition]="'left'">
    <kendo-tabstrip-tab [title]="'Filters'" [selected]="true">
      <ng-template kendoTabContent>

    <div class="example-wrapper">
      <p>T-shirt size:</p>
     <kendo-floatinglabel style="margin-right:10px; width:275px; " text="Partner">

      <kendo-multiselect kendoMultiSelectSummaryTag
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
        [tagMapper]="tagMapper"
      >
       <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
                <span *ngIf="dataItems.length > 1">
                  {{ dataItems[0].text }} + {{ dataItems.length - 1 }} others
                </span>
                <span *ngIf="dataItems.length == 1">
                  {{ dataItems[0].text }}
                </span>
              </ng-template>
              <ng-template kendoMultiSelectItemTemplate let-dataItem>
                <input type="checkbox" class="k-checkbox"
                       [checked]="isItemSelected(dataItem.text)">
                <label class="k-checkbox-label">{{ dataItem.text }}</label>
              </ng-template>
      </kendo-multiselect>
       </kendo-floatinglabel>
        <kendo-daterange style="width:450px;">
            <kendo-floatinglabel text="Received From" style="width:115px;margin-right:10px;">
              <kendo-dateinput   kendoDateRangeStartInput [(value)]="startDate"></kendo-dateinput>
            </kendo-floatinglabel>
            <kendo-floatinglabel text="From Time" style="width:110px;margin-right:10px;">
              <kendo-timepicker [(value)]="startTime"></kendo-timepicker>
            </kendo-floatinglabel>
            <kendo-floatinglabel text="Received To" style="width:115px;margin-right:10px;">
              <kendo-dateinput kendoDateRangeEndInput [(value)]="endDate"></kendo-dateinput>
            </kendo-floatinglabel>
            <kendo-floatinglabel text="To Time" style="width:110px;margin-right:10px;">
              <kendo-timepicker [(value)]="endTime"></kendo-timepicker>
            </kendo-floatinglabel>
            <kendo-daterange-popup #popup>
              <ng-template kendoDateRangePopupTemplate>
                <div style="align-content:center;margin-top:-40px;width:100%">
                  <button (click)="popup.toggle()" style="width:100px;float:right;margin-right:40px;" class="btn btn-primary btn-round simple">close</button>
                </div>
                <kendo-multiviewcalendar kendoDateRangeSelection>
                </kendo-multiviewcalendar>
              </ng-template>
            </kendo-daterange-popup>
          </kendo-daterange>
    </div>
          </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>
  `
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
    public tagMapper(tags: any[]): any[] {
        return tags.length < 3 ? tags : [ tags ];
    }
      public isItemSelected(itemText: string): boolean {
    return this.value.some(item => item.text === itemText);
  }

  public onPartnerChange(value) {
    this.value = value;
  }
}

[Svet]

Hi John,

Thank you for the provided feedback and screenshot.

Indeed, the demonstrated undesired behavior is caused by a bug on our side. That is why I logged an issue in our public GitHub repository where it can be tracked:

https://github.com/telerik/kendo-themes/issues/1468

I have also updated your account Telerik points for bringing this issue to our attention.

Please accept our apologies for the caused inconvenience until the issue is resolved.
Feel free, to write back in case any further assistance is required for any Kendo UI for Angular related topic. Thank you in advance.

Regards,
Svetlin
Progress Telerik