英文:
CSS When setting parent width to 0 on mobile, children overflow
问题
我有一个联系部分,通过将父级的宽度从0动画变为30%而滑出,
var contact_toggle = true;
$('#contactus').click(function(){
if(contact_toggle){
$('#contact_cont').animate({
width: '30%'
});
}else{
$('#contact_cont').animate({
width: '0%'
});
}
contact_toggle = !contact_toggle;
});
在桌面上,这个功能正常,
但在移动设备上,子元素和子元素的子元素会溢出到右边:
这里有一个示例链接:https://jsfiddle.net/wolfiestew/pfvwezLu/
要查看我的意思,请在Chrome上启用响应测试工具,切换到横向iPhone模式。
<style>
.contact{
position:absolute;
z-index: 10000;
margin-top:2%;
overflow-x:hidden;
}
.contact input{
border: 2px solid #dadada;
color: white;
height:30px;
border-radius:7px;
margin-bottom: 5vh;
color: white;
width:200px;
font-size:9pt;
font-family:roboto;
background-color:rgb(20,21,26);
}
.contact label{
margin-right: 10px;
font-family:roboto;
margin-left:1vw;
color: white;
}
body{overflow:hidden;}
.contact input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.contact_buttons{
bottom: 1vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width:100%;
}
</style>
<script>
var contact_toggle = true;
$('#contactus').click(function(){
if(contact_toggle){
$('#contact_cont').animate({
width: '30%'
});
}else{
$('#contact_cont').animate({
width: '0%'
});
}
contact_toggle = !contact_toggle;
});
</script>
<html>
<div id='contactus' style='background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;'>点击我</div>
<div id='contact_cont' style='position:absolute;top:0px;right:0px;background-color:rgb(31,32,41);width:0%;height:100%;z-index:10000;'>
<div id='contact_container' class='contact'>
<p style='font-size:17pt;margin-left:30px;'>
联系我们
</p>
<label>姓名</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>姓氏</label>
<input id='surname' type='text' value=' '>
<br>
<label>电话</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>电子邮件</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>公司</label>
<input id='company' type='text' value=' ' style='margin-left:-3px';
<br>
<label>地址</label>
<input id='address' type='text' value=' ' style='margin-left:5px;'>
<br>
<br>
<div id='submit_details' class='button' style='position:relative;margin-left:10vw;margin-top:6vh;'>提交</div>
<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>
</span>
</div>
</div>
</html>
英文:
I have a contact section that slides out by animating the width of the parent from 0 to 30%,
var contact_toggle = true;
$('#contactus').click(function(){
if(contact_toggle){
$('#contact_cont').animate({
width: '30%'
});
}else{
$('#contact_cont').animate({
width: '0%'
});
}
contact_toggle = !contact_toggle;
});
But on mobile the children, and children's children overflow to the right:
Here is a fiddle: https://jsfiddle.net/wolfiestew/pfvwezLu/
to see what I mean, switch on the responsiveness tester on chrome to horizontal iphone.
<style>
.contact{
position:absolute;
z-index: 10000;
margin-top:2%;
overflow-x:hidden;
}
.contact input{
border: 2px solid #dadada;
color: white;
height:30px;
border-radius:7px;
margin-bottom: 5vh;
color: white;
width:200px;
font-size:9pt;
font-family:roboto;
background-color:rgb(20,21,26);
}
.contact label{
margin-right: 10px;
font-family:roboto;
margin-left:1vw;
color: white;
}
body{overflow:hidden;}
.contact input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.contact_buttons{
bottom: 1vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width:100%;
}
</style>
<script>
var contact_toggle = true;
$('#contactus').click(function(){
if(contact_toggle){
$('#contact_cont').animate({
width: '30%'
});
}else{
$('#contact_cont').animate({
width: '0%'
});
}
contact_toggle = !contact_toggle;
});
}
</script>
<html>
<div id='contactus' style='background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;'>click me</div>
<div id='contact_cont' style='position:absolute;top:0px;right:0px;background-color:rgb(31,32,41);width:0%;height:100%;z-index:10000;'>
<div id='contact_container' class='contact'>
<p style='font-size:17pt;margin-left:30px;'>
Contact Us
</p>
<label>Name</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Surname</label>
<input id='surname' type='text' value=' '>
<br>
<label>Phone</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>Email</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Company</label>
<input id='company' type='text' value=' ' style='margin-left:-3px';
<br>
<label>Address</label>
<input id='address' type='text' value=' ' style='margin-left:5px;'>
<br>
<br>
<div id='submit_details' class='button' style='position:relative;margin-left:10vw;margin-top:6vh;'>Submit</div>
<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>
</span>
</div>
</div>
</html>
</details>
# 答案1
**得分**: 1
将 `overflow-x: hidden` 添加到将 `width` 设置为 0 的元素。
<details>
<summary>英文:</summary>
Add `overflow-x: hidden` to the element whose `width` you set to 0.
</details>
# 答案2
**得分**: 1
以下是您提供的代码的翻译部分:
我会将联系部分设置为固定宽度,最大宽度为100vw(以确保不超过屏幕宽度),并简单地切换类,对我来说是`.active`,并使用`transform: translateX()`在不活动时将其推出屏幕。
```javascript
$('#contactus').click(function() {
$("#contact_cont").toggleClass("active");
});
.contact {
position: absolute;
z-index: 10000;
margin-top: 2%;
}
.contact input {
border: 2px solid #dadada;
color: white;
height: 30px;
border-radius: 7px;
margin-bottom: 5vh;
color: white;
width: 200px;
font-size: 9pt;
font-family: roboto;
background-color: rgb(20, 21, 26);
}
.contact label {
margin-right: 10px;
font-family: roboto;
margin-left: 1vw;
color: white;
}
body {
overflow: hidden;
}
.contact input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.contact_buttons {
bottom: 1vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
#contact_cont {
position: absolute;
top: 0px;
right: 0px;
background-color: rgb(31, 32, 41);
width: 320px;
max-width: 100vw;
height: 100%;
z-index: 10000;
transform: translateX(100%);
transition: 250ms;
overflow: auto;
}
#contact_cont.active {
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='contactus' style='background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;'>click me</div>
<div id='contact_cont'>
<div id='contact_container' class='contact'>
<p style='font-size:17pt;margin-left:30px;'>
联系我们
</p>
<label>姓名</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>姓氏</label>
<input id='surname' type='text' value=' '>
<br>
<label>电话</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>电子邮件</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>公司</label>
<input id='company' type='text' value=' ' style='margin-left:-3px;'> <br>
<label>地址</label>
<input id='address' type='text' value=' ' style='margin-left:5px;'>
<br>
<br>
<div id='submit_details' class='button' style='position:relative;margin-left:10vw;margin-top:6vh;'>提交</div>
<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>
</span>
</div>
</div>
希望这有助于您理解代码和所需的更改。
英文:
I would make the contact section a fixed width with a max width of 100vw (to make sure its not wider than the screen) and simply toggle the class, in my case .active
, and use transform:translateX()
to push off the screen when not active.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#contactus').click(function() {
$("#contact_cont").toggleClass("active");
});
<!-- language: lang-css -->
.contact {
position: absolute;
z-index: 10000;
margin-top: 2%;
}
.contact input {
border: 2px solid #dadada;
color: white;
height: 30px;
border-radius: 7px;
margin-bottom: 5vh;
color: white;
width: 200px;
font-size: 9pt;
font-family: roboto;
background-color: rgb(20, 21, 26);
}
.contact label {
margin-right: 10px;
font-family: roboto;
margin-left: 1vw;
color: white;
}
body {
overflow: hidden;
}
.contact input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.contact_buttons {
bottom: 1vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
#contact_cont {
position: absolute;
top: 0px;
right: 0px;
background-color: rgb(31, 32, 41);
width: 320px;
max-width: 100vw;
height: 100%;
z-index: 10000;
transform: translateX(100%);
transition: 250ms;
overflow: auto;
}
#contact_cont.active {
transform: translateX(0);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='contactus' style='background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;'>click me</div>
<div id='contact_cont'>
<div id='contact_container' class='contact'>
<p style='font-size:17pt;margin-left:30px;'>
Contact Us
</p>
<label>Name</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Surname</label>
<input id='surname' type='text' value=' '>
<br>
<label>Phone</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>Email</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Company</label>
<input id='company' type='text' value=' ' style='margin-left:-3px;'> <br>
<label>Address</label>
<input id='address' type='text' value=' ' style='margin-left:5px;'>
<br>
<br>
<div id='submit_details' class='button' style='position:relative;margin-left:10vw;margin-top:6vh;'>Submit</div>
<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>
</span>
</div>
</div>
<!-- end snippet -->
You should also consider taking the margin-left
off of the inputs. Maybe wrap the label and input together and use flexbox for alignment.
答案3
得分: -1
找到唯一有效的方法是,谢谢!
$("#contact_cont").css('display','hidden');
var contact_toggle = true;
$('#contactus').click(function(){
if(contact_toggle){
$("#contact_cont").css('display','inline');
$("#contact_cont").css('width','0px');
$("#contact_cont").animate({width:'30%'});
}else{
$("#contact_cont").css('width','30%');
$("#contact_cont").animate({width:'0px'});
$("#contact_cont").css('display','hidden');
}
contact_toggle = !contact_toggle;
});
英文:
Found the only thing that worked was, thanks though!
$("#contact_cont").css('display','hidden');
var contact_toggle = true;
$('#contactus').click(function(){
if(contact_toggle){
$("#contact_cont").css('display','inline');
$("#contact_cont").css('width','0px');
$("#contact_cont").animate({width:'30%'});
}else{
$("#contact_cont").css('width','30%');
$("#contact_cont").animate({width:'0px'});
$("#contact_cont").css('display','hidden');
}
contact_toggle = !contact_toggle;
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论