How to add a font color to a cell in dojo datagrid? I need to change the color dynamically (depend on the value it gets). I don't want to use html tags returning from formatter method.
for example,
'number' should be red if lesser than 0 and blue greater than 0.
in layout,
number{
formatter : format
}
method,
var format(value){
if(value<0){
// what should to returned to change font color without html tag?
}else if(value>0){
// what should to returned to change font color without html tag?
}
}
You can try with
dojo.style(node, style, value);
if you know the node. After that you may need to render the grid.
This should have the same effect as using html tags in the formatter. Which may look aesthetically ugly but works.
Related
I'm trying to set an specific CSS just for a certain item on my form. I would like to make it bold and in a different color. I used the following statement. Why is it not working?
myStaticTextItem.setCellStyle("color:#FF0000; font-weight: bold;");
You can use setTextBoxStyle to assign CSS class to your input box of that element.
There are additional methods for assigning CSS classes for special parts of element like title, hover, hint and picker icon. More here.
Simply put, I have a JavaFX Textfield that I wish to 1) change the text color on, and 2) change it back to that specified in CSS. Does anyone know how to (generally) access css colors etc. from within the JavaFX code?
AnyFxElement.setStyle(String elementCss);
For source of all the css capabilities I reccomend looking up caspian css.
To remove a style use the code:
// remove the background color on the button
yourElement.setStyle(null);
To set it back to it's default style:
// set the button style back to the default class
yourElement.setStyle(".yourStyle");
I get TableView like this:
TableView tableView = (TableView) ((AnchorPane) node).getChildren().get(0);
fill it with data like
tableView.setItems(FXCollections.observableList(vehicles));
this part is Ok. However, I'd like to change font properties of the currently row in the tableView and I cannot figure how to do it
I do not want to set tableView.getSelectionModel().setCellSelectionEnabled(true); as I want to display selection for the whole row, and not for a single cell
I tried to apply some css styles on TableRow and on Tabliew but without any success.
Is there any way to change font properties for the currently selected row in TableView?
Tableview css styling is subtle and complicated.
Solution
Go to the source for the default JavaFX controls css and copy all of the .table-view sections which have a :selected psuedo-class into your own user stylesheet.
Remove the default attribute setting rules from each css selector section you copied and replace them with the css you want to apply for your selected rows.
As there of lots of :selected rules you might have to copy the same attribute settings in a few places (similarly to how the default attribute values are defined).
Background Resources
The default stylesheets for respective versions are:
JavaFX 2.2 => caspian.css
Java 8 => modena.css
Consult the css reference guide and css tutorials if your are confused.
Quick Color Change Fix
Note that if all you need is to set the fill color for the selection bar text, you can override the default constant color with your own constant using a single statement:
.root { -fx-selection-bar-text: firebrick; }
Just substitute whatever color you want for firebrick. Similarly -fx-selection-bar: midnightblue; can be used to change the color of the background of the text.
This CSS Rule can be effective:
#mytable .table-cell {
-fx-text-fill:red ;
-fx-border-color: none;
}
#mytable .table-cell:hover {
-fx-text-fill: rgb(103,183,89) ;
-fx-border-color: none;
}
I'd like to be able to access the font size of a GWT Label. I've tried:
String fontSize = label.getElement().getStyle().getFontSize()
but this seems to only be for font sizes that have been programatically set (and not font sizes that are decided by CSS rules). Any ideas?
Thanks,
~Owen
If it is the computed size you are looking for, GWT does not provide it out of the box, but you should be able to use a simple JSNI to retrieve it. Something like:
public static native String getComputedStyleProperty(Element element, String property) /*-{
if ($doc.defaultView && $doc.defaultView.getComputedStyle) {
return $doc.defaultView.getComputedStyle(element, null).getPropertyValue(property);
}
return "";
}-*/;
Untested but should get you started. Do note that, the property should be camelCase and, for IE < 9, you should also check for currentStyle. Also a fallback based on element's style property should be returned, instead the empty string.
See also Get computed font size for DOM element in JS.
No, getFontSize() returns CSS property only.
Give a try like below:
String fontsize= DOM.getStyleAttribute(label.getElement(), "font-size");
How do I adjust the background color of the event header in Fullcalendar?
I see that I can use color or backgroundColor to change the body of the event, but I don't see a setting for the header background color.
Quite simple using CSS
.fc-widget-header{
background-color:blue;
}
http://jsfiddle.net/ppumkin/PaKbx/
Passing the value from the feed is not a good idea as the header has nothing in common with events. So that would have to be passed somewhere else ;server side or jquery client side parsed from another source..
Thats just good practice-
but if you want you can pass the values back with your feed using a custom field
eg
[{ 'myHeaderForThisCalendar': 'Blue', ...other stuff ... }]
And using jquery look for that id and set your header using the CSS or ATTR function.