I want to make this DateTime picker take up the entire screen and also change the style of some parts such as the size of each time slot and day.
I've got this from https://reactdatepicker.com/#example-default and the github repo for it is https://github.com/Hacker0x01/react-datepicker
Any help would be much appreciated!
You can check in the examples the Custom calendar class name.
It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:
.rasta-stripes {
.react-datepicker__week:nth-child(3n + 1) {
background-color: #215005;
}
.react-datepicker__week:nth-child(3n + 2) {
background-color: #eea429;
}
.react-datepicker__week:nth-child(3n + 3) {
background-color: #a82a15;
}
}
So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.
To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.
Related
First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
I would like to customise the dialog of a Vaadin CRUD component (java) by replacing the min-width of the overlay with :
:host([theme~="layout"]) [part="overlay"] {
min-width: 100%;
}
I put it into a css flle and then add in my java class :
#CssImport( value = "styles/gridCrudEditor.css",
themeFor = "vaadin-dialog-overlay",
id = "dialog-layout-overlay-theme")
But it apply for all grid crud editor and I would like to apply it to only one instance.
By default, it's (in vaadin-dialog-layout-overlay-styles.js)
:host([theme~="layout"]) [part="overlay"] {
max-width: 54em;
min-width: 20em;
}
As it's the dialog of the crud... I don't how to proceed
You should be able to do the following:
Java
crud.addThemeName("my-theme");
CSS
:host([theme~="my-theme"]) [part="overlay"] {
min-width: 100%;
}
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
Just created a registration form, and I want to extend a label text to be shown into one line. With CSS inspector found that class is:
.rmagic .rmrow .rmfield label
and when I insert:
width: 600px;
It is working fine, but extends all other fields as well, and I just need the last one. I set a custom class to that field, called posledno but when I insert it into my custom CSS:
rmfield.form_1_1-element-18.posledno label {
widht:600px;
}
It doesn't make any changes. How to extend this field ? Page example at the bottom.
and I just need the last one
Since you need the last-child of an element, you're better off using the :last-child selector.
Here is what would work:
#rm_form_page_form_1_1_1 .rmfieldset .rmrow:last-child .rmfield label {
width: 600px;
background-color: #f00; /** for easier identification */
}
Although I would recommend using % instead. (relative to the parent element unit)
I wrote a pretty complicated widget that uses OnDemandList to create a widget that allows full editing (including adding) of a store.
Now... I am not exactly a CSS guru (quite the contrary), and would love some guidance, just to check that I am doings things in a semi-sane way.
When I create the editor in my widget, I do:
buildRendering: function(){
// ...
this.domNode = put( 'div' );
// ...
},
postCreate: function(){
// ...
// This is here, because if I set the class in buildRendering, it gets zapped by className (the widget's declaration)
put( this.domNode, '.editable-list' );
// ...
},
Then when an editor is added dynamically:
put( row.element, editingWidget.domNode );
put( editingWidget.domNode, '.editable-list-row-editor' );
I also need to make sure that each row has position:absolute so that the editor gets placed in the right spot:
domStyle.set( row.element, 'position', 'relative' );
In the CSS, I have:
.editable-list-row-editor {
position: absolute;
top: 0;
z-index: 20;
}
Questions:
1) Is it OK in terms of best practices to even add a style like I did with domStyle.set( row.element, 'position', 'relative' ); ...? Or shall I do that with CSS? I did it programmatically because it's really important that it's relative.
2) Is it OK in terms of CSS to leave things as non-specific as possible? The idea is that users might (and probably will) end up writing their own CSS, and overriding things by writing more specific rules... is that right? Or maybe I should have written:
.editable-list .editable-list-row-editor {
position: absolute;
top: 0;
z-index: 20;
}
Or better:
.editable-list .row-editor {
position: absolute;
top: 0;
z-index: 20;
}
...?
3) From what I am seeing, CSS classes for widgets should be set in postCreate rather than buildRendering, otherwise Dojo seems to use className to zap anything that was set there... is that what you'd normally do with a widget that creates its own domNode?
My personal opinion on the inline CSS vs CSS stylesheet is that I like to write everything in a seperate stylesheet. The reasoning behind this is that your code becomes cluttered with styling code, but when seperating concerns I think it would be better to write your CSS in a seperate file.
Of course, inline CSS is always the most specific one (the most important one), so if you really want to enforce something, you could add an !important to your CSS rule altought I would recommend use them not that much.
You should write your CSS as specific as possible, because you don't want to interfere with other widgets/HTML but you don't want the opposite as well (external CSS interfering with your widget). But of course, you can write things as:
.editable-list .row-editor {
position: absolute;
top: 0;
z-index: 20;
}
It mostly depends on what .row-editor actually means. If it's something "global", you could keep .row-editor, simply because it will allow you to define a global .row-editor which contains the CSS that is in common, while your .editable-list .row-editor will contain specific CSS rules for that widget.
For example, let's consider that you have another widget with a similar CSS:
.other-widget .row-editor {
position: absolute;
top: 0;
z-index: 25;
}
Then you could also write the following CSS:
.row-editor {
position: absolute;
top: 0;
}
.editable-list .row-editor {
z-index: 20;
}
.other-widget .row-editor {
z-index: 25;
}
But it actually depends on how you see the .row-editor class, if you think it's only specific to your editable list, then you might also consider prefixing it. It's similar to what Dojo already does, Dojo has global CSS classes like .dijitInline but also specific CSS classes like .dijitCalendarDateLabel.
If someone wants to change the style of the widget, he could add a parent class and so he will be able to make a more specific CSS selector. An example, let's say that the following is your CSS:
.editable-list .row-editor {
position: absolute;
top: 0;
z-index: 20;
}
Then someone who wants to change the CSS just adds a tag to a parent (for example the <body> tag):
<body class="myTheme">
<!-- Your HTML -->
</body>
And then specifies the following CSS:
.myTheme .editable-list .row-editor {
z-index: 30;
}
This will actually override your z-index. Dojo already uses this principle with their themes. When you want to use a specific theme, you add the theme CSS and add the name of the theme as a classname in your body, for example:
<body class="claro">
<!-- Your HTML -->
</body>
Of course you don't need to define it at body-level, as long as it's a parent node of your widget it will work.
About the issue about buildRendering vs postCreate, well, I suppose that you use the dijit/_TemplatedMixin mixin. If that's so, then if you look at the code and look for buildRendering you will see it's doing stuff. This means that if you write your own buildRendering you will actually replace their code with yours. If you want to make sure that Dojo executes its own logic first, you have to write something like:
buildRendering: function() {
this.inherited(arguments);
/** Your code */
}
That extra line of code will in fact call the same method of the inherited modules/mixins. You can do with that line what you want, if you don't want that the inherited modules are called, you leave it out (probably breaking it as well), if you want to execute it as the last step you just switch the this.inherited(arguments); to your last step in the buildRendering function (but then it might override your changes).
But in the end, this is all just an opinion and I'm sure that there are other opinions there that are also correct (for other or even similar use cases). But I can tell you that Dojo does things in a similar way for their own widgets, so maybe it's not a bad approach to follow it as well.
Sorry for the long answer, but I wrote it so that it might be useful for similar questions as well.