AngularStrap datepicker looks odd

Question

I'm trying to use the AngularStrap datepicker in my project by following the directions on the AngularDart getting started guide The functionality is fine, but the look is off. Even without my own stylesheets loaded the look is not what it should be. These 2 screenshots should clarify the issue:

How it should look:

How it actually looks:

The application is scaffolded with yeoman.io

The bower.json config:

{
  "name": "myapp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.14",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.1.0",
    "angular-resource": "1.2.14",
    "angular-cookies": "1.2.14",
    "angular-sanitize": "1.2.14",
    "angular-route": "1.2.14",
    "moment": "~2.5.1",
    "angular-strap": "~2.0.0",
    "angular-motion": "~0.3.2",
    "angular-animate": "~1.2.14"
  },
  "devDependencies": {
    "angular-mocks": "1.2.14",
    "angular-scenario": "1.2.14"
  },
  "resolutions": {
    "angular": "1.2.14"
  }
}

The relevant index.html snippets:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.min.css" />
...
<link rel="stylesheet" href="styles/style.css"/>
....
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>

The datepicker input tag in html:

<input type="text" class="form-control" ng-model="selectedDate" name="date" data-date-format="dd-MM-yyyy" data-start-view="2" bs-datepicker>

Incite

Answer 1

You need to add the following styles:

.datepicker.dropdown-menu {
  width: 250px;
  height: 250px;
  button {
    outline: none;
    border: 0px;
  }
  tbody {
    height: 180px;
  }
  tbody button {
    padding: 6px;
  }
  &.datepicker-mode-1, &.datepicker-mode-2 {
    tbody button {
      height: 65px;
    }
  }
}

.timepicker.dropdown-menu {
  padding: 0 4px;
  button {
    outline: none;
    border: 0px;
  }
  tbody button {
    padding: 6px;
  }
}

Note that this is less/sass formatted. If you need straight css, convert it first here.

Here is an angular-strap issue in which mgcrea supplies this needed css: https://github.com/mgcrea/angular-strap/issues/398.

Essentially, you just need to remove button borders and outlines and add some spacing and it'll look just like on the angular-strap page.

Strew

additionally, it solves a width issue when using grid! :) – Vimen

Looks like the author has published this (and other similar styles bridging between angular-strap and bootstrap) as a separate project called bootstrap-additions: github.com/mgcrea/bootstrap-additions – Permission