ng2-ui / datetime-picker

Angular2 DateTime Picker
https://ng2-ui.github.io/#/datetime-picker
MIT License
121 stars 62 forks source link

Days padding and width cause display issues #184

Open dalpiazk opened 7 years ago

dalpiazk commented 7 years ago

The CSS for the .ngui-datetime-picker .days styling sets the width to 210px, which is 7 times the width of each day(30px). However, it then adds 10px to the left and right side, making the total 230px. This causes wrapping issues with the dates. To fix it, the width can be set to 230px or padding can be removed.

.ngui-datetime-picker  .days {
  display: inline-block;
  width: 210px; /* 30 x 7 */
  text-align: center;
  padding: 0 10px;
}

screen shot 2017-04-13 at 11 37 16 am

allenhwkim commented 7 years ago

You have box-sizing: border-box applied. apply box-sizing: content-box; or increase the width manually until we forcefully apply border-box or content-box

saineshwar commented 7 years ago

just making padding as 0 it will resolve your issue.

padding: 0 0px;

Update code snippet

.ngui-datetime-picker .days { display: inline-block; width: 210px; / 30 x 7 / text-align: center; padding: 0 0px; }