简体   繁体   中英

Is the z-index incorrect for these radio toggles behind the Semantic-UI-React Loading component?

I'm working on a form that has Semantic-UI Radio toggles, and the loader and the toggle's appear to be loading in the wrong z-index.

加载器后面带有单选切换的表单图像

I checked the css and the toggle contains the following

.ui.toggle.checkbox label:after {
    z-index: 2;
}

while the loader is

.ui.dimmer {
    z-index: 1000;
}

which seems like the appropriate behaviour. I want the toggles to be behind the loader to present the best user experience. Can anyone tell me if the current behaviour is by design or not? Trying to determine if this is a bug to be reported or a feature to be requested or if there's a problem with my implementation.

My code (edited for brevity)

        import { Form, Dropdown, DropdownItemProps, Dimmer, Loader, Button, Icon, Segment } from "semantic-ui-react";
        return (
        <Fragment>
        <div style={{ display: "flex", flexDirection: "column" }}>
        <div className="ui segments">
          <PageHeader
            text="Some text"
            subText="Some subtext"
            pageIcon="cogs icon"
          />
        </div>
    
        <Dimmer.Dimmable dimmed={loading}>
          <Dimmer simple active={loading}>
            <Loader>Loading</Loader>{" "}
          </Dimmer>
    
          <Form onSubmit={() => save()}>
            <Form.Checkbox
                label="Label 1"
                checked={display}
                onChange={(e, { checked }) => setDisplay(!!checked)}
                toggle
              />
              <Form.Input
                label="Label 2"
                placeholder="Placeholder"
                value={data}
                onChange={(e, { value }) => setData(value)}
              />
            </Form.Group> 
          </Form>
        </Dimmer.Dimmable>
      </div>
    </Fragment>
);

The comment helped me out. The problem was resolved using https://coder-coder.com/z-index-isnt-working/#alternative-solution-remove-positioning-from-the-content-so-it-wont-limit-the-modals-z-index from the suggestion.

I used a sticky position for the form element. Not necessarily the best solution but it sufficed for this purpose.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM