Form in Window Z-Problem with MultiSelect

2 posts, 1 answers
  1. Yahia
    Yahia avatar
    3 posts
    Member since:
    Dec 2011

    Posted 02 Jun 2020 Link to this post

    Hi,

    the following breaks when used/wrapped in a Window - then the MultiSelect is rendered behind the Windows and is not accessible to the user (happens for example on FF 76.0.1 (Windows 64-Bit).

    Is there anything I can do to mitigiate this? Or is this a known bug?

    Best Regards

    Yahia

     

                                    <Form
                                        onSubmit={this.handleSubmit}
                                        initialValues={{
                                            amount: 0
                                        }}
                                        render={(formRenderProps) => (
                                            <FormElement style={{ width: 500 }} horizontal={false}>
                                                <Field
                                                    id={'searchinput'}
                                                    name={'searchinput'}
                                                    label={'Suche nach'}
                                                    placeholder={'Bildname oder Schlagworte oder Artikelnummer'}
                                                    component={FormInput}
                                                    validator={requiredValidator}
                                                />
                                                <Field

                                                    id={'searchimgtypes'}
                                                    name={'searchimgtypes'}
                                                    label={'Bildtypen'}
                                                    hint={'Hinweis: Bildtyp(en) einschränken (optional)'}
                                                    component={FormMultiSelect}
                                                    data={imgtypes}
                                                    textfield={'text'}
                                                    optional={true}
                                                />
                                    &nbsp;
                                                <span className={'k-form-separator'} />
                                                <Field
                                                    id={'includedeleted'}
                                                    name={'includedeleted'}
                                                    label={'inklusive gelöschte Bilder'}
                                                    component={FormCheckbox}
                                                    optional={true}
                                                />
                                    &nbsp;
                                                <div className="k-form-buttons k-buttons-end">
                                                <Button onClick={formRenderProps.onFormReset}>
                                                        Abbrechen
                            </Button>
                                                    <Button
                                                        primary={true}
                                                        type={'submit'}
                                                        disabled={!formRenderProps.allowSubmit}
                                                    >
                                                        Los
                            </Button>
                                                </div>
                                            </FormElement>

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 02 Jun 2020 Link to this post

    Hello, Yahia,

    I assume that this is caused by the z-index difference between the Window and the MultiSelect Popup:

    https://www.telerik.com/kendo-react-ui/components/popup/stack-order/

    Please let me know if the issue still occurs after changing the z-index.

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top