文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >Flex子项在非常小的宽度上消失

问Flex子项在非常小的宽度上消失
EN

Stack Overflow用户
提问于 2019-04-24 07:11:40
回答 2查看 555关注 0票数 3

我正在使用ReactJS构建一个调整大小的组件。代码如下：

​

class Cell extends React.Component {
  handleMouseDown = event => {
    this.props.onMouseDown(this.props.index, event);
  };

  render() {
    let verticalGrip = ( <
      div onMouseDown = {
        this.handleMouseDown
      }
      className = "cell-vertical-grip" / >
    );

    return ( <
      div className = "cell-container"
      style = {
        {
          width: this.props.widths[this.props.index]
        }
      } >
      <
      div className = "cell-content"
      style = {
        {
          border: "10px solid transparent"
        }
      } >
      {
        "WIDTH " + this.props.widths[this.props.index]
      } <
      /div> {
        verticalGrip
      } <
      /div>
    );
  }
}

class Test extends React.Component {
  state = {
    widths: [100, 100, 100, 100],
    baseWidths: [100, 100, 100, 100],
    xBase: 0,
    resizeIndex: null
  };

  handleMouseDown = (index, event) => {
    console.log("MouseDown: index: " + index + ", pageX: " + event.pageX);

    this.setState({
      xBase: event.pageX,
      resizing: true,
      resizeIndex: index
    });
  };

  handleMouseMove = event => {
    if (this.state.resizing) {

      let delta = this.state.xBase - event.pageX;

      console.log("MouseMove " + delta);

      let widths = this.state.widths.slice();
      widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta;

      this.setState({
        widths: widths
      });
    }
  };

  handleMouseUp = event => {
    console.log("MouseUp");

    this.setState({
      resizing: false,
      resizeIndex: null
    });
  };

  render() {
    return ( <
      div className = "test-container"
      onMouseMove = {
        this.handleMouseMove
      }
      onMouseUp = {
        this.handleMouseUp
      } >
      <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        0
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        1
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        2
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        3
      }
      /> <
      /div>
    );
  }
}

// Render it
ReactDOM.render( <
  Test / > ,
  document.body
);
.test-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: cyan;
}

.cell-container {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  background-color: grey;
  border: 1px solid black;
  overflow-y: hidden;
  overflow-x: hidden;
}

.cell-content {
  align-self: center;
  flex-shrink: 1;
  font-size: 12px;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: white;
}

.cell-vertical-grip {
  flex-shrink: 0;
  margin-left: auto;
  width: 3px;
  min-width: 3px;
  cursor: ew-resize;
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

verticalGrip是您获取要调整大小的列的位置。

一切都很好，但是当我将任何列的大小调整为小于20px的宽度时，我的问题就会出现。在这种情况下，我的蓝色手柄(verticalGrip项)就会消失。因此，如果我在该位置松开鼠标，我将无法再次展开该列，因为没有可抓取的夹点(它已消失)。

换句话说，如果他出于某种原因需要收缩一列，他就不能再次增加它，因为没有抓取的把手。

如何使我的手柄在每个可能的宽度上都可见，从而允许用户在任何情况下调整列的大小？

javascript
html
css
reactjs
flexbox
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-24 07:23:11

一个想法是让你的元素在右边变得粘性，当你应用于你的元素的边框出现溢出时，它不会消失。

​

class Cell extends React.Component {
  handleMouseDown = event => {
    this.props.onMouseDown(this.props.index, event);
  };

  render() {
    let verticalGrip = ( <
      div onMouseDown = {
        this.handleMouseDown
      }
      className = "cell-vertical-grip" / >
    );

    return ( <
      div className = "cell-container"
      style = {
        {
          width: this.props.widths[this.props.index]
        }
      } >
      <
      div className = "cell-content"
      style = {
        {
          border: "10px solid transparent"
        }
      } >
      {
        "WIDTH " + this.props.widths[this.props.index]
      } <
      /div> {
        verticalGrip
      } <
      /div>
    );
  }
}

class Test extends React.Component {
  state = {
    widths: [100, 100, 100, 100],
    baseWidths: [100, 100, 100, 100],
    xBase: 0,
    resizeIndex: null
  };

  handleMouseDown = (index, event) => {
    console.log("MouseDown: index: " + index + ", pageX: " + event.pageX);

    this.setState({
      xBase: event.pageX,
      resizing: true,
      resizeIndex: index
    });
  };

  handleMouseMove = event => {
    if (this.state.resizing) {

      let delta = this.state.xBase - event.pageX;

      console.log("MouseMove " + delta);

      let widths = this.state.widths.slice();
      widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta;

      this.setState({
        widths: widths
      });
    }
  };

  handleMouseUp = event => {
    console.log("MouseUp");

    this.setState({
      resizing: false,
      resizeIndex: null
    });
  };

  render() {
    return ( <
      div className = "test-container"
      onMouseMove = {
        this.handleMouseMove
      }
      onMouseUp = {
        this.handleMouseUp
      } >
      <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        0
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        1
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        2
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        3
      }
      /> <
      /div>
    );
  }
}

// Render it
ReactDOM.render( <
  Test / > ,
  document.body
);
.test-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: cyan;
}

.cell-container {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  background-color: grey;
  border: 1px solid black;
  overflow-y: hidden;
  overflow-x: hidden;
}

.cell-content {
  align-self: center;
  flex-shrink: 1;
  font-size: 12px;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: white;
}

