I am trying to create a tree structure list for one of my tasks. I am planning to use JS-TREE plugin for this purpose. Still the plugin comes with lot of features, I have to do few styling changes to match the given design.
This is the code pen link which I tried so for,
1. Change the plus-square with angle-down icon
2. Change the minus-square with angle-up icon
3. change the square-filled-grey icon(will come if any few of child nodes selected) with minus-square icon
4. Hover blue highlighting not needed
Any way to customize this? OR Any super hit plugins from your experience?
So, it looks like they're using a sprite map and changing the background position to select which icon appears
I was able to move this
.jstree-proton .jstree-anchor > .jstree-undetermined {
background-position: -38px -5px;
}
This satisfied #3. If you inspect any of the icons (jstree-icon class), you'll see a background assigned to 32.png. You'll have to change the positioning for icons that exist there. For the angle up and down you'll have to hide the background image they supplied and insert your own icons
Why don't you try to create a css file and overwrite the jstree class setting "!important" at the end of the rules you want to change? For me it worked because I needed to change the jstree-rename-input class like this.
.jstree-rename-input {
border: none !important;
width: 250px !important;
}
As far as i investigated, this is also the official answer provided by jsTree creator.
Related
I have a question to which I can't find the answer for some time.
It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design.
Here is an image of the scheduler with the problem shown
I also provide a code sample which simulates the problem.
https://docs.dhtmlx.com/scheduler/snippet/9445edbf
This behavior can be fixed by the following style:
.dhx_scell_expand{
position:absolute!important;
}
Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:
.dhx_scell_expand{
position:absolute!important;
}
.dhx_scell_name{
margin-left: 26px;
text-align: left !important;
}
Of cause, you can experiment with it to make appropriate for your project.
Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:
scheduler.createTimelineView({
...
dx: 300, //200 by default
...
});
Here is an example with additional styling, and the resized names section :
http://snippet.dhtmlx.com/5/a3da39a40
Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example:
http://snippet.dhtmlx.com/5/87845739f
I am a small used dealership and we are using app maker to manage our inventory. In google app maker I created a simple table which shows my inventory along with reconditioning process (mechanic, detailing, inspection etc. On another page, I added some toggle switch, so when a task is completed, we turn the toggle on and in my list is shows ''true''. All I want to do, is when the statement is true, show a green circle and if false show a yellow circle. I have a basic of JavaScript and CSS, but i've been at it for 4 hours and still haven't figured out.
I tried a couple CSS styling and If/Else statements, but it has not worked.
This can be accomplished in the following way:
Drag a label widget where you would like this dot to show in your
UI.
Set the label widget horizontal and vertical size to 'fixed' and set
the values to the same size, like 20px and 20px.
Introduce two css classes under your 'Global Style' css settings as follows:
.condition-true {
background-color: #0f9d58;
border-radius: 50%;
}
.condition-false {
background-color: #ea6100;
border-radius: 50%;
}
Return to your label in your canvas, make sure the text property does not contain anything. Find your 'styles' under the display property and put the following binding in this section:
#datasource.item.YourItem ? ['condition-true'] : ['condition-false']
Adjust color settings in your css classes as necessary and adjust label size as necessary to your liking.
http://i.stack.imgur.com/dxguj.png
What is that blue rectangle line? I want it to be on my control whenever I want to use it. So if I want to remove it, I should be able to for the element. I use bootstrap 3.
Just add the below CSS anywhere in the stylesheet or internally:
button:focus {
outline:0;
}
The blue rectangle line you're pointing out is a line drawn around elements to let them stand out, a so called outline. Imagine a user with only a keyboard navigating through a website, the outline is a good reference to show the user which element is active/has focus. When the outline is on a menu item for example, it shows the user that hitting enter will propably bring him to that particular page.
There is an outline style by default in most browsers, Bootstrap styled it their own way.
More on the outline styling property:
http://www.w3schools.com/cssref/pr_outline.asp
To get rid of the outline for buttons in Bootstrap you could use:
.btn:focus {
outline:none;
}
https://jsfiddle.net/DTcHh/12056/
-edit
As Guruprasad Rao pointed out, the valid outline property is none, according to W3C schools.
I'm trying to follow this example:
http://openlayers.org/dev/examples/SLDSelect.html
When I click on the point, its color should be changed, here is a piece of my code:
control = new OpenLayers.Control.SLDSelect(
OpenLayers.Handler.Click,
{
//displayClass: 'olControlClick',
layers: [city]
}
)
map.addControl(control);
control.activate();
Still can't figure out what's the point of displayClass. and how to assign the new color.
displayClass is the css class that gets used when the SLDSelect control is active. To play around with it and see what html element is being modified, try setting the class like this:
.olControlClick {
cursor: crosshair;
background-color: yellow;
border: 5px solid green;
}
When you refresh your browser page, you may see the flash of yellow background as the layer renders, you will see a cross-hair cursor, and you will see the large green border on the div that uses the css class.
Use this to modify the characteristics of the map div when the SLDSelect control is active.
You can play around with this by calling activate() and deactivate() on your SLDSelect control. When the control is not active (after calling deactivate()), you won't see the artifacts of the css style (no green border, no cross-hair cursor). When the control is active, you will see these 2 style properties (border and cursor).
This example may be useful, make sure you view the source to see the javascript.
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }