CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcalendar
Lanfear
Lanfear

Reputation: 23

Bootstrap: container-fluid and Year Calendar

When i add the bootstrap year calendar to my site, it will be put nicely in one of those containers...

http://www.bootstrap-year-calendar.com/

Everything is working fine (more or less), but the calendar has a really short scroll bar at the left, and i have no clue why :(

What do i need to change to remove that scrollbar?

html,
body {
  font-family: 'Alice', Arial, Tahoma;
  padding-top: 40px;
}
#section-1,
#section-2,
#section-3,
#section-4,
#section-5,
#section-6,
#section-7,
#section-8 {
  padding-top: 50px;
}
#headingindex {
  text-align: center;
}
/*
@media screen and (max-width: 768px) {
	#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7, #section-8 {
		padding-top: 50px;
	}
}*/

p.wp-caption-text {
  font-size: 10px;
  line-height: 1;
  margin: 0;
  padding: 3px;
  text-align: right;
}
<!DOCTYPE html>
<html lang="de">

<head>
  <!-- Bootstrap -->
  <link href='https://fonts.googleapis.com/css?family=Alice' rel='stylesheet' type='text/css'>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/bootstrap-year-calendar.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap-year-calendar.js"></script>
    <![endif]-->
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="thumbnail">
          <div class="caption">
            <h2>Verfügbarkeit</h2>
            <div class="calendar-demo"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/bootstrap-year-calendar.js"></script>
  <script>
    $('.calendar-demo').calendar({
      displayWeekNumber: true,
      style: 'background',
      alwaysHalfDay: true,
      enableContextMenu: true,
      enableRangeSelection: false,
      mouseOnDay: function(e) {
        if (e.events.length > 0) {
          var content = '';

          for (var i in e.events) {
            content += '<div class="event-tooltip-content">' + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>' + '</div>';
          }

          $(e.element).popover({
            trigger: 'manual',
            container: 'body',
            html: true,
            content: content
          });

          $(e.element).popover('show');
        }
      },
      mouseOutDay: function(e) {
        if (e.events.length > 0) {
          $(e.element).popover('hide');
        }
      },
      dayContextMenu: function(e) {
        $(e.element).popover('hide');
      },
      dataSource: [{
        id: 0,
        name: 'Reserviert: 117',
        startDate: new Date(2016, 3, 8),
        endDate: new Date(2016, 3, 17)
      }, {
        id: 1,
        name: 'Reserviert: P&G',
        startDate: new Date(2016, 06, 12),
        endDate: new Date(2016, 06, 18)
      }]
    });
  </script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.js"></script>
</body>

</html>

Upvotes: 2

Views: 1786

Answers (2)

Nick_O
Nick_O

Reputation: 472

Add the CSS overflow-y:hidden; to anything scrolling. It will hide the vertical scrollbar. If it's horizontal, use overflow-x: hidden; but if you can scroll an element that would suggest the element is greater then the container.

Upvotes: 0

max
max

Reputation: 8667

Use this CSS (after calendar CSS):

.calendar {
  overflow: visible;
}

Upvotes: 2

Related Questions