I have a ListBox:
ListBox lb = new ListBox();
this is my default css for a listbox:
.gwt-ListBox {
background: transparent;
padding: 5px;
border: 1px solid #222;
color: #555;
text-shadow:1px 1px 0px #ffffff;
text-decoration:none;
font-family:arial;
height: 40px;
font-size:16px;
font-weight:bold;
cursor: pointer;
}
I want to modify the background at runtime:
lb.getElement().getStyle().setBackgroundColor("#aaa");
this seems to remove all styling, and I get a really ugly listbox. What am I doing wrong?
Thanks
A working and more maintainable way of doing this is using a CSS client bundle, see:
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html
and
http://www.gwtproject.org/doc/latest/DevGuideUiCss.html
Put the parts of the style that you want to vary in a CssResource and apply the extra style. To give you an idea of how to do this:
MyWidget.css:
.backgroundA {
background: #aaa;
}
MyWidget.java:
interface MyWidgetCssResource extends CssResource {
String backgroundA();
}
MyWidgetCssResource resource;
lb.getElement().addStyleNames(resource.backgroundA());
Related
I have a button with the following style:
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
As I reckon, using OOCSS principles, we should separate visual from structure.
Something like this (I would assume - correct me if I'm wrong):
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
}
.skin
{
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
But what if I want to use the exact same configurations for another button, except for the floating position which I would like to remove, how should I do it? Isn't OOCSS being restrictive by coupling the positioning in the structure?
This likely depends on what exactly the structure you actually have is, but I would likely do something like the following which still follows OOCSS principles:
.btn { /* Default button structure properties */
width: 100px;
height: 40px;
display: inline-block;
}
.float-right { /* More specific button structure properties */
float: right;
}
.skin { /* Default button skin properties */
background-color: #555555;
border: 1px solid #ffffff;
font-family: OpenSansRegular;
font-size: 15px;
color: #ffffff;
}
The actual class names could be different, but given you only have one more specific property, I think the specific name makes sense in this case.
I am trying to learn how to use draftjs, but i can't figure out how to apply css to the editor itself. I read in the documentation that it is possible to design the content blocks, but i am looking for a way to design the editor.
Draft sets a few class names on the editor that you can use. Here's a (non-comprehensive) list:
.DraftEditor-root
.DraftEditor-editorContainer
.public-DraftEditor-content
.public-DraftEditorPlaceholder-root
.public-DraftEditorPlaceholder-inner
.public-DraftStyleDefault-block
Here's a fiddle showing them. And here's the styles used in the fiddle:
.DraftEditor-root,
.DraftEditor-editorContainer,
.public-DraftEditor-content {
padding: 5px;
margin: 5px;
}
.public-DraftEditorPlaceholder-root {
margin-top: 28px;
margin-left: 25px;
}
.public-DraftEditorPlaceholder-inner {
background: rgba(0, 0, 0, .5);
color: white;
}
.DraftEditor-root {
border: 1px solid black;
}
.public-DraftEditor-content {
border: 1px solid blue;
}
.DraftEditor-editorContainer {
border: 1px solid green;
}
.public-DraftStyleDefault-block {
border: 1px solid red;
margin: 5px 0;
}
Draft will also output some more class names depending on text alignment etc. I'd encourage you to inspect the elements in e.g. Chrome DevTools to see what's available.
I have a GWT application with two TabPanels.
The TabPanel generates css-classes that has the prefix gwt-TabPanel.
Is there any way to change this prefix for one of the tables? I want to be able to style the two TabPanels independently.
To solve this I did:
Using setStylePrimaryName(String); This will change the prefix for the CSS class names that the TabPanel and TabBar uses.
tabPanel.getTabBar().setStylePrimaryName("myTabBar");
tabPanel.setStylePrimaryName("myTabPanel");
In your CSS file your add something like this:
.myTabBar {
}
.myTabBar .gwt-TabBarFirst {
width: 5px; /* first tab distance from the left */
}
.myTabBar .gwt-TabBarRest {
}
.myTabBar .gwt-TabBarItem {
margin-left: 6px;
padding: 3px 6px 3px 6px;
cursor: pointer;
cursor: hand;
color: black;
font-weight: bold;
text-align: center;
background: #3A3A3A;
}
.myTabBar .gwt-TabBarItem-selected {
cursor: default;
/* background: black; */
}
.myTabBar .gwt-TabBarItem-disabled {
cursor: default;
color: red;
}
.myTabPanel {
}
.myTapPanel .myTabPanelBottom {
border-width: 0px;
overflow: hidden;
padding: 6px;
}
For the second TabPanel you set a different with setStylePrimaryName() on both the TabPanel and the TabBar. Then you add a new section to the CSS file with the second primary name.
You can use the methods setStyleName() and addStyleName() to set or add css styles to GWT UI objects.
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.
I am trying to change the default css but nothing happens, even if I do
bar.setStylePrimaryName("gwt-TabBar");
Here is my CSS, even trying to change the Header does not work H1
Why isnt it changing?
/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
body {
color: black;
font-family: Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
font-size: 10px;
margin: 20px 20px 20px 20px;
}
h1 {
font-size: 2em;
font-weight: bold;
border: 8px solid #C3D9FF;
background-color: #E8EEF7;
color: #000099;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-TabBar {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarFirst {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarRest {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarItem {
background-color: #C3D9FF;
}
.gwt-TabBar .gwt-TabBarItem-selected {
background-color: #C3D9FF;
}
I have some ideas: did you import the css into application? You can either do that in your application.gwt.xml or in your index.html.
is the css loaded? you can check this using firebug. check your target folder or war folder to find out the path.
the browser often caches the css; and you have to force its reload.
you can do this by pressing the shift key when you press the "reload" button.
I second checking if the css has changed in firebug as well.