Need help with aligning a live chat box on every webpage? Check out this example for reference:
You can find my code here: https://jsfiddle.net/fn77d0de/2/
Need help with aligning a live chat box on every webpage? Check out this example for reference:
You can find my code here: https://jsfiddle.net/fn77d0de/2/
Let me explain why this was not working as expected. There are several factors contributing to the issue.
Below are the specific styles that were causing the problem:
#controls {
width: 1024px; /* This width */
margin: 0px auto;
}
#textarea {
resize: none;
width: 940px; /* This width */
}
#container {
width: 1024px; /* This width */
height: 400px;
margin: 0px auto;
margin-top: 20px;
background-color: white;
border: 1px solid #333;
overflow: scroll;
}
It seems like you have used tables unnecessarily and set large widths across multiple classes. I have removed them and simplified it using CSS only.
Although there are more improvements that can be made, I focused on addressing the alignment issue in your question. Below are the changes I made. Feel free to ask if you need any clarifications.
#live-chat {
position: absolute;
bottom: 0px;
right: 20px;
width: 300px;
height: auto;
z-index: 5;
background: #789;
border-radius: 5px 5px 0 0;
padding: 10px;
display: block;
box-sizing: border-box;
}
#send {
font-size: 24px;
margin-top: 10px;
}
#textarea {
resize: none;
width: 100%;
} <a href="page1.html">Page1</a>
<a href="page2.html">Page2</a>
<a href="page3.html">Page3</a>
<div id="live-chat">
<h1 class="pageTitleHeader">Live Chat</h1>
<a href="#" title="Help" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><img src="/sbijava/images/help_icon.jpg" alt="Help" width="14" height="13" border="0" align="middle"></a>
<textarea id="textarea" placeholder="Enter your message here..."></textarea>
<button id="send">Send</button>
<input checked type="checkbox" id="enter">
</div>I am working on integrating a JQuery client with PayPal's Express Checkout functionality for credit card transactions. The process involves the client presenting a form to the user, initiating a purchase via AJAX to the server, executing SetExpressChe ...
I have created an animation where an image transitions from black and white to colored upon hover, accompanied by overlay text. However, when hovering over the text, the image reverts back to black and white. How can I ensure that the image stays in color ...
I am dealing with a Web Application built in ASP.Net Core 5 that communicates with a Web API in .Net Core. The data returned from the API in JSON format needs to be read from a file named landing.js. Despite the data being stored in the variable (data), I ...
I'm currently developing a website using Bootstrap 4 and jQuery, which consists of 3 tabs, each containing masonry elements loaded on scroll with the Infinite Scroll plugin. I'm trying to figure out a way for the Infinite Scroll to only load cont ...
I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...
It appears that these display selectors are indistinguishable based on my assessment. According to the Mozilla CSS documentation: inline-table: The inline-table value doesn't have a direct HTML equivalent. It functions like a <table> HTML elem ...
I'm facing an issue where I can't seem to get two h2 elements with top margin set and placed inside divs floating left to line up properly. Any help would be appreciated. <html> <head></head> <style> h2{ ...
I'm facing a challenge with my radio buttons and sub-options. When a user selects an option, the corresponding sub-options should be displayed. Additionally, I want to enable the next button only when text is entered in all sub-option text boxes for t ...
My toggle trigger works perfectly in Chrome, but I'm having trouble getting it to work in Safari. Any suggestions? <a href='#show'class='show'>see more --></a> <a href='#hide'class='hide&apos ...
I am having trouble creating an input square with 3 rows and 3 columns. The borders between each two input boxes are overlapping, resulting in a double thickness border. To see this issue in action, you can run the provided html. How can I fix this so that ...
I have a simple form validation script that triggers a JavaScript alert() if any field value is less than 3 characters. However, after the alert, the page scrolls to the top instead of just stopping. Why is this happening? $('submit_button').sub ...
Exploring the world of websites, I've come across many with a unique color switch feature. Users have the ability to choose a color, and the entire page transforms to match their selection. Check out these links for some examples... http://csmthe ...
I came across some HTML code that looks like this: <form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post"> <input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения"> ...
I am looking to create a search feature with a text box and popup aligned at the top left corner of the window. The navbar already contains a search input box, but when clicked, I want to display another div that mirrors the width and content of the origin ...
I have implemented 2 tabs using Bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">CLient</a></li> <li role="presentatio ...
Good day, I am in need of a fixed-height HTML/CSS/JS accordion. The requirement is for the accordion container's height to be fixed (100% body height) and for any panel content overflow, the scrollbar should appear inside the panel's content div ...
Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...
I encountered a unique issue with my most recent website project. The website is built on WordPress, and the custom theme I created is presenting an unexpected problem: Despite functioning perfectly on all browsers and devices, the site fails to display p ...
I'm facing a dilemma. I've been striving to replicate the layout of my training website blocks to look like this: http://prntscr.com/4cd4gm. However, aligning text and paragraphs has become an obstacle for me. Despite succeeding in aligning pictu ...
Currently, I am learning JS and WebApi.Net. One issue that I am facing is that part_2 is sometimes executed before part_1, even though it should be the other way around. //**** <part_1> **** var link = 'api/Values', ttMass = new Array(); ...