WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Using CSS how can I vertically scroll content in 1 table column w/browser scrollbar?

Reply
  Thread Tools Display Modes
Old 4th September 17, 05:31 PM   #1
judgedredd
WLC Member
 
judgedredd's Avatar
 
Join Date: Sep 2017
Location: Canada
Posts: 5
Default Using CSS how can I vertically scroll content in 1 table column w/browser scrollbar?

I am a bit stumped on how to do this. I have created an image showing what I would like to achieve:



The black text is the HTML code, the red is the description of the element and the purple is what I would like to achieve.

Some may take umbrage that I am using tables to position and display content. That is their choice but since tables and table elements have NOT been deprecated that is what I would like to use for the moment (to get the site running the way I want quickly). There WILL be a time when I will convert the site to DIV and CSS styling elements, but that will take a lot of learning for me to do. Until then I will use tables - in a way that they were not meant to be used as I understand it (but they are very easy to implement). In the meantime if anyone can be so kind as to help me out with this I would very much appreciate it. Thanks given in advance.
judgedredd is offline   Reply With Quote
Old 3rd November 17, 01:25 AM   #2
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

Hi we wont go into the whole tables for layout thing. If I understand correctly you want to force the use of the scrollbar if the content is too big for the space. Currently your table will expand with the content. You need to first define a height otherwise the scrollbar will never work.
Unfortunately for you you will have to try a little css. Place a div with fixed dimensions inside the cell you want to use.

The following will scroll both x and y

Code:
.content {
    width: 100px;
    height: 200px;
    overflow: scroll;
}
The following will do only vertical scrolling

Code:
.content {
    width: 100px;
    height: 200px;
    overflow-y: auto;
}
Insert a div in the cell of the table
Code:
<div class="content">
put lots of of text in here to try it out
</div>
If you don't format your text properly either solution may force the horizontal scrollbar.

There are lots of better ways to display content however I hope this answers your question.
spikemeister is offline   Reply With Quote
Old 3rd November 17, 02:25 AM   #3
judgedredd
WLC Member
 
judgedredd's Avatar
 
Join Date: Sep 2017
Location: Canada
Posts: 5
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

Hi spikemeister,

From looking at your code snippets I can see that the only part of the page that will scroll is inside the table cell that has the div class set. This will cause a scroll bar to appear at the edge of that cell (usually on the right).

What I want is for the web browser's scroll bar to be activated that will scroll text content inside the table cell with the div 'class.'

Thanks for posting.
judgedredd is offline   Reply With Quote
Old 3rd November 17, 08:40 AM   #4
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

I understand now. One solution would be to again wrap the contents in a div and give it a fixed position. How well it will work within the cell of a table I am not sure but I would say it would be the simplest solution.

Code:
position: fixed
spikemeister is offline   Reply With Quote
Old 3rd November 17, 08:43 AM   #5
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

My apologies that meant to say all the elements you don't want to move should be fixed.
spikemeister is offline   Reply With Quote
Old 12th November 17, 07:18 PM   #6
judgedredd
WLC Member
 
judgedredd's Avatar
 
Join Date: Sep 2017
Location: Canada
Posts: 5
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

Hi spikemeister,

Ok. Thanks for the posts.
judgedredd is offline   Reply With Quote
Old 13th November 17, 09:59 AM   #7
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

Hi it works. I will post a working example this evening.
spikemeister is offline   Reply With Quote
Old 13th November 17, 09:00 PM   #8
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

Unfortunately I admit defeat, I can't manage it with tables.

See code below (not fully tested, only in chrome) but it is somewhere to start.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
  height: 100%;
  margin: 0;
}
aside {
  background: #CCCCCC;
  height: 90%;
  width: 120px;
  position: fixed;
  overflow:auto;
}
ul {
  list-style: none;
}
section {
  height: 100%;
  margin-top: 60px;
}
header {
  background: #CCCCCC;
  height: 60px;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 99;
}
.container {
  left: 0;
  margin-left: 120px;
  height: 100%;
  position: relative;
  text-align: center;
}

footer {
background: #CCCCCC;
  height: 60px;
  left: 0;
  position: fixed;
  text-align: center;
  bottom: 0;
  width: 100%;
  z-index: 99;

}
</style>
</head>
<body>
<div class="nav-header">
   <header>Heading 1</header>
</div>
<aside>
  <nav>
    
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </nav>
</aside>

<div class="container">
  <section>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra sodales mi et euismod. Cras non nulla velit. Duis sit amet lorem vitae nunc faucibus venenatis. Aliquam aliquet hendrerit lectus. Suspendisse accumsan at tellus vitae fringilla. Integer semper mi nulla, vitae iaculis odio interdum quis. In pulvinar rhoncus est vel eleifend. Vestibulum placerat diam lectus, placerat bibendum lectus convallis convallis. Sed feugiat turpis ut nunc porttitor egestas. Ut a volutpat libero.</p>

