How to change single element of the widget style in GWT. I would like to create new version of TextBox style, so that only the border color changed to red, for example.How to get to the style responsible for the TextBox?
I tried to create new style
.gwt-TextBox.invalid {
border-color: red;
}
but it does not work.
Make sure you add class invalid to your TextBox:
textBox.addStyleName("invalid");
Use CssResource to associate your CSS file with GWT: http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles
Related
I have created a simple grid with one column:
public MyGrid() {
addComponentColumn(this::getIcon).setClassNameGenerator(i -> "icon-img");
setItems(/** some items */);
setClassName("sidebar-grid");
}
And I have a css theme called mangaTheme. I use it like this #Theme("mangaTheme"). In the mangaTheme folder I have styles.css file with the following content:
.icon-img {
padding: 0;
}
.sidebar-grid {
width: 102px;
margin: auto;
margin-left: -30%;
}
The sidebar-grid css properties are applied properly as the grid is moved, but the icon-img properties are not applied whatsoever:
The classnames are applied:
What am I doing wrong or missing? I have also read this guide: https://cookbook.vaadin.com/dynamic-grid-cell-styling
EDIT: After configuring my workspace as was mentioned in the answer this is the resulting structure, but it still does not seem to function properly.
What you're missing is that the cell <td> element is inside the shadow DOM of the vaadin-grid component, and thus cannot be styled with global CSS. To style parts of components that are inside the component's shadow DOM, you need to inject the CSS into the component.
In the Cookbook example, this is done through the themeFor parameter in the annotation that loads the stylesheet:
#CssImport(themeFor = "vaadin-grid", value = "./recipe/dynamicgridcellstyling/dynamic-grid-cell-styling.css")
In your theme folder, however, you can do the same thing by putting that CSS in a stylesheet called vaadin-grid.css in the components subfolder, i.e.:
themes/mangaTheme/components/vaadin-grid.css
Another thing you're missing is that the classname is applied to the <td> cell, but the padding is on the vaadin-grid-cell-content element slotted into the cell, not the cell itself, so you need to rewrite your selector:
.icon-img ::slotted(vaadin-grid-cell-content) {
padding: 0;
}
(The sidebar-grid CSS class works fine as-is because it's applied to the vaadin-grid root element, which is in the page's regular DOM.)
Picker has two components :
The Initial/Selected value displayed in Codenameone UI.
The Native picker dialogs/sheets.
It makes sense that we can not control the theme/color/style of Native Pickers as they are influenced by an OS-specific theme selected by the user.
But how do we change the color of text inside the picker in Codenameone Interface?
What I want to do in the following screenshot is to make the texts "3/20/20, 00:00, & 0-5 persons" white.
What I tried :
Channing the "Label" font-family in CSS changed the font so I tried changing the "color" from CSS but it didn't help.
I tried changing the foreground color like this : timePicker.style.fgColor = 0xfffff
In CSS I defined a style.
DropdownStyle{
background-color: #333333;
color: #FFFFFF;
}
Then I set the style to picker
datePicker.uiid ="DropdownStyle"
But none of the above ways worked as expected.
What is the right way to do it? I believe I am missing a very simple thing but I couldn't find it myself.
AS #shai-almog suggested, after digging through Component Inspector, I found out that
A PickerComponent has the ID "TextComponent" so if we replace the UIID of PickerComponent it's going to change the style of just the Holder Component that's why I was able to change the background-color only but not the text.
Inside it, there is Picker which Represents the Text and has the id TextComponentField.
So I had to Style them individually like this :
TextComponent{
background-color: rgba(0, 0, 0, 0.0);
}
TextComponentField{
color: white;
}
Output :
I have a GWT application with some SimplePanel.
How can I make its border dashed?
I tried myPanel.addStyleName(Style.BorderStyle.DOTTED.getCssName());, but it didn't work.
This should work using Element#getStyle() method to update the element's Style object.
SimplePanel myPanel=new SimplePanel();
myPanel.getElement().getStyle().setBorderStyle(BorderStyle.DOTTED);
but I suggest you to keep the styling in the CSS file instead of directly applying it in Java file that is more difficult to manage and change in future mostly in case of themes.
CSS:
.dashedBorder{
border: 1px dotted black;
}
JAVA:
SimplePanel myPanel=new SimplePanel();
myPanel.setStyleName("dashedBorder");
Why can't I apply custom css styles to a single TextBox?
I'm trying to set some error styles on a single TextBox. What's wrong with the following implementation?
init:
static final String STYLES = ErrorRes.INSTANCE.css().style();
#UiField TextBox box;
box.setStylePrimaryName(STYLES);
Resource interface
interface ErrorRes extends ClientBundle {
static final ErrorRes INSTANCE = GWT.create(ErrorRes.class);
#Source("Error.css")
Style css();
interface Style extends CssResource {
#ClassName("gwt-TextBox-error")
String style();
}
}
Error.css
.gwt-TextBox-error {
border: 1px solid red !important;
}
If you whant to get gwt-TextBox-error style name on widget, you need set box.setStylePrimaryName("gwt-TextBox"); - it's by default. And when error occured use box.setStyleDependentName("error", true); HTML will be class="gwt-TextBox gwt-TextBox-error".
And to clear error style, use box.setStyleDependentName("error", false);
OR
You can use addStyleName("gwt-TextBox-error") and removeStyleName("gwt-TextBox-error") in a same way.
---UPDATE---
So, I tryed to run your case and it works well. At the first of all you need inject css from resources to page in runtime:
ErrorRes.INSTANCE.css().ensureInjected();
I use it in the begining of onModuleLoad()
Then, to add error style use: box.addStyleName(STYLES);
and box.removeStyleName(STYLES); to remove it.
You can't use pair setStylePrimaryName() and setStyleDependentName() with bundled css becouse css name will be obfuscated.
I am trying to customize text in google maps info window. I have a CSS file which has the following:
.zabove {color:#ff0000; font-weight: bold;} // red and bold
.zbelow {color:#14d714;} // green
And in the java class depending on a value for foo, I try to set the color of a label by using the setStyle method:
if(foo>100){
label.setStyle("zbove");
} else {
label.setStyle("zbelow");
The above does not result me any color, the text is just black.
What browser are you using. Try using different browser. What you are doing looks absolutely correct. Sometimes I have found the GWT application behaves differently on different browsers.