Where is the CSS?

[claudiuconstantin]

Where is the CSS?

[maheshyaddanapudi]

CSS

.cron-editor-container {
    padding-left: 10px;
  }
  
  .cron-editor-container .cron-editor-radio {
    width: 20px;
    display: inline-block;
  }
  
  .cron-editor-container .cron-editor-select,
  .cron-editor-container .cron-editor-input,
  .cron-editor-container .cron-editor-checkbox {
    display: inline;
  }
  
  .cron-editor-container .well-time-wrapper {
    padding-left: 20px;
  }
  
  .cron-editor-container .inline-block {
    display: inline-block;
  }
  
  .cron-editor-container .minutes,
  .cron-editor-container .hours,
  .cron-editor-container .days,
  .cron-editor-container .seconds {
    width: 70px;
  }
  
  .cron-editor-container .months {
    width: 120px;
  }
  
  .cron-editor-container .month-days {
    width: 130px;
  }
  
  .cron-editor-container .months-small {
    width: 60px;
  }
  
  .cron-editor-container .day-order-in-month {
    width: 95px;
  }
  
  .cron-editor-container .week-days {
    width: 120px;
  }
  
  .cron-editor-container .advanced-cron-editor-input {
    width: 200px;
  }
  
  .cron-editor-container .hour-types {
    width: 70px;
  }
  
  .cron-editor-container .advanced-cron-editor-label {
    font-weight: 200;
  }

  .nav-tabs li {
    height: 50px;
  }

  .nav li a:hover,
    .nav li.active a:focus,
    .nav li.active a:hover{
    background-color:gray;
    }

  .nav li.active a{
        color: #000;
        background-color:cyan;
    }

  .nav-tabs li a {
    border-width: 1px;
    border-color: black;
    border-left-style: solid;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    cursor: context-menu;
    padding: 27px;
    font-weight: bolder;
    font-display: block;
    font-size: larger;
  }

  .form-control {
    height: auto;
  }

HTML

<div class="card container-fluid bg-white">
  <div class="mt-5 container-fluid bg-white col-md-8">
    <cron-editor [(cron)]="cronExpression" [disabled]="isCronDisabled" [(options)]="cronOptions"></cron-editor>
    <hr />
    <p>The resulting Cron expression: <strong>{{cronExpression}}</strong></p>
  </div>
</div>

Sample Screenshot

[andrewryan1906]

OK,

I see the problem... this is Bootstrap 3... I needed to import the older version of Bootstrap.

Thanks,
Andrew

[claudiuconstantin]

The best way to avoid these kind of problems is to replace Bootstrap with some custom css. If anybody wants to participate with a PR for this, the entire world would be grateful :)

[grreeenn]

@claudiuconstantin I've wrote some basic CSS (SCSS, actually) for it, as I don't want to use bootstrap; does someone need it yet? :)

[en3on]

@grreeenn Are you able to post the file somewhere? I'd love to use it!

[shalin-rahman]

@claudiuconstantin I've wrote some basic CSS (SCSS, actually) for it, as I don't want to use bootstrap; does someone need it yet? :)

i need those.

[aghilimc]

@claudiuconstantin I've wrote some basic CSS (SCSS, actually) for it, as I don't want to use bootstrap; does someone need it yet? :)

i need it, please inform me , where i can find it?

[mail4deepali]

I could not apply these CSS and the tabs are not looking good.
Where to add this CSS?

I have added a component and used cron-editor in it.
Do I need to update the component CSS file or somewhere else I need to add the CSS reference?
Please help.

Thank you,
Deepali

[sls-500]

same Problem as mail4deepali,
included scss and bind it to the html.. cleared bootstrap from dependencies in package.json.. but nothing.. what could block the css in the project ?

Or need to change or add sth in the angular.json?

[sls-500]

it just look like this sadly

[mail4deepali]

Hello @sls-500,

Copying the styles to application style.css (src=>style.css) solved the issue.
Hope this helps.