.cell-vertical-grip {
  flex-shrink: 0;
  margin-left: auto;
  width: 3px;
  min-width: 3px;
  cursor: ew-resize;
  background-color: blue;
  
  position:sticky;
  right:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

或者你可以考虑另一种想法，而不是边框，比如轮廓或框阴影，它们不会影响元素的宽度，并且你将获得相同的视觉输出：

​

class Cell extends React.Component {
  handleMouseDown = event => {
    this.props.onMouseDown(this.props.index, event);
  };

  render() {
    let verticalGrip = ( <
      div onMouseDown = {
        this.handleMouseDown
      }
      className = "cell-vertical-grip" / >
    );

    return ( <
      div className = "cell-container"
      style = {
        {
          width: this.props.widths[this.props.index]
        }
      } >
      <
      div className = "cell-content"
      style = {
        {
          outline: "10px solid #fff"
        }
      } >
      {
        "WIDTH " + this.props.widths[this.props.index]
      } <
      /div> {
        verticalGrip
      } <
      /div>
    );
  }
}

class Test extends React.Component {
  state = {
    widths: [100, 100, 100, 100],
    baseWidths: [100, 100, 100, 100],
    xBase: 0,
    resizeIndex: null
  };

  handleMouseDown = (index, event) => {
    console.log("MouseDown: index: " + index + ", pageX: " + event.pageX);

    this.setState({
      xBase: event.pageX,
      resizing: true,
      resizeIndex: index
    });
  };

  handleMouseMove = event => {
    if (this.state.resizing) {

      let delta = this.state.xBase - event.pageX;

      console.log("MouseMove " + delta);

      let widths = this.state.widths.slice();
      widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta;

      this.setState({
        widths: widths
      });
    }
  };

  handleMouseUp = event => {
    console.log("MouseUp");

    this.setState({
      resizing: false,
      resizeIndex: null
    });
  };

  render() {
    return ( <
      div className = "test-container"
      onMouseMove = {
        this.handleMouseMove
      }
      onMouseUp = {
        this.handleMouseUp
      } >
      <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        0
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        1
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        2
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        3
      }
      /> <
      /div>
    );
  }
}

// Render it
ReactDOM.render( <
  Test / > ,
  document.body
);
.test-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: cyan;
}

.cell-container {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  background-color: grey;
  border: 1px solid black;
  overflow-y: hidden;
  overflow-x: hidden;
}
/*to push the element so we can see the outline*/
.cell-container:before {
  content:"";
  width:10px;
}

.cell-content {
  align-self: center;
  flex-shrink: 1;
  font-size: 12px;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: white;
}

.cell-vertical-grip {
  flex-shrink: 0;
  margin-left: auto;
  width: 3px;
  min-width: 3px;
  cursor: ew-resize;
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

票数 2
EN

Stack Overflow用户

发布于 2019-04-24 07:25:24

一个简单的解决方案可能是稍微修改一下你的CSS，让你的抓取器元素用absolute定位，对齐并调整大小到父.cell-container的右边缘和高度

.cell-vertical-grip {
  /* Add this */
  position:absolute;
  top:0;
  height:100%;
  right:0;
}

您还可以显式设置.cell-container的min-width以匹配抓取器宽度，以便在容器完全折叠时仍然可见：

.cell-container {
  /* Add this */
  min-width:3px;
  position:relative;
}

我已经用以下代码片段中的这些更改更新了您的代码：

​

class Cell extends React.Component {
  handleMouseDown = event => {
    this.props.onMouseDown(this.props.index, event);
  };

  render() {
    let verticalGrip = ( <
      div onMouseDown = {
        this.handleMouseDown
      }
      className = "cell-vertical-grip" / >
    );

    return ( <
      div className = "cell-container"
      style = {
        {
          width: this.props.widths[this.props.index]
        }
      } >
      <
      div className = "cell-content"
      style = {
        {
          border: "10px solid transparent"
        }
      } >
      {
        "WIDTH " + this.props.widths[this.props.index]
      } <
      /div> {
        verticalGrip
      } <
      /div>
    );
  }
}

class Test extends React.Component {
  state = {
    widths: [100, 100, 100, 100],
    baseWidths: [100, 100, 100, 100],
    xBase: 0,
    resizeIndex: null
  };

  handleMouseDown = (index, event) => {
    console.log("MouseDown: index: " + index + ", pageX: " + event.pageX);

    this.setState({
      xBase: event.pageX,
      resizing: true,
      resizeIndex: index
    });
  };

  handleMouseMove = event => {
    if (this.state.resizing) {

      let delta = this.state.xBase - event.pageX;

      console.log("MouseMove " + delta);

      let widths = this.state.widths.slice();
      widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta;

      this.setState({
        widths: widths
      });
    }
  };

  handleMouseUp = event => {
    console.log("MouseUp");

    this.setState({
      resizing: false,
      resizeIndex: null
    });
  };

  render() {
    return ( <
      div className = "test-container"
      onMouseMove = {
        this.handleMouseMove
      }
      onMouseUp = {
        this.handleMouseUp
      } >
      <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        0
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        1
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        2
      }
      /> <
      Cell widths = {
        this.state.widths
      }
      onMouseDown = {
        this.handleMouseDown
      }
      index = {
        3
      }
      /> <
      /div>
    );
  }
}

// Render it
ReactDOM.render( <
  Test / > ,
  document.body
);
.test-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: cyan;
}

.cell-container {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  background-color: grey;
  border: 1px solid black;
  overflow-y: hidden;
  overflow-x: hidden;

  /* Add this */
  min-width:3px;
  position:relative;
}

.cell-content {
  align-self: center;
  flex-shrink: 1;
  font-size: 12px;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: white;
}

.cell-vertical-grip {
  flex-shrink: 0;
  margin-left: auto;
  width: 3px;
  min-width: 3px;
  cursor: ew-resize;
  background-color: blue;

  /* Add this */
  position:absolute;
  top:0;
  height:100%;
  right:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55820573

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档