CODEWITHSUNDEEP
angularkendo-combobox
Parul Gautam
Parul Gautam

Reputation: 21

Kendo combo box when open in full screen mode becomes not selectable

I am using kendo combo box. Whenever I make a particular div full screen, dropdown list of combobox present in it appears but it is unselectable. Code for kendo Combo box:

<kendo-combobox
   id="chartcomboBoxId"
   [data]="data"
   [(value)]="selectedValue"
   [textField]="'desc'"
   [valueField]="'name'"
   [valuePrimitive]="true"
   (valueChange)="handleValueChange($event)"
   style="font-size: 10px; padding-top:2px; padding-left: 2px; 
         z-index:2147483648 !important;"
   *ngIf="data">
</kendo-combobox>

I have made the z-index max so that the list appears, otherwise the list was not appearing above the window in full screen mode.

code for making the div fullscreen:

public fullScreen() {
    const container = document.getElementById('container');
    if (container .requestFullscreen) {
        container .requestFullscreen();
    } else if (container .webkitRequestFullscreen) {
        container .webkitRequestFullscreen();
    }
  }

Upvotes: 1

Views: 508

Answers (1)

Юра Рабчевський
Юра Рабчевський

Reputation: 11

You can use appendTo property of the popupSettings object set to 'component'. This way you specify that popup should be appended to the component instead of the root of the app (which is default). Also you may want to check this kendo documentation

 <kendo-combobox
     id="chartcomboBoxId"
     [data]="data"
     [(value)]="selectedValue"
     [textField]="'desc'"
     [valueField]="'name'"
     [valuePrimitive]="true"
     (valueChange)="handleValueChange($event)"
     [popupSettings]="{appendTo: 'component'}" <!--  <===  This line is a solution-->
     *ngIf="data">
</kendo-combobox>

Upvotes: 1

Related Questions