Why is the minimized chatbox is flying? - html

Question

Why is the minimized chatbox is flying?
When you enlarge one of the chatboxes, the other one will be carried to the same height as the other one. I want to keep the minimized one at bottom: 0;
var ChatBoxMessage = Vue.extend({
template: '#ChatBoxMessage',
data: function() {
return {
id: 0,
user: {},
messages: [],
};
},
methods: {
},
});
var ChatBox = Vue.extend({
template: '#ChatBox',
data: function() {
return {
id: 0,
title: "Default Title",
minimized: true,
closeable: false,
};
},
components: {
ChatBoxMessage
}
});
new Vue({
el: '#app',
data: {
chatBoxes: [],
},
methods: {
},
ready: function() {
},
components: {
ChatBox,
}
});
.curved-top {
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px; }
.ChatBoxContainer {
position: absolute;
right: 0;
width: 100%;
bottom: 0;
overflow-x: scroll; }
.ChatBoxWidget {
float: right;
margin-right: 30px; }
.ChatBox {
color: white;
height: 300px;
background: #d3d3d3;
width: 300px; }
.ChatBox__TitleBar {
height: 30px;
background: #78a400; }
.ChatBox__TitleBar__Title {
float: left;
margin: 5px;
text-align: center;
width: 76%; }
.ChatBox__TitleBar__Title-90 {
width: 86% !important; }
.ChatBox__TitleBar__Buttons {
float: right; }
.ChatBox__TitleBar__Buttons__Button {
float: right;
width: 30px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }
.ChatBoxMinimized {
width: 200px; }
.ChatBoxMinimized__TitleBar {
color: white;
height: 30px;
background: #78a400; }
.ChatBoxMinimized__Icon {
float: left;
padding: 5px;
width: 30px;
text-align: center;
background-color: #6a9700;
border-top-left-radius: 5px; }
.ChatBoxMinimized__Title {
float: left;
margin: 5px; }
.ChatBoxMinimized__Buttons {
float: right; }
.ChatBoxMinimized__Buttons__Button {
float: right;
width: 29px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }
/*# sourceMappingURL=app.css.map */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="app">
<template id="ChatBox">
<div class="ChatBoxWidget">
<div class="ChatBox curved-top" v-show="!minimized">
<div class="ChatBox__TitleBar curved-top">
<div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
{{ title }}
</div>
<div class="ChatBox__TitleBar__Buttons">
<div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
<div class="ChatBoxMinimized curved-top" v-show="minimized">
<div class="ChatBoxMinimized__TitleBar curved-top">
<div class="ChatBoxMinimized__Icon">
<i class="fa fa-comments"></i>
</div>
<div class="ChatBoxMinimized__Title">
{{ title }}
</div>
<div class="ChatBoxMinimized__Buttons">
<div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="ChatBoxMessage">
</template>
<div class="ChatBoxContainer">
<chat-box></chat-box>
<chat-box></chat-box>
</div>
</div>

Answer 1

I have modified .ChatBoxContainer css class only.
var ChatBoxMessage = Vue.extend({
template: '#ChatBoxMessage',
data: function() {
return {
id: 0,
user: {},
messages: [],
};
},
methods: {
},
});
var ChatBox = Vue.extend({
template: '#ChatBox',
data: function() {
return {
id: 0,
title: "Default Title",
minimized: true,
closeable: false,
};
},
components: {
ChatBoxMessage
}
});
new Vue({
el: '#app',
data: {
chatBoxes: [],
},
methods: {
},
ready: function() {
},
components: {
ChatBox,
}
});
.curved-top {
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px; }
.ChatBoxContainer {
position: absolute;
right: 0;
bottom: 0;
overflow-x: scroll;
vertical-align: bottom;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
.ChatBoxWidget {
float: right;
margin-right: 30px; }
.ChatBox {
color: white;
height: 300px;
background: #d3d3d3;
width: 300px; }
.ChatBox__TitleBar {
height: 30px;
background: #78a400; }
.ChatBox__TitleBar__Title {
float: left;
margin: 5px;
text-align: center;
width: 76%; }
.ChatBox__TitleBar__Title-90 {
width: 86% !important; }
.ChatBox__TitleBar__Buttons {
float: right; }
.ChatBox__TitleBar__Buttons__Button {
float: right;
width: 30px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }
.ChatBoxMinimized {
width: 200px; }
.ChatBoxMinimized__TitleBar {
color: white;
height: 30px;
background: #78a400; }
.ChatBoxMinimized__Icon {
float: left;
padding: 5px;
width: 30px;
text-align: center;
background-color: #6a9700;
border-top-left-radius: 5px; }
.ChatBoxMinimized__Title {
float: left;
margin: 5px; }
.ChatBoxMinimized__Buttons {
float: right; }
.ChatBoxMinimized__Buttons__Button {
float: right;
width: 29px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }
/*# sourceMappingURL=app.css.map */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="app">
<template id="ChatBox">
<div class="ChatBoxWidget">
<div class="ChatBox curved-top" v-show="!minimized">
<div class="ChatBox__TitleBar curved-top">
<div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
{{ title }}
</div>
<div class="ChatBox__TitleBar__Buttons">
<div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
<div class="ChatBoxMinimized curved-top" v-show="minimized">
<div class="ChatBoxMinimized__TitleBar curved-top">
<div class="ChatBoxMinimized__Icon">
<i class="fa fa-comments"></i>
</div>
<div class="ChatBoxMinimized__Title">
{{ title }}
</div>
<div class="ChatBoxMinimized__Buttons">
<div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="ChatBoxMessage">
</template>
<div class="ChatBoxContainer">
<chat-box></chat-box>
<chat-box></chat-box>
</div>
</div>

Answer 2

To achieve this you'll need to use display: inline-block; and vertical-align: bottom; on your .ChatBoxWidget instead of your current float. Then give your .ChatBoxContainer class a text-align: right;
CSS
.ChatBoxContainer {
text-align: right;
}
.ChatBoxWidget {
display: inline-block;
vertical-align: bottom;
}
var ChatBoxMessage = Vue.extend({
template: '#ChatBoxMessage',
data: function() {
return {
id: 0,
user: {},
messages: [],
};
},
methods: {
},
});
var ChatBox = Vue.extend({
template: '#ChatBox',
data: function() {
return {
id: 0,
title: "Default Title",
minimized: true,
closeable: false,
};
},
components: {
ChatBoxMessage
}
});
new Vue({
el: '#app',
data: {
chatBoxes: [],
},
methods: {
},
ready: function() {
},
components: {
ChatBox,
}
});
.curved-top {
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px; }
.ChatBoxContainer {
position: absolute;
right: 0;
width: 100%;
bottom: 0;
text-align: right;
overflow-x: scroll; }
.ChatBoxWidget {
display: inline-block;
vertical-align: bottom;
margin-right: 30px; }
.ChatBox {
color: white;
height: 300px;
background: #d3d3d3;
width: 300px; }
.ChatBox__TitleBar {
height: 30px;
background: #78a400; }
.ChatBox__TitleBar__Title {
float: left;
margin: 5px;
text-align: center;
width: 76%; }
.ChatBox__TitleBar__Title-90 {
width: 86% !important; }
.ChatBox__TitleBar__Buttons {
float: right; }
.ChatBox__TitleBar__Buttons__Button {
float: right;
width: 30px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }
.ChatBoxMinimized {
width: 200px; }
.ChatBoxMinimized__TitleBar {
color: white;
height: 30px;
background: #78a400; }
.ChatBoxMinimized__Icon {
float: left;
padding: 5px;
width: 30px;
text-align: center;
background-color: #6a9700;
border-top-left-radius: 5px; }
.ChatBoxMinimized__Title {
float: left;
margin: 5px; }
.ChatBoxMinimized__Buttons {
float: right; }
.ChatBoxMinimized__Buttons__Button {
float: right;
width: 29px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="app">
<template id="ChatBox">
<div class="ChatBoxWidget">
<div class="ChatBox curved-top" v-show="!minimized">
<div class="ChatBox__TitleBar curved-top">
<div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
{{ title }}
</div>
<div class="ChatBox__TitleBar__Buttons">
<div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
<div class="ChatBoxMinimized curved-top" v-show="minimized">
<div class="ChatBoxMinimized__TitleBar curved-top">
<div class="ChatBoxMinimized__Icon">
<i class="fa fa-comments"></i>
</div>
<div class="ChatBoxMinimized__Title">
{{ title }}
</div>
<div class="ChatBoxMinimized__Buttons">
<div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="ChatBoxMessage">
</template>
<div class="ChatBoxContainer">
<chat-box></chat-box>
<chat-box></chat-box>
</div>
</div>