I am currently working on a layout that is similar to Facebook's messaging system (facebook.com/messages). I have made some progress with it, but not quite there yet. You can view my work so far here:
https://jsfiddle.net/3nd0b17m/23/
https://i.sstatic.net/o4jS9.png
The main issue I am facing is getting the screen section scroll bar to stop at the end of the screen instead of continuing further down. Is there anyone who could assist me in achieving this?
If you're wondering how to tackle this issue, my suggestion would be to set the sidebar position as fixed. This way, it will remain in place even when you scroll through the rest of the page.
For an updated version, check out this fiddle: https://jsfiddle.net/odukje08/3/
Best of luck!
Update: I also included some flex properties for the sidebar to improve responsiveness and ensure it maintains the correct height.
.container {
display: flex;
height: 2000px;
overflow-y: hidden;
}
.left {
background-color: red;
width: 20%;
position: fixed;
left: 0;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
.left-bottom {
background-color: green;
height: 100%;
overflow-y: auto;
}
.right {
flex-grow: 1;
padding-left: 20%;
}<div class="container">
<div class="left">
<div class="left-top">
<p>
This is the top
</p>
</div>
<div class="left-bottom">
<p>
stuff
</p>
// more content
</div>
</div>
<div class="right">
<h1>
hello
</h1>
<p>
this is the right side. You can scroll me too!
</p>
</div>
</div>I am currently working with a Pandas DataFrame and I am looking for a way to display it on an HTML page with minimal empty space. Additionally, I am utilizing Bootstrap 4. To format all elements of a column, I can use the to_html method along with table s ...
For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...
I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...
I am working on creating a 3x3 grid using Bootstrap. My goal is to have consistent spacing between the rows and columns. How can I achieve this effectively? ...
After following the instructions here on how to get started with Materialize CSS, I am having issues with my input form appearing strange: https://i.sstatic.net/lveS2.png The contents of my current index.html file are as follows: <!DOCTYPE html> &l ...
Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Belo ...
Can someone assist with the issue I'm having regarding the use of sticky and z-index? Whenever I apply a z-index to a positioned sticky element, its content disappears. Question: How can I utilize z-index for a positioned sticky element without any c ...
My website has different paths and pages in hbs format, such as root, help, and 404. The problem arises when I navigate to localhost:3000/wrong, the site displays correctly, but when I try localhost:3000/help/wrong, the CSS is not applied to the 404 page b ...
After creating this Observable: const numbers$:Observable<any>=Observable.create((observer)=>{ for(let i=0;i<5;i++) observer.next(i); }) I attempted to use map and filter as shown below: numbers$.pipe(map(x=>{x+110})).subscr ...
I'm aiming to create a horizontal menu that adjusts its width automatically to 100%. MY CSS .horizontal { width: 100%; } .horizontal ul { display: table; width: 100% } .horizontal li { display: table-cell; } .horizontal li a { height: 3 ...
Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Pag ...
I am attempting to include two clickable icons on the right side of a list item, but the anchors containing the icons seem to be expanding too wide without any padding or margins, causing their clickable zones to overlap. Could this be an issue with the f ...
I'm currently learning about javascript and jquery, attempting to implement various scripts. I successfully executed the following script: jQuery(document).ready(function($) { var scroll_start = 0; var startchange = $('#homepage-header' ...
I was thinking about how to convert this styled-emotion code into stitches. Essentially, I need to handle the onlyShowOnDesktop and breakpoint props. The definition of breakpoint is as follows: const breakpoint = isTopNavigationBreakPoint ? theme.defaultB ...
I recently received a zip file containing a template purchased from themeforest, with a request to make modifications. The template includes a horizontal navigation bar with links to various sections on the page. In the original template, when you click on ...
I need assistance with removing and adding a CssClass to a specific textbox within a gridview. I have attempted the following code but it does not update the css for the textbox. Here is the CSS in my .aspx page: <style type="text/css"> .erroram ...
Utilizing a tool called Stonly for adding tooltips, the CSS Selector is used to locate the HTML element for identifying the tooltip. Depending on the user input, a dynamic task list is generated. The challenge arises when trying to pinpoint a specific task ...
Issue can be replicated by visiting the following URL: Click on the hamburger icon to open the navigation menu Click on "Services" Click "< Services" within the submenu to attempt to go back For some reason, the removeClass method is not removing t ...
Can someone guide me on how to set up a touch event handler in JavaScript using the mousedown, mousemove, and mouseup events? I would really appreciate any suggestions or tips! ...
I'm attempting to recreate the functionality of Jira where I can create a "gadget" that can be added to a board, resized, moved, and deleted. (For those unfamiliar with why this might be useful, think of gadgets like the "Gantt" gadget. You can add a ...