Search code examples
reactjsradio-buttonz-indextogglebuttonsemantic-ui-react

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.

Image of Form with Radio Toggle behind Loader

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>
);

Solution

  • 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.