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.
I want to add internalization in my app. So I have a JSON file with all my values.
HTML side I manage to retrieve the values but css side I use a before.
In my HTML i use the class "menu-input" available right here :
<div class="header">
<app-game class="menu-input" [gameId]="gameId"></app-game>
<h1>{{'GAME.TITLE' | translate}}</h1>
</div>
This class is called in my scss file where I add a before :
.menu-input {
user-select: none;
display: block;
&::before {
content: 'Partie : ';
}
For the moment the content of my before is not yet translated. The goal is to transform my content with the value {{'GAME.NAME'}}
You can use css variables to solve this.
Working example: https://stackblitz.com/edit/angular-oaxdve?file=src%2Fapp%2Fapp.component.html
Taking in account reusability, you can define variables in your styles.css / scss:
:root {
--custom-text: 'Default';
--custom-text-2: 'Default';
}
And in your local css file you make use of the above variables like:
div::before {
content: var(--custom-text);
}
Then on app load or language change you get your translated text and go over the list of 'custom-text' options and set them using:
document.documentElement.style.setProperty('--custom-text', "'Hello'");
Im trying to make wider field of "last post" in phpBB. I edited CSS "lastpost" class from 250 to 300 value but looks like left fields are not responsible so extended field goes on next line and forum's list get f*ed up. What I should edit more?
Address of phpBB is: http://schiza.me
Thanks
You need to change multiple selectors.
Here is an example :
dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info {
width: 300px;
font-size: 1.1em;
}
Other table lines will need to always keep the same total size you will migth want to change an other property like that one for th number of topics and views :
dd.posts, dd.topics, dd.views {
width: 75px;
}
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.
It is very convenient to style input tags using their IDs as they have more precedence weight than classes have.
For example, I have a default width for input.text elements in a specific container:
.details .metadata input.text { width: 200px; }
To change the width for a specific page, it's more convenient to use the ID instead of the long selector above:
#my_input { width: 150px; }
Now I have automatically generated input fields somewhere in my app (generated using form_for and nested_attributes_for in Ruby On Rails) which generates IDs like so:
#event_rules_attributes_0_interval
#event_rules_attributes_1_interval
#event_rules_attributes_2_interval
...etc...
and
#event_rules_attributes_0_count
#event_rules_attributes_1_count
#event_rules_attributes_2_count
...etc...
So I need to use an ID selector like "begins with event_rules_attributes_" AND "ends with _count" or "begins with event_rules_attributes_" AND "ends with _interval". I know that there are the [id$=] and [id^=] matchers, but can they be combined somehow?
Just found it out myself:
[id^='event_rules_attributes_'][id$='_interval'] { width: 150px; }
Seems a bit ugly, but works.