I am trying to develop dojo tree with style shown in image in below link. I am using dojo-release-1.10.2. I am using theme as 'claro'. I am not getting the connection lines which provide parent-child relation as shown in image in below link. Can anyone advice me , to the same style as shown in below link.
http://cdn.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/dojo/tree.jpg
The tundra theme shows the grid lines by default, with the exception of the root node, if you want the grid lines for the root node with tndra you should override the tree.css changing the background-image to this.
.tundra .dijitTreeIsRoot {
margin-left: 0;
background-image: url('images/i.gif');
}
If you want to override the claro theme, you can try this, , but you want to copy the gif files to your app and load them from there instead of loading them from tundra.
.claro .dijitTreeNode {
background-image : url('../tundra/images/i.gif');
background-repeat : repeat-y;
}
/* left vertical line (grid) for all nodes */
.claro .dijitTreeIsLast {
background: url('../tundra/images/i_half.gif') no-repeat;
}
.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf {
background-image: url('../tundra/images/treeExpand_leaf.gif');
}
.claro .dijitTreeIsRoot {
background-image : url('../tundra/images/i.gif');
}
Related
Emmet autocomplete doesn't add semicolon after css rules inside media query.
div {
display: none;
}
#media (max-width: 991.98px) {
div {
display: none
}
}
Outside media query
Inside media query
This is a bug in the plug-in which is under investigation. Keep track of it here: https://github.com/emmetio/sublime-text-plugin/issues/173
UPDATE: This has now been fixed.
I am using Ionic V4, tag.
In that .inner-scroll class there.
I am unable to override .inner-scroll class in my home.page.scss
You can style elements inside of an ionic shadow tree using ::part pseudo-element in this way:
ion-content::part(scroll) {
position: relative;
}
This code should add position: relative to ion-content main.inner-scroll element if it has part="scroll" attribute
Feel free to check more info here:
https://www.joshmorony.com/using-shadow-parts-to-style-protected-shadow-dom-components/
https://ionicframework.com/docs/theming/css-shadow-parts
Try this:
::-webkit-scrollbar {
background-color: white;
}
::-webkit-scrollbar-thumb {
background-color: #d33939 ;
}
I've installed Shopware
inherited from the responsive theme and
adjusting the colors (less-files).
This worked well with the header and a few other components like container.less but not offcanvas-menu.less.
In Detail:
finding the color to change:
For this I first made all colors of the entire shop unique. So I can easily tap the color value over the current shop via a pipette tool.
Then I find the color value in the source code and copy the corresponding less source code components into my new theme. Only then do I change the color.
copied inside themes/Frontend :
a) /Responsive/frontend/_public/src/less/_components/offcanvas-menu.less too
b) /MyNewTheme/frontend/_public/src/less/_components/offcanvas-menu.less
the following part :
.sidebar--navigation {
.border-radius();
background: #0492d6;
.navigation--entry {
&:last-child {
border-bottom: 0 none;
}
}
.navigation--link {
overflow: hidden;
text-overflow: ellipsis;
}
}
and changed background: #0492d6; to background: #003E7e; inside b)
Complete result: gist MyNewTheme offcanvas-menu.less
But if i reload and grap the color i got again #0492D6.
As doppelcheck i changed the color in a) to background: black; and its black.
As another doppelcheck i changed the color in themes/Frontend/MyNewTheme/frontend/_public/src/less/_components/container.less to background: red; And red is visible.
Please check if you also imported it.
Please enter in your themes\Frontend\MyNewTheme\frontend_public\src\less\all.less
#import "_components/offcanvas-menu";
I'm a bit of a noob to ionic so this may be a dumb question.
On the press of a button I want to overlay my entire app with a black image (or make everything invisible) but still have the buttons working underneath.
My app is based on the tab sample app.
So far I've tried the following
app.scss
.dark-overlay {
background-color: #000 !important;
opacity: 1;
}
my-tab.html
<ion-content class="dark-overlay" (ng-hide)="showOverlay">
....
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div>
my-tab.ts
stealthMode () {
this.myElements = document.querySelectorAll("dark-overlay");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
}
Even if i can get this to work it's not going to be the final answer as setting the opacity in app.scss to 0 still leaves the tabbar visible but I need that to go black too.
I think it's related to property binding.
Any ideas?
Thanks
you need to use pointer-events to let events go through your dark overlay.
I have demonstrated that in this Plunkr (go to second tab which shows home page)
style.css
.dark-overlay{
position:absolute;
width:100%;
height:100%;
background-color:#888;
opacity:0.9;
top:0px;
left:0px;
z-index:1000;
pointer-events: none;
}
and have this in home.html
<button (click)="stealthMode()">Tint</button>
<div class="dark-overlay" [hidden]="showOverlay"></div>
and this in home.ts
showOverlay:boolean = false;
stealthMode(){
this.showOverlay = !this.showOverlay;
}
You can make a binding to render that part dynamically using angular directives.
Check this for clean implementation:
ngIF
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.