<p>Phasellus finibus odio id quam maximus lobortis. Sed sit amet consectetur nulla. Nam sodales eleifend leo. Donec maximus, mi eu maximus scelerisque, turpis ligula egestas libero, a placerat metus libero sed libero. Etiam porttitor mauris felis, sed laoreet velit sagittis in. Sed vel lacinia felis. Curabitur consectetur dolor justo, at laoreet urna hendrerit vitae. Mauris convallis, massa quis blandit egestas, arcu elit cursus enim, sed ornare odio felis non felis.</p>

    <p>Proin massa lacus, tristique ut tempor sed, vestibulum id lectus. Maecenas egestas rhoncus ante, vitae mattis sapien pulvinar ac. Aenean consectetur, magna ac rutrum interdum, felis arcu vulputate libero, eu bibendum lectus lorem eget tellus. In ut urna mattis augue rhoncus aliquet vel ac velit. Sed dapibus mi ante, quis blandit enim maximus lobortis. Morbi odio quam, euismod vitae rutrum quis, vehicula nec turpis. Aliquam a lobortis metus.</p>

    <p>Vestibulum sed semper tortor. Nam luctus sed orci eget interdum. Sed dignissim lorem purus, sit amet elementum erat fermentum sed. Integer sit amet euismod libero. Vestibulum interdum magna quam, vitae tincidunt purus dignissim quis. Vivamus ut dignissim metus. Mauris mi risus, molestie id eros eu, rutrum finibus justo. Mauris quis leo ac sem pharetra ultrices rhoncus vitae massa. In a orci in eros dictum blandit ac id dolor.</p>

    <p>Aliquam consequat tincidunt eros a tempor. Phasellus laoreet nisl neque, luctus eleifend ante ultricies id. Duis eget aliquam orci. Etiam ut rutrum est. Duis libero nisi, bibendum sit amet urna eget, lacinia scelerisque arcu. Donec gravida ipsum vel dolor tristique, sit amet posuere ipsum varius. Nunc porta, nisl vel laoreet tincidunt, lectus augue convallis leo, vitae venenatis nibh ante nec dolor. Suspendisse finibus fermentum eros, condimentum malesuada diam mollis eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce tristique purus tellus, vel consectetur metus luctus ac.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra sodales mi et euismod. Cras non nulla velit. Duis sit amet lorem vitae nunc faucibus venenatis. Aliquam aliquet hendrerit lectus. Suspendisse accumsan at tellus vitae fringilla. Integer semper mi nulla, vitae iaculis odio interdum quis. In pulvinar rhoncus est vel eleifend. Vestibulum placerat diam lectus, placerat bibendum lectus convallis convallis. Sed feugiat turpis ut nunc porttitor egestas. Ut a volutpat libero.</p>

    <p>Phasellus finibus odio id quam maximus lobortis. Sed sit amet consectetur nulla. Nam sodales eleifend leo. Donec maximus, mi eu maximus scelerisque, turpis ligula egestas libero, a placerat metus libero sed libero. Etiam porttitor mauris felis, sed laoreet velit sagittis in. Sed vel lacinia felis. Curabitur consectetur dolor justo, at laoreet urna hendrerit vitae. Mauris convallis, massa quis blandit egestas, arcu elit cursus enim, sed ornare odio felis non felis.</p>

    <p>Proin massa lacus, tristique ut tempor sed, vestibulum id lectus. Maecenas egestas rhoncus ante, vitae mattis sapien pulvinar ac. Aenean consectetur, magna ac rutrum interdum, felis arcu vulputate libero, eu bibendum lectus lorem eget tellus. In ut urna mattis augue rhoncus aliquet vel ac velit. Sed dapibus mi ante, quis blandit enim maximus lobortis. Morbi odio quam, euismod vitae rutrum quis, vehicula nec turpis. Aliquam a lobortis metus.</p>

    <p>Vestibulum sed semper tortor. Nam luctus sed orci eget interdum. Sed dignissim lorem purus, sit amet elementum erat fermentum sed. Integer sit amet euismod libero. Vestibulum interdum magna quam, vitae tincidunt purus dignissim quis. Vivamus ut dignissim metus. Mauris mi risus, molestie id eros eu, rutrum finibus justo. Mauris quis leo ac sem pharetra ultrices rhoncus vitae massa. In a orci in eros dictum blandit ac id dolor.</p>

    <p>Aliquam consequat tincidunt eros a tempor. Phasellus laoreet nisl neque, luctus eleifend ante ultricies id. Duis eget aliquam orci. Etiam ut rutrum est. Duis libero nisi, bibendum sit amet urna eget, lacinia scelerisque arcu. Donec gravida ipsum vel dolor tristique, sit amet posuere ipsum varius. Nunc porta, nisl vel laoreet tincidunt, lectus augue convallis leo, vitae venenatis nibh ante nec dolor. Suspendisse finibus fermentum eros, condimentum malesuada diam mollis eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce tristique purus tellus, vel consectetur metus luctus ac.</p>
  </section>
</div>
<footer>
  <p>Footer Text Goes Here</p>
</footer>
</body>
</html>
It scrolls only the content using the browser scrollbar and will scroll the menu if enough items are added. The side menu, the header section and the footer section all remain in position. It also doesn't "break" if not enough content.

Maybe some redundant code and could be tidied up a bit.

Last edited by spikemeister; 13th November 17 at 09:05 PM. Reason: Addition
spikemeister is offline   Reply With Quote
Old 22nd November 17, 07:02 PM   #9
judgedredd
WLC Member
 
judgedredd's Avatar
 
Join Date: Sep 2017
Location: Canada
Posts: 5
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

Hi spikemeister,

Thanks for that code. I will test it out over the next few days. A bit swamped with work at the moment.

Thank you very much for your effort.
judgedredd is offline   Reply With Quote
Old 22nd November 17, 08:02 PM   #10
judgedredd
WLC Member
 
judgedredd's Avatar
 
Join Date: Sep 2017
Location: Canada
Posts: 5
Default Re: Using CSS how can I vertically scroll content in 1 table column w/browser scrollb

I just tried that code spikemeister and it works well, even in an iPad. So thanks for that.
judgedredd is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Hybrid Mode Hybrid Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:21 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.