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.
Related
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.
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; }
On the homepage of my website - www.mobiuspc.com, I have some distinct sections that I color coded so I could see how its all laid out. There is the master page section, which works just fine (its the tan bar with buttons like "Components" and such), and at that level and up everything works as best as I could wish for.
Down below I have some issues. There are 3 primary DIV's that I use to break down the page:
<div id="mainarea" runat="server" >
This is anything in between the header/master page area, and the yellow color coded area. This big area is supposed to be 700px high, and 1024px wide, and is colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating hard drive image, that is my drop zone for Drag 'n drop functionality (unrelated to this question). I have it set to runat server, because if I don't do that, then Drag 'n Drop seems to break.
<div id="categorybar">
This is the yellow color coded area that holds all my buttons. I'm happy with it. Hit the button called "Display" and watch what happens to the DIV above it. It goes way out of bounds! My CSS to set its width and height seem to be overruled.
<div id="detailbox">
This is the blue colored area, no issues here. Eventually I will put controls in here, but for now it is fine being blue.
The initial thought might be that my CSS is borked. If this is the case, I can't see where! I've set the height/width and all that good stuff. I've tried added the float:left into random sections, to no effect. Here is the relevant excerpts from my CSS file"
#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}
#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}
#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}
I create objects at run time when you click the "Display" button, and all those objects are added to a pane that resides in the #mainarea DIV. That pane is known as toolbox, and here are it's CSS properties:
#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}
For some reason it keeps expanding beyond its predefined size when I add controls at runtime instead of simply having a scrollbar like I would prefer. The panel with all the hard drive pictures as the drop zone, that is also in the #mainarea DIV, and here is the CSS in case its relevant:
#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}
Should I get rid of the runat=server bit? If I do that and click on the display button, I still get that horrid panel expanding itself all the way to the bottom of the page, but at least the silver colored #mainarea DIV stays the proper size (the panel just gets out of control). If I go that route, any idea why it breaks my drag and drop? I hope I don't have to go that route, and instead there is simply something goofy in my CSS that I'm overlooking...
Thanks for your help!
Bill
runat="server" will change the client id of the control you are using it on meaning your #mainarea css will not apply.
You could get around this by assigning mainarea a css class and using that to apply styles rather than its id.