[英]overflow: hidden of absolute positioned elements
I've read all the similar examples and still cannot get the right solution. 我已经阅读了所有类似的示例,但仍然无法获得正确的解决方案。
Basically I have a simple Side Menu which toggles on button click. 基本上,我有一个简单的侧边菜单,可以单击按钮。 In the menu there is a list of checkboxes (their position is absolute). 在菜单中有一个复选框列表(它们的位置是绝对的)。 The parent container seems to be positioned relatively. 父容器似乎相对放置。 Please help me to find the solution so that "overflow: hidden" would word. 请帮助我找到解决方案,以便“溢出:隐藏”字样出现。
I tried to simplify the code below. 我试图简化下面的代码。 The working example of the whole app is posted here(it's easier to see the problem): https://arturtakoev.github.io/redux-reader/ 整个应用程序的工作示例已发布在此处(更容易发现问题): https : //arturtakoev.github.io/redux-reader/
And one additional question: I've noticed that the animation significantly slows down when there is a content on the page. 还有一个问题:我注意到页面上有内容时,动画会大大减慢速度。 This only appears on the deployed version and works fine on local one. 它仅出现在已部署的版本上,并且在本地版本上可以正常工作。 Do you know why? 你知道为什么吗?
JS (jsx): JS(jsx):
const SideMenu = ({ onClick, selectedSources, onSelectAll, onUnselectAll, showMenu }) => {
const listOfSources = Object.keys(selectedSources).map(key => key)
function renderSources() {
return listOfSources.map((source) => (
<li>
<a onClick={(e) => onClick(e, [source])}>{source}</a>
</li>
))
}
function renderSourcesChecks() {
return listOfSources.map((source) => (
<div className="relative">
<li>
<label className="containerOne" style={selectedSources[source].isSelected ? { color: sourceActiveColor } : { color: sourceNotActiveColot }}>{selectedSources[source].properties.title}
<input type="checkbox" onChange={(e) => onClick(e, [source])} checked={selectedSources[source].isSelected} />
<span className="checkmark"></span>
</label>
</li>
</div>
))
}
return (
<div>
<nav id="sidebar" className={showMenu.isVisible ? 'visible' : 'hidden'}>
<ul className="list-unstyled components">
<div>
<h3>
<a onClick={(e) => onSelectAll(e, listOfSources)}>
<img id="icon" src={require('../assets/newsIcon.png')} className="d-inline-block align-top" />
All in one
</a>
<a onClick={(e) => onUnselectAll(e, listOfSources)} id="closeicon" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</h3>
</div>
{renderSourcesChecks()}
</ul>
</nav>
</div>
)
};
CSS: CSS:
#sidebar {
height: 100vh;
width: 0;
position: fixed;
top: 0;
left: 0;
transition: 0.5s;
overflow-x: hidden;
background-color: #fff;
/* top layer */
z-index: 9999;
border-right: 1px solid rgba(0,0,0,.125);
}
#sidebar.visible {
width: 250px;
}
#sidebar ul.components {
padding: 20px 8px 8px 15px;
cursor: pointer;
}
#sidebar ul li {
padding: 5px;
font-size: 15px;
transition: 0.3s;
}
/* The container */
.containerOne {
display: block;
position: relative;
padding-left: 30px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.containerOne input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.containerOne .checkmark:after {
left: 7px;
top: 1px;
width: 5px;
height: 13px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
I didn't get your question exactly but if you want the list will not break when collapsing simply give the "#sidebar ul.components" a fixed width like 250px; 我没有确切地回答您的问题,但是如果您希望折叠时列表不会中断,只需给“ #sidebar ul.components”设置一个固定宽度,例如250px; so text will not break. 因此文字不会中断。 Let me know if you need something else. 让我知道您是否还需要其他东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.