CSS При установке ширины родительского элемента на мобильный на 0, дочерние переполнения - PullRequest
Новая
       5

CSS При установке ширины родительского элемента на мобильный на 0, дочерние переполнения

0 голосов
/ 06 января 2020

У меня есть контактная секция, которая выдвигается путем анимации ширины родительского элемента от 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;
});

на рабочем столе, это отлично работает, hidden

slides out

Но на мобильном телефоне дети и дети переполнены вправо:

Supposed to be hidden

Вот скрипка: 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;'>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>

Ответы [ 3 ]

1 голос
/ 06 января 2020

Я бы сделал контактную секцию фиксированной ширины с максимальной шириной 100vw (чтобы убедиться, что она не шире экрана) и просто переключил класс, в моем случае .active, и использовал бы transform:translateX() для pu sh с экрана, когда не активен. 

$('#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;'>
      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>

Вам также следует рассмотреть возможность снятия margin-left с входов. Может быть, обернуть метку и ввести вместе и использовать flexbox для выравнивания.

1 голос
/ 06 января 2020

Добавьте overflow-x: hidden к элементу, для которого width установлено значение 0.

0 голосов
/ 07 января 2020

Нашел единственное, что сработало, спасибо хотя! 

 $("#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;
});
...