Lt see this code in UiBinder file
<g:AbsolutePanel>
<g:at left='10' top='20'>
<g:Label>Lorem ipsum...</g:Label>
</g:at>
<g:Label>...dolores est.</g:Label>
</g:AbsolutePanel>
Gwt, how to make the above AbsolutePanel to have transparent background?
You can do that using css.
.transparent
{
z-index: 2;
opacity: 0.9;
}
Change the opacity level according to your preference. Then add this class to your absolute panel
Related
I have just 1 FlowPanel & 1 InlineHTML, the following code doesn't make InlineHTML go into the middle of FlowPanel.
myFlowPanel.setWidth("100%");
myFlowPanel.add(myInlineHTML);
myInlineHTML.setHTML("<table>...</table>");
myFlowPanel.addStyleName(getView().getRes().css().textAlignCenterImportant());
//This is css
.textAlignCenterImportant{
text-align:center !important;
}
How can we centralise the myInlineHTML inside myFlowPanel (GWT) by just using 1 FlowPanel & 1 InlineHTML without using other extra widgets?
This css will solve your problem. Apply it on InlineHTML.
.center_text {
display: block;
text-align: center !important;
}
InlineHTML in converted into <span> tag in HTML.
Here is the sample code:
FlowPanel fixHeaderPanel = new FlowPanel();
fixHeaderPanel.setWidth("100%");
InlineHTML inlineHTML=new InlineHTML("Hi how are you!");
inlineHTML.setStyleName("center_text");
fixHeaderPanel.add(inlineHTML);
Snapshot:
EDIT
as per your last comment.
try this one:
inlineHtnl.setHTML("<table width='100%'>..</table>");
I am using gwt for showing a dynamic image inside a td and the image is coming from a imagebundle but its showing the whole big image, which gwt makes during compilation, inside that td rather than showing specific part from that big image. I don't know what I am missing here... The problem is the image will be added and selected dynamically and I can't define a css everytime I add an image. If anyone of you can help me regarding it. Here is my code
My table cell is defined inside the UiBinder something like....
<ui:style>
.colourPickerCell {
background-repeat:no-repeat;
}
</ui:style>
<tr>
<td class="{style.colourPickerCell}" ui:field="colourPreviewSlot" rowspan="3" width="50%"></td>
</tr>
Function inside the presenter class:
public void newColorSelected(Image patternImage) {
Style patternImageStyle = patternImage.getElement().getStyle();
Style style = getColourPreviewSlot().getStyle();
style.setWidth(patternImage.getWidth(), Unit.PX);
style.setBackgroundImage(patternImageStyle.getBackgroundImage());
style.setLeft(-patternImage.getOriginLeft(), Unit.PX);
style.setTop(-patternImage.getOriginTop(), Unit.PX);
style.setHeight(patternImage.getHeight(), Unit.PX);
}
When I debug my code I get the html for patternImage object as:
<img id="..." style="backgrond:url(....) no-repeat -149px 12px;"/>
Best regards,
If you are using this image as a background sprite, it think you have to use background-position css property to "move" your image "behind" the td.
"left" and "top" properties are relative to the element you set the style on, not its underlying background image.
I'm using GWT 2.4. I have a view with some simple content ...
final Image ajaxImage = new Image("loading.gif");
final Grid grid = new Grid(1, 2);
grid.setText(0, 0, "Loading...");
grid.setWidget(0, 1, ajaxImage);
this.container = new FlowPanel();
this.container.add(grid);
rootPanel = new SimplePanel();
rootPanel.add(this.container);
I would like this content to be centered horizontally and vertically in the containing panel, which is a FlowPanel, if that matters. How do I do that?
Thanks, - Dave
I know how to do it in a verticalpanel.
VerticalPanel panelPrincipal3 = new VerticalPanel();//Esto es el panel central, donde se centra todo
panelPrincipal3.setWidth("100%");
panelPrincipal3.setHeight("100%");
panelPrincipal3.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panelPrincipal3.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
panelPrincipal3.add(/*your panel*/);//here yo add whatever yo want, and should be centered
if you were to put your FlowPanel as a direct child of your RootPanel, you can try to set its height to 100%. so if you only have a grid as a child component for your container, you can set its alignments like this:
container.setCellHorizontalAlignment( grid, HasHorizontalAlignment.ALIGN_CENTER );
container.setCellVerticalAlignment( grid, HasVerticalAlignment.ALIGN_MIDDLE );
But if you ever change your mind and you'll switch to UiBinder, you can do something like this:
<g:VerticalPanel spacing="0" width="100%" height="100%" ui:field="mainPanel">
<g:Cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<!-- content goes here -->
</g:Cell>
</g:VerticalPanel>
with css? margin:0 auto; and position:absolute; top:50%; ?
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;
}
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.