I have a Dojo textbox with inline styling however i would like to define styling in an external css file for the item. I would like to know what class can be used to define styling for Dojo input="text" elements alone.
I have tried using DijitReset and DijitInputInner classes however this is not specific to text items only. Under is an example of the tag i am working with.
<input id="ltb" style="width: 50em;" data-dojo-type="dijit/form/TextBox" />
I am not comfortable with having inline css for tags since i have always know it to be a bad practice when doing modular development (your thoughts on this as well. seeing this is specific to Dojo framework)
Having a look at Dojo and how it does it styles
The reason for Dojo explicity saying use inline style is ( perhaps) because the classes they add are full of '!importants' ( now I say 'they' - this might just be what is in the default clara theme ) || some dojo javascript is looking for it
.dijitInputInner {
border: 0 !important;
vertical-align: middle !important;
background-color: transparent !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
I had a play here - and, through the inpsect tools in chrome , it showed that in fact the id on the input stayed put, so we could use it ...
#ltb { width:50em; }
/* but we need to overide it */
#ltb.dijitReset, #ltb.dijitInputInner { width:5em !important; }
From the trials we can see that we are also going to be battling with the CSS for the dojo containers , that are set as overlow:hidden etc.
I don't know the reason for the clara stylesheet using importants ( I'm taking it that is the default dojo theme ) - but the answer to the inline styling question is either
use the inline style ( don't fight with dojo )
or change the dojo theme file itself
Or create our own css overides using !important
or something I am missing from the docs in my very limited experience of dojo
Related
Im working on react web app which has less file for its styling. As
shown below, EnPage is a 3rd party component, which has content within
it, Actually the main element class "page-body" has some styling
issue, so I want to overwrite it with a styling fix
<div class="Banner">
<EnPage>
<div class="page">
<main class="page-body"> ...</main>
</div>
</EnPage>
</div>
when on hovering over in chrome devtools, I can see
.page-body {
padding-right : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
padding-left : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
}
In dev tools, if set these both attributes to 0, then it fixes styling
issue
.page-body {
padding-right : 0;
padding-left : 0;
}
Now how to do this code , like the below?
.Banner {
--page-content-screen-lg-horizontal-padding : 0;
}
Generally third parts materials generate custom classes that style your element. Normally, their classes are inyected after yours, to be sure that their styles have precedence over inherited or previously defined styles.
Things you should try:
1 - Read the documentation of the material library.
Depending on the material library you are using, they may provide a custom way to overpass their basic styles. Some do, other don't. Please be sure to check their documentation to see if this is the case.This is always the best option as you are ensuring the material will work as designed and will not cause any bugs or conflicts.
2 - Give an id to your element and place your custom styles on the id.
This works because CSS styles are defined based on specificty precedence. As ids are more specific than classes, these styles have priority over the ones defined by classes.
Example:
html:
<main class="page-body" id="page-body"> ...</main>
css:
#page-body {
padding-right: 0;
padding-left: 0;
}
3 - If nothing else seems to work and you really need to replace the material style, you could use !important. But please note that this is a bad practice and many state that !important really shouldn't exist in the first place, as if your need to use it is because you are not understanding css precedences rules and you are just hacking the css logics.
Putting this duscission aside, you may place !important after your declaration and this is going to enforce your rule over any other that might exist.
Example:
.page-body {
padding-right: 0 !important;
padding-left: 0 !important;
}
Did I mention this is a bad idea?
If you want to read more about css precedence:
What is the order of precedence for CSS?
https://css-tricks.com/precedence-css-order-css-matters/
There's a certain CSS property that I want to remove, but I can't because it is auto-generated by a backend engine called Pelican.
.rendered_html ul:not(.list-inline) {
padding-left: 2em;
}
I want to remove this property, but I don't know how. Here's the screenshot
In a Chrome developer tool, if I uncheck that property, it works fine, but if I leave it as it is, it looks bad. And the thing I don't understand is that both appear as greyed out in chrome developer tool, and yet they seem to have effects on the CSS property. To my understanding, if the properties are greyed out, they should not have any effects, but in this case they do.
I tried doing this:
.rendered_html ul:not(.list-inline) {
padding-left: unset !important;
}
But this is not what I want because I want it, because I also want to add this property:
ul.ascii {
padding: 1rem;
}
Unsetting the padding by adding additional CSS codes in my .css file will prevent me from applying padding: 1rem property.
How can I nullify the css proprety of .rendered_html ul:not(.list-inline) ?
not ideal, but
.rendered_html ul:not(.list-inline) {
padding-left: 0 !important;
}
.rendered_html ul.ascii {
padding: 1rem !important;
}
will likely solve your problem.
the adding of the extra step .rendered_html on the second instruction gives it the same specificity hierarchy as the first one, so it wont be ignored.
you might not need !important depending on .css loading order, so try to change that too.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I want to override default Dropdown properties that belong to react semantic UI
Here is my dropdown:
<Dropdown
placeholder="User"
selection
compact
options={userOptions}
/>
The text in my dropdown has too much padding so in my CSS I removed it like so:
.default.text {
font-size: 10px;
padding: 0;
}
I got rid of the padding from the Dropdown icon as well:
.dropdown.icon {
padding: 0 !important;
}
However, as you can see this only worked when I used !important
Related questions:
How come the icon padding only works by using !important -- the text padding did not need !important
I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?
Use a higher css rule specificity, like:
.somegrandparent .someparent .dropdown.icon {
padding:0;
}
How come the icon padding only works by using !important -- the text
padding did not need !important
Your one rule is working without !important as it might already have a higher specificity whereas the other did not.
I hear using !important is bad practice. Should I avoid using it at
all costs? How else do I override these properties / What are best
practices?
It is "ok" to use to override external libraries sparingly. But if it is possible to override by a higher specificity that is preferred as it will be easier to debug css conflicts / bugs.
I am working in enhanced grid Dojo 1.10 version. My problem is very simple but still, I am not able to resolve it. I need to apply background-color css property
to a table row. But the problem there is an already background property applied to that row which has background-color also. If I remove that property from console my background-color is reflecting properly.
I have tried to override it, change it but none of them is working. Actually the class which is applied is not directly straight forward. Something like this
.claro .dojoxGridRowTable tr {
background-image : url("...")
background-repeat : repeat-x;
background-attachment :scroll;
background-clip:border-box;
background-origin:padding-box;
background-size:auto auto;
}
How can I override this class. Can anyone please help me here.
The root of the problem is Specificity. You can read more about it here.
Basically, the more selectors you use in your CSS, the higher it will rank in specificity. For example,
.text-title {}
is not very specific.
.label-text .text-title {}
is more specific and will take precedence.
.label .label-text .text-title {}
is even more specific. And:
div.label > .label-text > .text-title {}
is yet even more specific and will take precedence over all the others.
So the solution to the problem is that your CSS needs to get more specific than the Dojo CSS. Just use more specific ones in your custom CSS.
Unfortunately, you may see properties with !important in a number of situations, so you will be forced to use it as well to over ride theirs.
use !important on CSS properties:
.claro .dojoxGridRowTable tr {
background-image : url("...") !important;
background-repeat : repeat-x !important;
background-attachment :scroll !important;
background-clip:border-box !important;
background-origin:padding-box !important;
background-size:auto auto !important;
}
I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}
It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}
Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance