时间戳

首页 > 解决方案 > 如何避免在下拉菜单 Semantic UI React 上叠加调光器？

reactjs - 如何避免在下拉菜单 Semantic UI React 上叠加调光器？

问题描述

我有一个下拉菜单，用于激活在加载数据时执行调光器的组件。

但是，当下拉菜单被激活时，它会因提到的组件而变暗。

<Fragment>
        <Menu color="blue" inverted size="large">
          <Dropdown item text="Malla Vial">
            <Dropdown.Menu >
              <Dropdown.Header>Reportes Malla Vial <Icon name="road" /></Dropdown.Header>
              {reportesMV.map(clase => (<Dropdown.Item key={clase} onClick={this.handleItemClick} name={clase} >{clase}</Dropdown.Item>))}
            </Dropdown.Menu>
          </Dropdown>
          <Dropdown item text="Infraestructura Asociada" >
            <Dropdown.Menu>
              <Dropdown.Header>Reportes Infraestructura Asociada <Icon name="chain" /></Dropdown.Header>
              {reportesIA.map(clase => (<Dropdown.Item key={clase} onClick={this.handleItemClick} name={clase} >{clase}</Dropdown.Item>))}
            </Dropdown.Menu>
          </Dropdown>
        </Menu>

        {activeItem === reportesMV[0] && <JerarquiaEstado /> }
        {activeItem === reportesMV[1] && <JerarquiaSuperficie /> }
        {activeItem === reportesMV[2] && <LongitudMallaVial tipo="comuna" /> }
        {activeItem === reportesMV[3] && <LongitudMallaVial tipo="barrio" /> }
        {activeItem === reportesIA[3] && <EstadoAndenSeparadorComuna /> }
      </Fragment>

JerarquiaEstado 组件

<Dimmer.Dimmable dimmed={isFetchingData}>
        <Dimmer inverted active={isFetchingData}>
          {isFetchingData && <Loader inline content="Cargando Datos..." />}
        </Dimmer>
        <Container loading={this.state.isFetching}>
          <NoPrint force>
          <Grid>

标签： reactjssemantic-ui

解决方案

调光器的位置设置为绝对，顶部和左侧设置为 0。如果这些坐标适用于不是您的下拉菜单而是其父元素之一的元素，则调光器将覆盖您的菜单。

从位置的定义：绝对：

具有位置的元素：绝对；相对于最近的定位祖先定位。

尝试设置位置：相对；在你的菜单上。

它对我有用，并且是比玩 zIndex 更好的解决方案。

推荐阅读