search

creativetimofficial / argon-dashboard-angular

MIT License
183 stars 557 forks source link

datepicker style is broken #3

Closed ostar0816 closed 5 years ago

ostar0816 commented 5 years ago

argon-version: 1.0.0 "@ng-bootstrap/ng-bootstrap": "4.0.1", "bootstrap": "4.1.3",

datepicker style is broken like below: image

Tried to upgrade bootstrap into 4.3.1 but same error happens. Please help!

chelaruc commented 5 years ago

@ostar0816 You need to import our styles.

ostar0816 commented 5 years ago

@chelaruc How to import your styles? I just cloned this repository and thought all required styles are automatically imported to this repo.

chelaruc commented 5 years ago

Check the angular.json file -> styles and tell me what imports you have there.

ostar0816 commented 5 years ago

Just same as this repo- https://github.com/creativetimofficial/argon-dashboard-angular/blob/master/angular.json

ostar0816 commented 5 years ago

@chelaruc Need to import external style for plugin components? The thing is datepicker style works right on your document - https://demos.creative-tim.com/argon-dashboard-angular/#/documentation/datepicker but not on this repo. For the temporary solution, I inspected the datepicker style from documentation and copied them to style.scss of this project project.

` ngb-datepicker { border-radius: .375rem!important; direction: ltr!important; top: 0!important; left: 0!important; padding: 20px 22px!important; box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1) }

ngb-datepicker, ngb-datepicker * { outline: 0 }

ngb-datepicker-rtl { direction: rtl }

ngb-datepicker-rtl.dropdown-menu { left: auto }

ngb-datepicker-rtl table tr td span { float: right }

ngb-datepicker .bg-light { background: 0 0!important }

ngb-datepicker:focus { outline: 0!important }

ngb-datepicker .ngb-dp-header { border-bottom: none!important }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation { color: #5e72e4 }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow { justify-content: center!important }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow:hover { background: #e9ecef; border-radius: .375rem }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow-btn { margin: 0!important; top: -3px }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation .ngb-dp-arrow-btn .ngb-dp-navigation-chevron { color: #5e72e4; width: 6px; height: 6px }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation ngb-datepicker-navigation-select .custom-select { font-weight: 300; color: #5e72e4; border: none!important; background: 0 0!important; -webkit-appearance: menulist!important; box-shadow: none!important }

ngb-datepicker .ngb-dp-header ngb-datepicker-navigation ngb-datepicker-navigation-select .custom-select:hover { background: #e9ecef!important; border-radius: .375rem }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week { border: none }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-weekday { color: #5e72e4; padding-top: 10px; opacity: .8; font-style: normal!important; line-height: 20px; font-weight: 300; width: 36px; height: 36px; font-size: .875rem; transition: all .15s ease; text-align: center; border: none }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .small { font-size: 14px }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day { font-size: .875rem; width: 36px; height: 36px; transition: all .15s ease; text-align: center; border: none; border-radius: 50% }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day { width: 36px; height: 36px; box-shadow: none; color: #525f7f; border-radius: 50%; align-items: center; display: grid }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light:active, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light:hover, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day:active, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day:hover { box-shadow: none; border: none; background-color: transparent }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.faded, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.faded { border-radius: 0 }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range { color: #fff }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range:hover, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range:hover { background: #5e72e4 }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range-start, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range-start { border-top-right-radius: 0; border-bottom-right-radius: 0 }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .btn-light.range-end, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .custom-day.range-end { border-top-left-radius: 0; border-bottom-left-radius: 0 }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day:active, ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day:hover { box-shadow: none; border: none; background-color: transparent }

ngb-datepicker .ngb-dp-months ngb-datepicker-month-view .ngb-dp-week .ngb-dp-day .text-muted { color: #adb5bd }

.datepicker-container input option { display: none }

.custom-day.range { color: #fff; background: #5e72e4; box-shadow: none; font-size: .875rem; width: 36px; height: 36px; transition: all .15s ease; text-align: center; border: none; border-radius: 50% }

.custom-day.range.faded { border-radius: 0 } `

But I don't think it's an ideal solution and I believe these kind of styles should be included by default without any additional actions.

chelaruc commented 5 years ago

@ostar0816 add this scss code:


ngb-datepicker {
  border-radius: $datepicker-border-radius !important;
  direction: ltr !important;

  &,
  & * {
    outline: none;
  }
  &-rtl {
      direction: rtl;
      &.dropdown-menu {
          left: auto;
      }
      table tr td span {
          float: right;
      }
  }
  top: 0!important;
  left: 0!important;
  padding: $datepicker-dropdown-padding!important;
  @include box-shadow($dropdown-box-shadow);

  .bg-light {
    background: transparent !important;
  }

  &:focus {
    outline: none !important;
  }
  .ngb-dp-header {
    border-bottom: none !important;

    ngb-datepicker-navigation {
      color: $primary;

      .ngb-dp-arrow{
        justify-content: center !important;

        &:hover{
          background: #e9ecef;
          border-radius: .375rem;
        }
      }

      .ngb-dp-arrow-btn {
        margin: 0 !important;
        top: -3px;

        .ngb-dp-navigation-chevron {
          color: $primary;
          width: 6px;
          height: 6px;
        }
      }
      ngb-datepicker-navigation-select {
        .custom-select {
          font-weight: 300;
          color: $primary;
          border: none !important;
          background: transparent !important;
          -webkit-appearance: menulist !important;
          box-shadow: none !important;

          &:hover{
            background: #e9ecef !important;
            border-radius: .375rem;
          }
        }
      }
    }
  }
  .ngb-dp-months {
    ngb-datepicker-month-view {
      .ngb-dp-week {
        border: none;
        .ngb-dp-weekday {
          color: $primary;
          padding-top: 10px;
          opacity: 0.8;
          font-style: normal !important;
          line-height: 20px;
          font-weight: 300;
          width: 36px;
          height: 36px;
          font-size: .875rem;
          transition: all .15s ease;
          text-align: center;
          border: none;
        }
        .small {
          font-size: 14px;
        }
        .ngb-dp-day {
          font-size: .875rem;
          width: 36px;
          height: 36px;
          transition: all .15s ease;
          text-align: center;
          border: none;
          border-radius: 50%;

          .btn-light,
          .custom-day {
            width: 36px;
            height: 36px;
            box-shadow: none;
            color: #525f7f;
            border-radius: 50%;
            align-items: center;
            display: grid;

            &:hover,
            &:active {
              box-shadow: none;
              border: none;
              background-color: transparent;
            }

            &.faded{
              border-radius: 0;
            }
            &.range{
              color: $white;
              &:hover{
                background: #5e72e4;
              }
            }
            &.range-start{
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            &.range-end{
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            }
          }
          &:hover,
          &:active {
            box-shadow: none;
            border: none;
            background-color: transparent;
          }
          .text-muted {
            color: #adb5bd;
          }
        }
      }
    }
  }
}
.datepicker-container {
  input option {
    display: none;
  }
}

.custom-day.range{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: #fff;
  background: #5e72e4;
  box-shadow: none;
  font-size: .875rem;
  width: 36px;
  height: 36px;
  transition: all .15s ease;
  text-align: center;
  border: none;
  border-radius: 50%;

  &.faded{
    border-radius: 0;
  }
}

I'll update the product tomorrow to fix this.

ostar0816 commented 5 years ago

I already did that :) I will look forward to the product update. This is really amazing light-weighted dashboard. I love this! Thanks a lot

bielas commented 5 years ago

@chelaruc can you update also this issue when you update the repo?

bielas commented 5 years ago

hey guys, when are you going to fix this?

chelaruc commented 5 years ago

Hi, @bielas! Can you download the product again?

Robokishan commented 4 years ago

i am still having a problem. steps i used 1 . git clone the repo

  1. npm install in directory
  2. npm start
  3. copy and paste code from the documentation https://demos.creative-tim.com/argon-dashboard-angular/#/documentation/datepicker
  4. but still same as mentioned in first pic of this post
Untitled
rarestoma commented 4 years ago

Hi @Robokishan,

Thank you for working with our products.

This is an issue from our last update, please go to src/assets/scss/angular-differences/plugins/_ng-bootstrap.scss and do the following changes:

  1. Add background: #fff; to .ngb-dp-header.
  2. At line 88 change ngb-datepicker-month-view to ngb-datepicker-month
  3. Add background: #fff; to .ngb-dp-week

Please let me know if it works.

Thank you, Rares

sasithahtl commented 4 years ago

Hi @Robokishan,

Thank you for working with our products.

This is an issue from our last update, please go to src/assets/scss/angular-differences/plugins/_ng-bootstrap.scss and do the following changes:

  1. Add background: #fff; to .ngb-dp-header.
  2. At line 88 change ngb-datepicker-month-view to ngb-datepicker-month
  3. Add background: #fff; to .ngb-dp-week

Please let me know if it works.

Thank you, Rares

Thank you! this worked.