Re: Rounded borders in panel

UiBinder: (Also shows background gradients)

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

.wrap {

padding: 10px;

}

.roundedWidget {

text-align: center;

margin: 0px 0px 0px 0px;

color: #FFFFFF;

cursor: pointer;

border: 1px solid #4D4D4D;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: #666 1px 2px 2px;

-moz-box-shadow: #666 1px 2px 2px;

box-shadow: #666 1px 2px 2px;

background: #616161;

background: literal("-webkit-gradient(linear, 0 0, 0 bottom, from(#616161), to(#303030))"

);

background: literal("-webkit-linear-gradient(#616161, #303030)");

background: literal("-moz-linear-gradient(#616161, #303030)");

background: literal("-ms-linear-gradient(#616161, #303030)");

background: literal("-o-linear-gradient(#616161, #303030)");

background: literal("linear-gradient(#616161, #303030)");

padding-bottom: 4px;

}

.roundedWidget:hover {

color: #333333;

background: #EBEBEB;

background: literal("-webkit-gradient(linear, 0 0, 0 bottom, from(#EBEBEB), to(#C2C2C2))"

);

background: literal("-webkit-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("-moz-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("-ms-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("-o-linear-gradient(#EBEBEB, #C2C2C2)");

background: literal("linear-gradient(#EBEBEB, #C2C2C2)");

}

</ui:style>

<g:HTMLPanel ui:field="wrap" styleName="{style.wrap}">

<g:HTMLPanel styleName="{style.roundedWidget}" ui:field="text">

More HTML or Widgets Here

</g:HTMLPanel>

</g:HTMLPanel>

</ui:UiBinder>

Non UiBinder:

You can probably start with:

fuWidgetBar.getElement().getStyle().setProperty("borderRadius", "30px");

On Wednesday, October 24, 2012 1:47:23 AM UTC-4, vairavan Murugappan wrote:

Is there a easy widget or panel with rounded borders in gwt ??

It seems decoratorpanel can be used to do it but its not very clear how to do it..

Thanks in advance.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/B-3KftJTjKkJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.