I'm creating a MenuBar, and I want to have it display a little icon when there are sub-elements to be displayed. I thought I could achieve this like so:
interface ActionHeroResources extends ClientBundle, MenuBar.Resources
{
#Source("actionhero.css")
public ActionHeroCSS css();
#Override
#Source("agw-dropdown.png")
ImageResource menuBarSubMenuIcon();
}
private static final ActionHeroResources RESOURCES = GWT.create(ActionHeroResources.class);
MenuBar actionMenu = new MenuBar(true, RESOURCES);
public ActionHero()
{
actionMenu.addItem("Select", aSelectMenuFullOfOptions);
}
But the menu appears with the word "Select" an no icon! I'm positive my ImageResource is working correctly because I use menuBarSubMenuIcon().getURL() from the same resource later, and my image shows up just as you'd expect. In the HTML generated by GWT, there is absolutely no distinction between the items with MenuBars as children and the items with Commands. My CSS is working fine.
Any thoughts?
Try overriding the CSS style for .gwt-MenuBar-vertical .subMenuIcon-selected, like this:
.gwt-MenuBar-vertical .subMenuIcon-selected {
background: none;
}
I use this for my own selected items and it works great:
.gwt-MenuBar-vertical .subMenuIcon-selected {
background: url(images/hand_pointer.png) no-repeat 0px 0px;
}
The problem was ultimately that the popup panels that form the submenus take their stylename from the parent, but append a dependent stylename. I don't know of a way to predict what that dependent stylename will be, since the original stylename is obfuscated. I worked around this problem by using the more generic .gwt-MenuBar popup stylename. This only works because I only have one style of popup menu in my program - I'm not sure what I would do if I wanted two popups to look different!
Hopefully, in later gwt releases, the MenuBar styles will come more closely from the resources passed to the menubar and make less use of dependent style names.
You can simply set a css rule for the that appears in the sub menu like this:
.subMenuIcon > img {
/* override gwt sub menu icon */
width: 6px !important;
height: 11px !important;
background: url('your-image-relative-path.png') no-repeat 0px 0px !important;
}
Related
I am new in Ionic. I am stuck on rounded corners for the side drawer menu. Please give me a solution if it works then I accept your answer Anyone here with a solution for this? Thanks in Advance. Here is my code.
.menu-inner {
border-radius: 0px 50px 0px 0px !important;
}
in Inspect element this is perfect work but not work in code
here is screen short
So far, You can not style shadow-root element in the DOM by using CSS. In some cases, the CSS4 helps to style. But in this case, it would not work.
So, You can use JavaScript to style shadow-root element. Here You should create a simple method like menuRadius and call it in initializeApp in the following way.
src/app/app.component.ts
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.menuRadius(); // call menuRadius method
});
}
menuRadius() {
setTimeout(() => {
document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 50px 0px 0px');
}, 2000);
}
Please Note Injecting style by using JavaScript only works when shadow-root is open.
You may check this article for more info about shadow-root DOM.
I'm using GWT. I see that the gwt "clean" theme (the default one?) makes our body element have a 10px margin:
body {
color: black;
margin: 10px; <------
border: 0px;
padding: 0px;
background: #fff;
direction: ltr;
}
In my own css file, I set the margin to 0px, but it seems that GWT's keeps winning (maybe because it gets loaded last?).
What's the right way to override their setting?
Thanks
There are several possibilities:
You can use margin: 0px !important (this is the "brute-force" approach).
Or you can give your body a class like <body class="myApp">...</body>, and then in your CSS, use body.myApp { ... }. This will take precedence, because body.myApp is a more specific selector than body.
Or you can simply not use any theme at all (which is often a good idea if you want to create a fresh layout without worrying which attributes you'll have to override)
Another option is to load your css file by using clientbundle. (assume that playground.css is your css file)
public interface Resources extends ClientBundle {
public static Resources INSTANCE = GWT.create(Resources.class);
#Source("playground.css")
CssResource getPlaygroundCSS();
}
Note: playground.css is located in the same package as the Resources interface.
in the onmoduleload:
public class Playground implements EntryPoint {
#Override
public void onModuleLoad() {
Resources.INSTANCE.getPlaygroundCSS().ensureInjected();
Label lblHelloWorld = new Label("Hello World");
RootPanel.get().add(lblHelloWorld);
}
}
In the CSS:
body {
background-color: #FFFFD2 !important; }
works fine to change the background color.
is there a way to change global the selection color of gwt datagrid?
I added following css-format in the main-app-css file:
.dataGridSelectedRow {
background: #1EDA17;
color: white;
height: auto;
overflow: auto;
}
I have seen also following link:
http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiCss.html
Sadly my change had no effect.
Do I miss any setStyleName() call?
There is also another way of setting custom css formatting for selected row in DataGrid. You need to create your custom interface that extends DataGrid.Resources. In this interface you should ovveride method dataGridStyle() and in #Source annotaion put path to your custom css file.
For example:
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface CustomDataGridResources extends Resources {
public interface CustomDataGridResources extends Resources {
#Source({DataGrid.Style.DEFAULT_CSS, "resources/CustomDataGridStyles.css"})
CustomStyle dataGridStyle();
interface CustomStyle extends DataGrid.Style {
}
}
If you want just to change style for selected row then your css file will contain only:
.dataGridSelectedRow {
background: #1EDA17;
color: white;
height: auto;
overflow: auto;
}
But I also prefer to change cursor for howered row:
.dataGridHoveredRow {
cursor: pointer;
cursor: hand;
}
Look also at similar discussion.
For applying custom style to your DataGrid you can use grid's constructor
public DataGrid(int pageSize, Resources resources, ProvidesKey<T> keyProvider)
where Resource is an instance that implements your custom interface (in my case CustomDataGridResources).
DataGrid.Resources customDataGridResources = GWT.create(CustomDataGridResources.class)
The custom css will not work since GWT overrides it with clean.css. If you use FIREBUG or any other tool you might recognize it. The solution is simple. Add !important to each line which has not affected with your custom css
.dataGridSelectedRow {
background: #1EDA17 !important;
color: white !important;
height: auto !important;
overflow: auto !important;
}
How can TH style name/s of a GWT CellTable's heading be looked up programatically?
I have looked at the Client Bundle documentation but it isn't immediately obvious to me how it all fits together. Thanks.
Not sure exactly what you want to do when accessing the TH style names.
If you want to override the standard css style of a celltable header, here are some of the css styles you can override to change the Look and Feel of the component.
.cellTableFirstColumnHeader {}
.cellTableLastColumnHeader {}
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
Here is the complete list of styles for cellTables CellTable.css
Now if you want to access you header programmatically, you can use this solution to get the TableSectionElement corresponding the the Header of your table. Then you can access the row, then the cells, and lookup for their styles I guess.
Last thing if you want to override the header style, maybe you can use the following method when adding your column to your table
public void addColumn(Column<T, ?> col, Header<?> header)
Then create your Header or use a TextHeader for example then set your style on it before adding it to the table using
public void setHeaderStyleNames(String styleNames)
Example
TextHeader textHeader = new TextHeader("headerTitle");
textHeader.setHeaderStyleNames("my-style");
myTable.addColumn(myColumn, textHeader);
Easy solution:
import com.google.gwt.user.cellview.client.CellTable.Resources;
private String getCellTableHeaderStyle() {
Resources res = GWT.create(Resources.class);
return res.cellTableStyle().cellTableHeader();
}
I am using GWT and would like to develop a vertical tab panel like the one in iGoogle.
How can the same be achieved ?
I had the same problem and decided not to use third party library just for one small widget. Here is a lightweight solution I ended up using - it is based on tweaking styles.
verticaltabpanel.css:
#external gwt-TabLayoutPanel;
.gwt-TabLayoutPanel>div {
position: static !important;
}
.gwt-TabLayoutPanel {
margin-left: 30px;
}
#external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
top: 0 !important;
width: 140px !important;
}
#external gwt-TabLayoutPanelTab;
.gwt-TabLayoutPanelTab {
display: block !important;
margin-top: 2px;
padding: 8px 6px !important;
}
#external gwt-TabLayoutPanelContentContainer;
.gwt-TabLayoutPanelContentContainer {
left: 150px !important;
top: 0 !important;
}
Add it to resources as usually:
public interface YouAppResources extends ClientBundle {
#Source("verticaltabpanel.css")
CssResource verticalTabPanelStyles();
}
Then inject it when your app starts:
resources.verticalTabPanelStyles().ensureInjected();
Define the tab panel in your templates like this:
<ui:style>
.tabPanel {
height: 400px;
width: 800px;
}
</ui:style>
<g:TabLayoutPanel addStyleNames="{style.tabPanel}" barUnit='PX' barHeight='0'>
</g:TabLayoutPanel>
Note that you have to set height and width and the style should be added not set.
The drawback of this approach is that all the tab panels in your application will be now vertical. If you need to have a horizontal one, you can use old TabPanel (note that it is deprecated). It is fine for my case as I have a number of vertical tab panels in my application and only one horizontal.
you can use ext-js's vertical tabs - see this demo http://iamtotti.com/playground/js/ext-3.1.1/examples/tabs/tabs.html
there is a gwt port of ext-js which you can use : http://code.google.com/p/gwt-ext/
Smart gwt also has a vertical tab implementation (its different to gwt-ext's) - http://www.smartclient.com/smartgwt/showcase and search for orientation on the left menu.
thx for your answer, megas.
One extension to make it possible to use some TabLayoutPanels with horizontal (original) and some with vertical (new) layout:
one could add ids (i.e. #myVertTab) to the css selectors.
I think what you're looking for is the TabLayoutPanel (scroll down a bit). It works great and it's a vanilla GWT widget, no third party libraries required.