0
Ich möchte meine Chat-Box zusammenfallen, wenn sie den Header des Chats berühren, ähnlich wie bei Facebook. Ich weiß, dass hide_wrapBox korrekt hinzugefügt wird, aber es setzt die Höhe seiner enthaltenen Elemente nicht auf eine (reduzierte) feste Höhe. Mit anderen Worten verschwinden die Nachrichten innerhalb der Chat-Box aber die Box steht immer noch, wo ich es vorziehen würde zu minimieren.Max-Höhe: 0 nicht kollabiert Div
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
JQuery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
@media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}