#html #css #signalr #overlap
Вопрос:
Я создаю веб-приложение SignalR для обмена сообщениями. Отправляемые сообщения, похоже, перекрываются нижним колонтитулом (текстовое поле, кнопка «Отправить») и, кроме того, не прокручиваются вместе с отправляемыми сообщениями.
Мой CSS выглядит следующим образом:
body {
background-color: #2d3436;
}
.container {
background-color: #2d3436;
padding: 20px;
color: white;
max-height: 80%;
}
.textmessaging {
background-color: #474f52;
padding: 20px;
position:fixed;
bottom: 0;
width: 100%;
}
#message::-webkit-scrollbar {
width: 8px;
}
/* Track */
#message::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
#message::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(67, 74, 139, 0.8);
}
#message::-webkit-scrollbar-thumb:window-inactive {
background: rgba(67, 74, 139, 0.4);
}
#message {
resize: none;
outline: none;
background-color: rgba(0, 0, 0, 0.1);
width: 94%;
color: white;
}
#sendmessage {
margin: 0;
position: absolute;
height: 50%;
width: 5%;
outline: none;
top: 50%;
margin-left: 1%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.25);
border: none;
border-radius: 6px;
font-size: x-large;
}
#sendmessage:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#lightmodetoggle {
background-color: rgba(0, 0, 0, 0.25);
border: none;
margin: 10px;
border-radius: 6px;
font-size: x-large;
position: fixed;
outline: none;
}
#lightmodetoggle:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#discussion {
list-style-type: none;
}
#messagestyle {
padding: 5px;
border: 1px solid grey;
border-radius: 6px;
margin-bottom: 3px;
}
Мой HTML выглядит следующим образом:
<div id="maincontent">
<div class="container" id="data">
<ul id="discussion">
</ul>
</div>
<div class="textmessaging">
<textarea id="message" placeholder="Message..." rows="3" cols="50"></textarea><button id="sendmessage" data-toggle="tooltip" title="Send!"><i class='far fa-paper-plane'></i></button>
<input type="hidden" id="displayname" />
</div>
</div>
JS следующим образом
<script src="Scripts/jquery-3.4.1.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<div><li id="appendedmsg"><strong>' encodedName
'</strong><br><a id="messagestyle">' encodedMsg '<a></li></div>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// var msg = document.getElementById("message");
// var button = document.getElementById("sendmessage");
// textBox.addEventListener("keyup", function (event) {
// if (event.keyCode == 13) {
// button.click();
// }
// });
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
Я некоторое время искал и не нашел ничего, что соответствовало бы моим потребностям.
Ответ №1:
надеюсь, это может помочь, я внесу небольшие изменения в ваш css-код
body {
background-color: #2d3436;
margin: 0;
}
.container {
background-color: #2d3436;
padding: 20px;
color: white;
max-height: 80%;
}
.textmessaging {
background-color: #474f52;
padding: 20px;
position:fixed;
bottom: 0;
width: auto;
left: 0;
display: block;
right: 0;
}
#message::-webkit-scrollbar {
width: 8px;
}
/* Track */
#message::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
#message::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(67, 74, 139, 0.8);
}
#message::-webkit-scrollbar-thumb:window-inactive {
background: rgba(67, 74, 139, 0.4);
}
#message {
resize: none;
outline: none;
background-color: rgba(0, 0, 0, 0.1);
width: calc(100% - 92px);
color: white;
display: inline-block;
}
#sendmessage {
max-width: 72px;
margin: 0;
position: relative;
height: 49px;
width: 5%;
outline: none;
/* top: 50%; */
margin-left: 1%;
-ms-transform: translateY(-50%);
/* transform: translateY(-50%); */
background-color: rgba(0, 0, 0, 0.25);
border: none;
border-radius: 6px;
font-size: x-large;
display: inline-block;
float: right;
vertical-align: top;
}
#sendmessage:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#lightmodetoggle {
background-color: rgba(0, 0, 0, 0.25);
border: none;
margin: 10px;
border-radius: 6px;
font-size: x-large;
position: fixed;
outline: none;
}
#lightmodetoggle:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#discussion {
list-style-type: none;
}
#messagestyle {
padding: 5px;
border: 1px solid grey;
border-radius: 6px;
margin-bottom: 3px;
}
i.far.fa-paper-plane {} <!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="maincontent">
<div class="container" id="data">
<ul id="discussion">
</ul>
</div>
<div class="textmessaging">
<textarea id="message" placeholder="Message..." rows="3" cols="50"></textarea><button id="sendmessage" data-toggle="tooltip" title="Send!"><i class='far fa-paper-plane'></i></button>
<input type="hidden" id="displayname" />
</div>
</div>