Question 42837 in Html Question posted in
Some basic documentation can be found here.

How to add a scroll bar in the day of the calendar that the content inside is more than the fixed height? – Html

I want to make a calendar with fixed width and height, and if the content in that day is too much, it will have a scroll bar in side the day (Only appear if there have many contents).

I am trying to limit the height of the calendar even if there are content inside each day. However, if the content inside the day is more than the height, it will:

Code:

td {
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: top;
  padding: 10px;
  height: 100px;
}

When I try to add a scroll bar with display: block; and overflow-y: scroll; it become:

enter image description here

Code:

td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  height: 100px;
  display: block;
  overflow-y: scroll;
}

But it does give me what I want for that particular day:

enter image description here

SO, how can I add a scroll bar for the day that have longer content than the height?

Tags:

2

Answers


  1. 0

    From the MDN documentation for the values of the overflow-y CSS property:

    scroll: Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

    auto: Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

    Therefore you should be using auto if you want the scrollbars only to be displayed when content is actually clipped.

    Login or Signup to reply.
  2. 0

    Setting the td to display: block will change the way the td works.

    I suggest that you add the content of the table cell inside of another div and manipulate the width, height and overflow on the div instead of the td

    This way the table elements will act as table elements.

    https://jsfiddle.net/tpsznme3/15/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search