A sub-element of div is going out of bounds when I am resizing the div.
I have tried adding padding to resizable and resizers divs.
All the actual code is contained here: https://github.com/LudwigVonChesterfield/Totally-Accurate-Political-Simulator
Snippets that do not work seperately from that said code:
<div id='div_player_chat' class='resizable' style='height: 200px; width: 400px; top: 60%; left: 60%'>
<div class='resizers'>
<div class='resizer top-left'></div>
<div class='resizer top-right'></div>
<div class='resizer bottom-left'></div>
<div class='resizer bottom-right'></div>
<div class="chat-wrapper">
<form id="player_chat-form">
<input id="player_chat" autocomplete="off" title="chat"/>
<button id="player_say">Say</button>
</form>
</div>
<ul id="player_events"></ul>
</div>
</div>
.resizable {
background: black;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.resizable .resizers {
width: 100%;
height: 100%;
border: 3px solid #4286f4;
box-sizing: border-box;
}
.resizers {
padding: 10px 10px 10px 10px;
}
.chat-wrapper {
padding: 10px 10px 10px 10px;
height: 35px;
background: dodgerblue;
}
.chat-wrapper form {
display: flex;
height: 30px;
}
.chat-wrapper form input {
font-size: 1.0rem;
margin: 0 10px 0 0;
padding: 0 5px;
flex-grow: 1;
}
.chat-wrapper form button {
width: 80px;
}
#player_events {
width: 100%;
height: 90%;
flex-grow: 1;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid lightgrey;
overflow-y: scroll;
}
#player_events li {
padding: 10px 10px 10px 10px;
color: white;
}
I expected the <ul>
to be resized accordingly to it's <div>
and to never go out of it's bounds.
The result however is: https://cdn.discordapp.com/attachments/401030271417188355/613621706745053184/unknown.png
https://cdn.discordapp.com/attachments/489092762466254848/613618996977336320/2019-08-21_09-22-31.mp4
Aucun commentaire:
Enregistrer un commentaire