Comments (11)
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
from cron-editor.
OK,
I see the problem... this is Bootstrap 3... I needed to import the older version of Bootstrap.
Thanks,
Andrew
from cron-editor.
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 :)
from cron-editor.
@claudiuconstantin I've wrote some basic CSS (SCSS, actually) for it, as I don't want to use bootstrap; does someone need it yet? :)
from cron-editor.
@grreeenn Are you able to post the file somewhere? I'd love to use it!
from cron-editor.
@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.
from cron-editor.
@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?
from cron-editor.
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
from cron-editor.
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?
from cron-editor.
it just look like this sadly
from cron-editor.
Hello @sls-500,
Copying the styles to application style.css (src=>style.css) solved the issue.
Hope this helps.
from cron-editor.
Related Issues (20)
- Render not working HOT 7
- Wrong expression generated HOT 1
- Translations HOT 4
- `hideMinutes` of Undefined
- Component value is not nullable
- use24HourTime AM/PM binding incorrect.
- The editor is not display when hideMonthlyTab is true as default HOT 1
- Generated wrong expression for seconds.
- Instantiate with default values while reopening cron editor
- Instantiate with default values while reopening cron editor HOT 1
- How to set minutes tab as default initially ?
- How to show the value use formcontrol in cron editor
- Type '{}' is not assignable to type 'string' HOT 1
- How to get the separate values for all fields.
- In Daily just show Every day or Every working day. How to implement this?
- How to generate CRON expression in angular 12
- autofill cron expression comes from the backend
- Modify UI with help of angular/ionic library
- drop-down arrow is not visible
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cron-editor.