I'm using dojo 1.8 and don't want any padding in my bordercontainer / contentpane layout. The problem is, it seems when I add the claro css file, instead of just applying class styles, the div's i'm using for my content panes get styles applied inline. It almost seems like this is being done programmatically, but only when I add the css file.
For instance, the contentpane I use as my header looks like this:
<div data-dojo-props="region: 'top'"
data-dojo-type="dijit/layout/ContentPane"
id="header"
class="dijitContentPane dijitBorderContainer-child
dijitBorderContainer-dijitContentPane
dijitBorderContainerPane dijitAlignTop"
title="" role="group" widgetid="header"
style="left: 5px; top: 5px; position: absolute; width: 1387px;">
It adds the style="left: 5px; top: 5px...." which I'm pretty sure precludes me from just overriding any type of padding or margin setting with css. I want my content panes to not have any padding or "virtual" padding by using absolute positions like this. How can I still use claro but prevent this behavior?
The 5px comes because you have gutters set to true on the BorderContainer.
Add gutters: false to properties of the BorderContainer.
The dijit.layout widgets performs a resize when rendering, calculating the space it has to work with, and setting itself up as according to whichever layout variant it is (BorderLayout child in your case, which is referred to as 'nested containers'). Hence the inline styling, done programatically.
Your problem is most likely, that the CSS you apply yourself has a lower 'weight' then the styling from claro.css.
Check this link: specificity. This is a term, that covers which selector is highest prioriy. The more specific a css-rule is, the higher the priority.
So you need to 'win' over a class-on-class rule like this:
.claro .dijitContentPane {}
To achieve it, add #id selector - or nodetype-selector or similar. You can also put a prefix, such as 'body' to be general or '#innerContentsWrapper' for a localized rule
.dijitContentPane { /* lowest weight */}
.claro .dijitContentPane { /* third highest weight */ }
.claro div.dijitContentPane { /* second highest weight */ }
body .claro div.dijitContentPane { /* the highest weight */ }
Another thing that will work is setting the following attribute on your div:baseClass="dijitContentPaneNoPadding"
Related
Usually when I create a custom element I wrap it in a section or other appropriate HTML element and style that, but this leads the DOM looking like custom-element > section.
My question is, is it wrong to remove the section and simply treat custom-element as the root element and style that?
For example I have a custom element called tabs, right now when it's used the DOM ends up looking like tabs > div.tabs but I'd prefer to remove the div.tabs element if there's nothing wrong with that.
So my question is is it "wrong" to style my custom elements and treat them as any other HTML element, or should I continue to ignore my custom elements completely (even though it's hard to do so when you use > and other selectors)?
There is absolutely nothing wrong with styling custom elements. To reassure you, custom elements are valid HTML and unless you're supporting an older browser less than Internet Explorer 9, then you'll need to do some extra work to get the browser to recognise them.
I style custom elements all of the time, I even style Aurelia's <router-view> custom element as well.
It's better...
Don't forget that the default CSS display for a custom element is inline.
So if you want to use border, width... you should explicitly set display (to inline-block for example):
custom-element {
background: lightgreen;
width: 60px;
border: 1px solid blue;
}
.ok {
display: inline-block;
}
<custom-element>This is
<div>ugly</div>
</custom-element>
<hr>
<custom-element class="ok">That's
<div>fine</div>
</custom-element>
I have a page that I need to modify some behavior. The element that I'm working on has a [attribute] directive, like this:
<div class="someClass" myAttributeDirective></div>
The myAttributeDirective has it's own css page that defines some styling, like this:
[myAttributeDirective] {
/* a few different properties */
border: 1px solid red;
position: relative;
}
/* then some more class stylings related to the directive */
So you see, in the css, it's defining some styles for JUST the attribute, so if the attribute exists in any element, apply those stylings.
When I view my element in Dev tools, it doesn't look quite right. In order to "fix" it, I un-check one of the css properties that is causing my issue, the position: relative;.
BUT
I can't change the "core" css for that directive, because it's used throughout the application. AND, if I try to override that property, it doesn't work (actually, cycling through the different position: * options only leads to making things look worse).
So, how do I override that specific property, without changing the core css file?
If you want to override style in any case irrespective of which order style is applied, consider applying style inline in the div.
<div class="someClass" myAttributeDirective style="position:absolute;"></div>
i wanted to use the ui-Utils module: scrollfix to have a <div> at start at 100px, and if i scroll down, it should be fixed at 0px.
<div ui-scrollfix="+100">test</div>
On the scrollfix demo site is a hintbox, which says:
Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.
Even on there demo-page it is not really working....
Or I'm expecting something wrong.
As you mentioned the hint on the scrollfix demo site says:
Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.
So this directive works in a way that a single CSS class ui-scrollfix is added to the element whenever the scroll condition is achieved, and the class is removed in other case (when you scroll back to the top). Therefore it's your responsibility to add proper CSS style.
You can accomplish that by adding another class or CSS id to the element and define the proper CSS styling for the two cases - the normal one, and the fixed one as you scroll down. For example, you can have something like this in you code:
<div ui-scrollfix="+100" class="yourclass">test</div>
It can have any styling applied in this normal state:
.yourclass {
/* your CSS code, 100px from the top of the page */
}
When the ui-scrollfix condition fires (in this case we have it set to +100, so when the page scrolling has gone 100px after your element), your <div> element will have another class added:
<div ui-scrollfix="+100" class="yourclass ui-scrollfix">test</div>
You can use this to set the proper CSS styling:
.yourclass.ui-scrollfix {
position:fixed;
top:0;
}
Here is a demo that uses the directive on the top navigation bar which is absolutely positioned 100px from the top of the page, and as you scroll down it stays fixed on the top of the page. Similarly, the second one (titled "Second Navbar") positions beneath the top one. The CSS code I'm using for the top bar is:
.navbar-fixed-top {
position:absolute;
top:100px;
}
.navbar-fixed-top.ui-scrollfix {
position: fixed;
top:0;
}
Also, I think it's important to mention that ui-scrollfix="+100" means that the ui-scrollfix class will be added to the element when the top of the viewport scrolls 100px after the element. If you'd like the element to get the ui-scrollfix CSS class as it reaches the top of the viewport you can add ui-scrollfix="+0".
Hope this helps.
**here's a plunker if that's easier :) **
http://run.plnkr.co/plunks/FN4s5U9JEFG1VXzy7azQ/
Make sure Angular is bootstrapped and running;
Go to the following url to get the js: https://github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/scrollfix.js
strip the directives from the module object and write them into your own module that is already boostrapped (in html: ng-app="sampleApp"/ in js: sampleApp.directive(...)
paste the following html as child elements of the element you have placed the ng-app directive on :(had to write the link funky to get it through stack)
https:\//github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/demo/index.html
paste the following style element inline in the html you just put in place (inline style is just for example purposes):
.ui-scrollfix{
background: green;
width:100%;
position: fixed;
top:0;
left:0;
}
6.ENJOY FIXED HEADER(the elements will look funky because you've applied position:fixed to two of them, but this is just to get you up and running)
Have you set the proper css? I know that you have to set the class as well for ui-scrollfix.
how can I force an image to be aligned hard to the left, regardless of what css applies to the container it is placed in?
You could use !important on the style to increase it's precedence over other styles.
style="text-align: left !important;"
Or
#foo { text-align: left !important; }
However, this is considered bad practice. Ideally you should give your selectors the level of specificity required. Could you post up your CSS.
You need to apply a more specific CSS rule to that particular image, e.g. one that references the image by Id or use !important.
#idOfMyImage { /* Desired CSS here */ }
Here's a good (and humorous) overview of specificity in CSS
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}