Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularStrap datepicker looks odd

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 should look

How it actually looks:

enter image description here

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>
like image 507
nkr1pt Avatar asked Mar 15 '14 20:03

nkr1pt


1 Answers

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.

like image 143
Planky Avatar answered Oct 14 '22 02:10

Planky