I set a margin for a panel in css. Now I need to get the margin width in GWT. How could I do this?
For example, I set a css style for the panel
<ui:binder>
.panel{
margin: 5px;
}
<g:HTMLPanel Ui:field=myPanel styleName="{style.panel}" />
</ui:binder>
In GWT 2.4, how can I retrieve the margin value (5px) in GWT class.
I have tired these, DOM.getIntStyleAttribute(myPanel.getElement(), "margin"),
DOM.getIntStyleAttribute(myPanel.getElement(), "marginWidth"), and myPanel.getElement().getStyle().getMargin(). all of these return 0.
How can I get the margin width then?
Thanks for replying.
Regards
You're looking for the computed style, but are requesting the element style.
If you were to set the style attribute on an element directly, then you could query the element's margin like you tried.
<!-- style can only be set on html elements, not widgets -->
<div ui:field="divElement" style='margin:5px'></div>
divElement.getStyle().getMargin();
From what I could find, GWT does not provide a method for looking up the computed style. You will instead need to rely on an external library. A quick google search for gwt computed style will provide you with a few options.
Alternatively, you could define the margin width as a GWT CSS constant and use a CssResource to access it.
MyPanel.ui.xml
<ui:style field="style" type="com.myproject.client.MyPanel.MyStyle">
#def marginWidth 5px;
.panel{ margin: marginWidth; }
</ui:style>
MyPanel.java
#UiField MyStyle style;
interface MyStyle extends CssResource {
String marginWidth();
}
Related
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
I'm using GXT's Info class to display messages/notifications. I'm trying to change the style of my Info class using this :
NotificationInfo info = new NotificationInfo(); // extends Info class
// Configuration
InfoConfig config = new DefaultInfoConfig(title, message);
config.setDisplay(milliseconds);
// Formatting
info.setStyleName("background-color:#f9ff4f;text-align:center;" + "border:0x solid black; padding: 3px; font-size:11px;font-weight: bold;");
info.show(config);
But it's not working! Any Pointers?
Thanks.
This should work... (for GXT3 it does anyway)
info.getElement().applyStyles("background-color:#f9ff4f;text-align:center;" + "border:0x solid black; padding: 3px; font-size:11px;font-weight: bold;");
By the way, if you need to do a similar thing for a gwt widget (that you are using in your GXT app) you can do...
info.getElement().<XElement> cast().applyStyles("background-color:#f9ff4f;text-align:center;" + "border:0x solid black; padding: 3px; font-size:11px;font-weight: bold;");
NOTE: I am not sure about the merits of setting it inline like this, but setting a css style just fails (ok the style is set on element but the actual place you want to change gets rendered in a div in a td in table down the line and the div overrides your the value inherit from the css you set). Best practice is surely to go the full appearances route for GXT3 widgets but that's a lot of work for a small change and so I do use the above sometimes.
Applying styles is only a quick solution and not the best, because GWT CssResource has few advantages than direct CSS applying like minification, validation. As mentioned in another answer the best approach is to create an appearance for including your styles and replace the appearance of the NotificationInfo with your one. I have previously answered to a similar question. Think it will help. https://stackoverflow.com/a/15222404/1293087
I'm trying to apply css with GWT Button widget, however I can apply CSS gradient, the "embossed" style of the widget is still there. How can I remove that?
My gwt application is inherting from this theme:
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
Als have tried:
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
I also have tried adding:
.gwt-Button {}
In the main css file that is loaded on the page however the embossed style is still there.
Anyone knows how to remove the embossed style?
Option 1: Not using themes at all
If you don't need the default styles, and generally want to give the page your own style, then it's easiest to completely omit the <inherits> statement for the themes. GWT works very well without using a theme.
(Note: If you still need the (image) resources from the theme, but without injecting the CSS stylesheet into the page, you can inherit com.google.gwt.user.theme.clean.CleanResources instead of com.google.gwt.user.theme.clean.Clean. This way they will still be copied automatically to your war folder.)
Option 2: Selectively turning off theming for buttons
If however you generally want to use a theme, and only need to give some buttons your own style, then an easy solution is calling
button.removeStyleName("gwt-Button");
Note: Instead of removeStyleName() you could also use setStyleName("my-Button").
For convenience (and for easier usage in UiBinder) you may want to derive your own class like
package org.mypackage;
public class MyStyleButton extends Button {
public MyStyleButton(final String html) {
super(html);
removeStyleName("gwt-Button");
}
/* ... override all the other Button constructors similarly ... */
}
Which can then be imported and used in UiBinder like
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:org.mypackage'>
...
<my:MyStyleButton>...
Option 3: Actually changing the gwt-Button class attributes
If you want to keep the themed look of the buttons, and only change a few style attributes, then it's also possible to overwrite certain attributes in the predefined style classes with !important (as suggested by #bouhmid_tun). But be careful: The list of attributes might change in the future. Here are all the predefined style classes for .gwt-Button of GWT 2.4.0 for your convenience:
.gwt-Button {
margin: 0;
padding: 5px 7px;
text-decoration: none;
cursor: pointer;
cursor: hand;
font-size:small;
background: url("images/hborder.png") repeat-x 0px -2077px;
border:1px solid #bbb;
border-bottom: 1px solid #a0a0a0;
border-radius: 3px;
-moz-border-radius: 3px;
}
.gwt-Button:active {
border: 1px inset #ccc;
}
.gwt-Button:hover {
border-color: #939393;
}
.gwt-Button[disabled] {
cursor: default;
color: #888;
}
.gwt-Button[disabled]:hover {
border: 1px outset #ccc;
}
To avoid using GWT default style, I just use !important tag in my CSS file. You'll find here an example of doing so : Remove absolute position generated by GWT. Good luck!
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created
I executed but only FF and chrome moves the textarea 0px from top and 0px from left but in IE
textarea is in default position.
Here is my code:
public class MyGWT implements EntryPoint {
TextArea ta= TextArea.wrap(DOM.getElementById("t"));
public void onModuleLoad() {
ta.getElement().setAttribute("style", "position:absolute;top:0px;left:0px;");
}
}
is there any bug or how can i change style attribute programmatically from GWT ??
Don't set style via setAttribute. In JavaScript the style attribute is actually an array. Thus depending on how smart the browser is and understands you want to set the style attributes it will work by setting style or won't work.
You should set style attributes individually via getElement().getStyle().setProperty(). Or use the specific methods, like: ta.getElement().getStyle().setPosition(Position.ABSOLUTE) or via the setProperty method: ta.getElement().getStyle().setProperty("position", "absolute"). And the same for the 2 other properties. See the Style class for what specific methods are supported.
What about using style classes? I mean, you can write a style class like this:
.someClass {
position:absolute;
top:0px;
left:0px;
}
And then add the style class to the TextArea
ta.addStyleName("someClass");
It will help you to write a more concise code, without inline styling that could be difficult to maintain.