Question:
How do I fix the problem where I set a section to 100vh and it doesn’t scroll on smaller screens ( like the default breakpoints ), but as soon as it is viewed on a slightly bigger screen, the section needs to scroll… It is driving my mad, since for my site, it is essential for the screen to remain unscrolling. I tried setting the overflow to “hide” but that just cuts out elements. I am doing this on an iframe and I am pretty sure that’s the problem. Below are 2 images:
You can see how the elements are getting cut out on the bigger screen. I’m 95% sure this has nothing to do with my iframe, so here is the entire code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Interface</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<style>
/* Import Sora font from Google Fonts (example) */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap");
/* Apply Sora font to all elements */
body,
button,
input,
textarea,
select,
.message {
font-family: "Sora", sans-serif;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: var(--background-color);
color: var(--text-color);
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 70%;
height: 100%;
background-color: var(--container-background);
overflow: hidden;
}
.send-section {
display: flex;
align-items: center;
padding: 10px;
box-sizing: border-box;
background: var(--send-section-background);
}
.input-wrapper {
position: relative;
flex-grow: 1;
margin-right: 10px;
}
.auto-expanding-textarea {
width: 100%;
box-sizing: border-box;
font-size: 20px;
line-height: 1.5;
border: none;
background-color: var(--textarea-background);
color: var(--text-color);
border-radius: 25px;
resize: none;
overflow-y: auto;
padding: 10px;
padding-left: 15px;
padding-right: 40px;
/* Add space for the button inside the textarea */
}
.auto-expanding-textarea:focus {
outline: none;
border-color: transparent;
}
.auto-expanding-textarea::placeholder {
color: var(--placeholder-color);
}
.send-button {
position: absolute;
right: 5px;
top: 45%;
transform: translateY(-50%);
width: 35px;
height: 35px;
border-radius: 100%;
background-color: var(--send-color);
/* Set background color */
color: var(--send-icon-color);
border: none;
cursor: pointer;
font-size: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
/* Smooth transition for background color */
overflow: hidden;
}
.send-button:hover {
background-color: var(--send-color-hover);
/* Hover background color */
}
.send-button:disabled {
cursor: not-allowed;
/* Change cursor to indicate not allowed */
background-color: var(--send-color-disabled);
/* Disabled state background color */
}
.messages {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
}
.message {
padding: 10px;
margin: 10px 0px;
border-radius: 15px;
font-size: 20px;
max-width: 100%;
/* Adjust the maximum width as needed */
word-wrap: break-word;
font-family: "Sora", sans-serif;
/* Apply Sora font to messages */
display: inline-block;
/* Allow element to size based on content */
}
.message.user {
background-color: var(--your-message-background);
align-self: flex-end;
}
.message.assistant {
background-color: var(--adonis-message-background);
align-self: flex-start;
}
.mode-toggle-button {
position: absolute;
right: 20px;
top: 60px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0);
border: none;
cursor: pointer;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease-in-out;
}
.mode-toggle-button i {
color: var(--icon-color);
}
.mode-toggle-button:hover {
transform: scale(1.2);
}
.settings-button {
position: absolute;
right: 20px;
top: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0);
border: none;
cursor: pointer;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease-in-out;
}
.settings-button i {
color: var(--icon-color);
}
.settings-button:hover {
transform: scale(1.2);
animation: rotate 2s linear infinite;
}
.feedback-button
{
position: absolute;
right: 20px;
top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0);
border: none;
cursor: pointer;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.15s ease-in-out;
}
.feedback-button i {
color: var(--icon-color);
}
.feedback-button:hover
{
transform: rotate(-22deg);
}
.feedback-box
{
display: none;
position: absolute;
background-color: var(--textarea-background);
width: 300px;
height: 400px;
top: 0px;
margin: 30px;
right: 40px;
padding: 30px;
font-size: 22px;
border-radius: 10px;
border-width: 0px;
color: var(--text-color);
outline: none;
resize: none;
overflow-y: auto;
}
.feedback-box::placeholder
{
color: var(--placeholder-color);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
:root {
--background-color: rgb(255, 255, 255);
/* #fff */
--text-color: rgb(59, 59, 59);
/* #3b3b3b */
--container-background: rgb(255, 255, 255);
/* #fff */
--send-section-background: rgb(255, 255, 255);
/* #fff */
--textarea-background: rgb(244, 244, 244);
/* #f4f4f4 */
--border-color: rgb(221, 221, 221);
/* #ddd */
--your-message-background: rgb(244, 244, 244);
/* #f4f4f4 */
--adonis-message-background: rgb(255, 255, 255);
/* #fff */
--icon-color: rgb(176, 176, 176);
/* #b0b0b0 */
--send-color: rgb(59, 59, 59);
/* #3b3b3b */
--send-color-hover: rgb(107, 107, 107);
/* #6b6b6b */
--send-color-disabled: rgb(214, 214, 214);
/* #d6d6d6 */
--placeholder-color: rgb(176, 176, 176);
/* #b0b0b0 */
--send-icon-color: rgb(255, 255, 255);
}
/* Dark mode variables */
body.dark-mode {
--background-color: rgb(24, 24, 24);
/* #181818 */
--text-color: rgb(224, 224, 224);
/* #e0e0e0 */
--container-background: rgb(24, 24, 24);
/* #181818 */
--send-section-background: rgb(24, 24, 24);
/* #181818 */
--textarea-background: rgb(43, 43, 43);
/* #2b2b2b */
--border-color: rgb(68, 68, 68);
/* #444 */
--your-message-background: rgb(43, 43, 43);
/* #2b2b2b */
--adonis-message-background: rgb(24, 24, 24);
/* #181818 */
--icon-color: rgb(224, 224, 224);
/* #e0e0e0 */
--send-color: rgb(224, 224, 224);
/* #e0e0e0 */
--send-color-hover: rgb(242, 242, 242);
/* #f2f2f2 */
--send-color-disabled: rgb(33, 33, 33);
/* #212121 */
--placeholder-color: rgb(176, 176, 176);
/* #b0b0b0 */
--send-icon-color: rgb(24, 24, 24);
}
/* Dark red mode variables */
body.dark-red-mode {
--background-color: rgb(24, 0, 0);
/* #181818 */
--text-color: rgb(224, 0, 0);
/* #e0e0e0 */
--container-background: rgb(24, 0, 0);
/* #181818 */
--send-section-background: rgb(24, 0, 0);
/* #181818 */
--textarea-background: rgb(43, 0, 0);
/* #2b2b2b */
--border-color: rgb(68, 0, 0);
/* #444 */
--your-message-background: rgb(43, 0, 0);
/* #2b2b2b */
--adonis-message-background: rgb(24, 0, 0);
/* #181818 */
--icon-color: rgb(224, 0, 0);
/* #e0e0e0 */
--send-color: rgb(224, 0, 0);
/* #e0e0e0 */
--send-color-hover: rgb(242, 0, 0);
/* #f2f2f2 */
--send-color-disabled: rgb(33, 0, 0);
/* #212121 */
--placeholder-color: rgb(176, 0, 0);
/* #b0b0b0 */
--send-icon-color: rgb(24, 0, 0);
}
</style>
</head>
<body>
<div class="container">
<div class="messages">
<!-- Messages will be added dynamically here -->
</div>
<div class="send-section">
<div class="input-wrapper">
<textarea
class="auto-expanding-textarea"
rows="1"
placeholder="Message Adonis"
></textarea>
<button class="send-button">
<i class="fa-solid fa-arrow-up"></i>
</button>
</div>
</div>
</div>
<button class="mode-toggle-button"><i class="fas fa-sun"></i></button>
<button class="settings-button">
<i class="fa-solid fa-gear"></i>
</button>
<button class="feedback-button">
<i class="fa-solid fa-feather"></i>
</button>
<textarea
class="feedback-box" placeholder="Help improve Adonis AI by leaving feedback"></textarea>
<button>Submit</button>
<script>
const textarea = document.querySelector(".auto-expanding-textarea");
const sendButton = document.querySelector(".send-button");
const messages = document.querySelector(".messages");
const toggleButton = document.querySelector(".mode-toggle-button");
const settingsButton = document.querySelector(".settings-button");
const feedbackBox = document.querySelector(".feedback-box");
const feedbackButton = document.querySelector(".feedback-button");
let feedbackBoxOpen = false;
feedbackButton.addEventListener("click", function ()
{
if(!feedbackBoxOpen){
feedbackBox.style.display = "block";
feedbackBoxOpen = true;
} else{
feedbackBox.style.display = "none";
feedbackBoxOpen = false;
}
});
const maxRows = 6;
const lineHeight = parseInt(
window.getComputedStyle(textarea).lineHeight,
);
settingsButton.addEventListener("click", function () {
localStorage.setItem("toggledMode", mode);
window.parent.postMessage("!{changeToSettings}!", "*");
});
textarea.addEventListener("input", function () {
this.style.height = "auto";
let newHeight = this.scrollHeight;
const maxHeight = lineHeight * maxRows;
if (newHeight > maxHeight) {
newHeight = maxHeight;
this.style.overflowY = "scroll";
} else {
this.style.overflowY = "hidden";
}
this.style.height = `${newHeight}px`;
});
textarea.addEventListener("keydown", function (event) {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
sendMessage();
}
});
sendButton.disabled = true;
textarea.addEventListener("input", function () {
if (this.value.trim() === "") {
sendButton.disabled = true;
} else {
sendButton.disabled = false;
}
});
sendButton.addEventListener("click", sendMessage);
const icons = ["fas fa-sun", "fas fa-moon", "fas fa-eye"];
const modes = ["light-mode", "dark-mode", "dark-red-mode"];
let mode = parseInt(localStorage.getItem("toggledMode"));
if (isNaN(mode)) {
mode = 0;
}
document.body.classList.add(modes[mode]);
toggleButton.querySelector("i").className = icons[mode];
toggleButton.addEventListener("click", function () {
document.body.classList.remove(modes[mode]);
mode = (mode + 1) % modes.length;
document.body.classList.add(modes[mode]);
toggleButton.querySelector("i").className = icons[mode];
localStorage.setItem("toggledMode", mode);
});
function sendMessage() {
const messageText = textarea.value.trim();
if (messageText !== "") {
addMessage("user", messageText);
textarea.value = "";
sendButton.disabled = true;
adjustLayout();
window.parent.postMessage(messageText, "*");
}
}
function addMessage(sender, text) {
const messageDiv = document.createElement("div");
messageDiv.className = `message ${sender}`;
messageDiv.innerHTML = text;
messages.appendChild(messageDiv);
messages.scrollTop = messages.scrollHeight;
}
function adjustLayout() {
textarea.style.height = "auto";
let newHeight = textarea.scrollHeight;
const maxHeight = lineHeight * maxRows;
if (newHeight > maxHeight) {
newHeight = maxHeight;
textarea.style.overflowY = "scroll";
} else {
textarea.style.overflowY = "hidden";
}
textarea.style.height = `${newHeight}px`;
}
let lastMessageDiv = null;
window.onmessage = (event) => {
if (event.data.operation == "load") {
addMessage(event.data.sender, event.data.message);
adjustLayout();
} else if (event.data.operation == "stream") {
addChunk(event.data.chunk);
adjustLayout();
} else if (event.data.operation == "end") {
lastMessageDiv = null;
adjustLayout();
return;
}
};
function addChunk(chunk) {
if (!lastMessageDiv) {
// Create a new message div
lastMessageDiv = document.createElement("div");
lastMessageDiv.className = "message assistant";
messages.appendChild(lastMessageDiv);
}
// Append the chunk to the last created message div
lastMessageDiv.innerHTML += chunk;
messages.scrollTop = messages.scrollHeight;
}
function refreshChat(messagesArray) {
messages.innerHTML = "";
messagesArray.forEach(({ sender, text }) => {
addMessage(sender, text);
});
adjustLayout();
}
</script>
</body>
</html>
Now, it could also be Wix’s problem, but my section ( the only section on that page ) has it’s height set to 100vh. What could be the problem? No matter what I do, it seems to persist.
If someone can help, I’d be very grateful. Thanks in advance.
