Im trying to display a Submenu when im hover a menuitem but my Submenu is on a wrong position and it is under my Menu.
how can I set the Position of my Submenu or change the z index of the Sumenu (popup)
As long as your submenu class extends the com.google.gwt.user.client.ui.UIObject class, you can give it a style name. (All widgets do this). And then you can set the z-index of that style in a css file:
Java:
MySubMenuClass submenu = new MySubMenuClass();
submenu.addStyleName("subMenuStyle");
CSS:
.subMenuStyle{
z-index: 50; // or any other value > 0
}
Alternatively, you can hardcode the z-index in java (not recommended, because for every change to the value of your z-index you will have to recompile your entire GWT application instead of simply exchanging the CSS file and refreshing). The submenu class still needs to extend UIObject for this to work.
Java:
submenu.getElement().getStyle().setZIndex( 50 );
Related
I'm trying to make Eclipse UI more compact and already have successfully tweaked it using these instructions:
Can I make Eclipse on Ubuntu look more compact?
https://gist.github.com/andrioli/3825078
The only remaining thing I want to improve is reducing vertical spacing between menu items as on this picture:
.
I looked through GtkMenuItem style properties, but can't find any setting for that. GtkMenu::vertical-padding also doesn't seem to be right one.
Is there any Gtk2 widget property that I can modify to do it?
There are a couple of settings in your theme's gtkrc file that you can modify to make the menu items more compact:
To reduce the width and height of the menu items, you can assign a smaller value to the xthickness and ythickness properties respectively (horizontal and vertical padding respectively between the text and border of a widget). e.g.
style "menu_item" {
xthickness = 1
ythickness = 1
}
The above code snippet assumes your GtkMenuItem widget uses a style called menu_item in your theme's gtkrc file. i.e.
widget_class "*<GtkMenuItem>*" style "menu_item"
The height of the separator menu item (line separating menu items) can be reduced by assigning a smaller value to the GtkWidget::separator-height property. e.g.
style "separator_menu_item" {
xthickness = 1
ythickness = 1
GtkSeparatorMenuItem::horizontal-padding = 0
GtkWidget::wide-separators = 1
GtkWidget::separator-width = 1
GtkWidget::separator-height = 1
}
Again, the above code snippet assumes your GtkSeparatorMenuItem widget uses a style called separator_menu_item in your theme's gtkrc file. i.e.
widget_class "*<GtkSeparatorMenuItem>*" style "separator_menu_item"
I'm using custom cursors and it need to be differ in some components in my screen.
When I set the cursor for Accordion, it doesn't effects title headers but effects the body of each TitledPanes. I even tried to set the cursor for each TitledPane but it doesn't effect the title header. I'm using following way to change the cursor.
ImageCursor cursor_title = new ImageCursor(cursorImg_title,cursorImg_title.getWidth() / 2,cursorImg_title.getHeight() / 2);
accordionBody.setCursor(cursor_title);
Is there a way to change the cursor in title bar of a JavaFX Accordian?
More....
I have changed the padding of title bars using css as follows. Hope it doesn't have any relation to the problem.
.titled-pane > .title {
-fx-padding: 30;
}
A TitledPane is divided into two parts :
Title
Content
When you are setting the Cursor on the Accordion, it delegates it to the content of each TitledPane, but leaves the Title. This is by design.
To force your application to change the cursor on the title as well, we need to set it on each of these nodes. We can fetch all the nodes by using the lookupAll() on the accordion and passing the styleclass they use i.e. .title. Make sure you use this after the scene graph is visible.
accordion.lookupAll(".title").forEach(node -> node.setCursor(Cursor.CLOSED_HAND));
You can use your custom cursor in place of CLOSED_HAND.
I would like to develop in GWT a vertical menu similar to the one found on http://gwt.google.com/samples/Showcase/Showcase.html (the left blue menu which first section is "Widgets").
Since it's a GWT showcase, one can assume that left menu is a GWT widget, but which one ?
I have browsed every example and none of them looks like that menu. Any guess ?
Did you know the Showcase sample is open-source? It's even bundled with the GWT SDK.
The code tells use it's a CellTree within a ScrollPanel (within a DockLayoutPanel within a DockLayoutPanel):
The UiBinder template
The code initializing the CellTree
The code initializing the TreeViewModel (including prefetching the split-points for the samples when you expand a category node; and updating the center panel when you select a sample node)
the TreeViewModel itself
It's the CellTree widget!
A demo is actually inside the showcase: CellTree, but in the example, it has a different style applied:
CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
cellTree = new CellTree(
new ContactTreeViewModel(selectionModel), null, res);
(this stlyes makes the +/- buttons and lets it look like a regular tree)
If you don't apply this style the Cell Tree looks like the left menu.
Looks just like a vertical arrangement of DisclosurePanel. Here are the docs.
In menubar, normally submenu gets displayed on the right hand side. I want to change to Left hand side. Can anyone please let me know, how can I do it ?
Popup location of Sub menu is defined by CSS elements at rendering based on position of menu items.
Looking Via Firebug On Main Menu It produced:
element.style {
clip: rect(auto, auto, auto, auto);
left: 337px; // Change this to left:35px;
overflow: visible;
position: absolute;
top: 319px;
visibility: visible;
}
// This is main CSS for popup
.gwt-MenuBarPopup{
}
So, Give it a try by using setStyleName("css goes here") from code
I again advise you to override the default styles GWT:) I used this method on my project when I had to change some standard view of GWT-elements.
I was able to implement a solution by changing the css as well. Perhaps this isn't the most elegant way, but it works. Using a little help from GwtQuery's closest() method, here is a short example.
menuBar.addAttachHandler(new AttachEvent.Handler() {
#Override
public void onAttachOrDetach(AttachEvent event) {
if(event.isAttached()){
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
Element e = $(menuBar).closest(".gwt-MenuBarPopup").get(0);
e.getStyle().setLeft(parentMenuBar.getAbsoluteLeft()-menuBar.getOffsetWidth() , Unit.PX);
}
});
}
}
});
So the idea being when the child sub menu is attached, you want to change the css. I use a deferred command so that it will change the css after GWT's default MenuBar implementation sets it.
This line, "$(menuBar).closest(".gwt-MenuBarPopup").get(0);" will search up the DOM tree until it finds the element with the class .gwt-MenuBarPopup, which is the one you want to change.
My solution is somewhat of a hybrid of those posted so far here, but I think it is cleaner/simpler than any of them.
Each vertical subMenu is itself a MenuBar, added as an item to the top-level
MenuBar. For whichever subMenu you want to drop to the left instead of the right, add a style class name to it using .addStyleName("myLeftDropDownStyleName") on that MenuBar Widget.
Define the selector rule for that style like this (these are the minimum attributes that were necessary for me to get the left dropping):
.myLeftDropDownStyleName{
position: absolute;
right: 0px;
}
Absolute positions relative to the first parent element with a position other than static; for my case at least, that parent position seemed to be horizontal place where the dropdown otherwise has its left edge without this solution. I wouldn't be suprised if Relative position might work better in some other people's cases.
The Right offset of 0px tells the absolute position's right to be at that horizontal place I mentioned above. And of course the pixel size can be > 0 to push further to the left by that much, or even < 0 to pull it back to the right by that much.
This works perfectly for me, is simple & clean, and does not force all of your MenuBars to have this style (as I think would be the case if you overrode one of the GWT MenuBar styles themself).
In GWT, I am using CellTable.
When you mouse over the CellTable it highlights each row.
How do change the behavior of the highlighting from the mouse over? Specifically:
change the color of highlighting
disable/enable
make it highlight only the specific grid item at your cursor (instead of the entire row)
( The current hack I have is to create a bunch of 1 column wide CellTables and add them to a VerticalPanel layout... creating the illusion that there is one CellTable and it highlights each grid according to your cursor. Is this bad? Why? performance? )
You will notice the CellTable uses a ResourceBundle, which means all the css styles get obfuscated ... this makes it more difficult to override styles.
The CellTable constructor will actually allow you to override the default ResourceBundle. So first, you need to create your own resource bundle like this:
public interface CellTableResources extends Resources {
public CellTableResources INSTANCE =
GWT.create(CellTableResources.class);
/**
* The styles used in this widget.
*/
#Source("CellTable.css")
CellTable.Style cellTableStyle();
}
Then you need to create your own CSS file. I recommend copying the CellTable style directly into your project and use that as a starting point. You can find it here:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css
Make sure the style is injected first, and then you just feed it into the CellTable's constructor like this:
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
Specifically, you'll want to tweak these styles:
cellTableKeyboardSelectedRow
cellTableKeyboardSelectedRowCell
cellTableSelectedRow
cellTableSelectedRowCell
cellTableKeyboardSelectedCell
It is important to note that the cell table differentiates between the 'selected row' and the 'keyboard selected row'. The selected row is the actual row selected (ie via SelectionModel). The keyboard selected row refers to what is highlighted when the user is pressing the up / down key, but does not mean the row is actually selected (if that makes sense).
I'll just add for number 2) on your list, you can simply do
cellList.setSkipRowHoverStyleUpdate(true)
That completely disables highlighting. There are also two more setSkip-functions on CellList related to hovering.
CellTable can be styled via CSS: How do I style a gwt 2.1 CellTables headers?
To disable highlighting just set the hover CSS property to nothing.
Possibly - try tweaking the .cellTableSelectedRow and .cellTableSelectedRowCell.
Here is the original CellTable.css: http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css&q=cellTableLastColumn&d=8