I am trying to center a TabLayoutPanel in a uibinder and having no luck whatsoever. As you can see below, I've tried every CSS trick I can think of. Can anyone assist?
<ui:style>
.gwt-TabLayoutPanel {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #666;
border-left: 1px solid #999;
border-right: 1px solid #666;
}
</ui:style>
<g:VerticalPanel ui:field="userInterfacePanel" width="100%">
<mapmaker:MapBox ui:field="mapBox"/>
<g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs" height="300px" width="80%" >
<g:tab>
<g:header>Lines</g:header>
<g:Label>Select Line Data Here</g:Label>
</g:tab>
<g:tab>
<g:header>Features</g:header>
<g:Label>Select Features Data Here</g:Label>
</g:tab>
<g:tab>
<g:header>Help</g:header>
<g:Label>Help goes here</g:Label>
</g:tab>
</g:TabLayoutPanel>
<g:HorizontalPanel>
<g:Button>Generate KML</g:Button>
<g:Button>Generate Shapefile</g:Button>
</g:HorizontalPanel>
</g:VerticalPanel>
Centering an item can be done with a cell element like this:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>
The problem here is, that .gwt-TabLayoutPanel will not be applied to your TabLayoutPanel. That's because the class names in GWT's UiBinder styles will be obfuscated in the resulting CSS.
There are basically two solutions:
a) Either put your CSS for .gwt-TabLayoutPanel in a plain CSS file. Include that file in your HTML page using
<head>
...
<link type="text/css" rel="stylesheet" href="My.css">
...
</head>
This way, the class name won't be obfuscated.
b) Or (probably better), in the UiBinder <style> section, use an an arbitrary class name like .panel, and change your code like this:
<ui:style>
.panel {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #666;
border-left: 1px solid #999;
border-right: 1px solid #666;
}
</ui:style>
...
<g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs"
height="300px" width="80%"
addStyleNames="{style.panel}" >
This way, the class name will be obfuscated both in the style definition, and in the class attribute of your panel.
Now your panel should be centered.
There is another solution exactly for jour case (btw mentioned in javadoc as not recommended for new code).
In View:
interface GlobalResources extends ClientBundle {
#NotStrict
#Source("../resources/css/global.css") //legacy.css
CssResource css();
}
View's constructor:
// Inject global styles.
GWT.<GlobalResources>create(GlobalResources.class).css().ensureInjected();
That way standart CSS can be used without obfuscation.
global.css:
.gwt-DialogBox .Caption {
background: #E3E8F3;
padding: 4px 24px 4px 8px;
cursor: move;
border-bottom: 1px solid #BBB;
border-top: 0px solid white;
text-align: center;
font-family: Georgia, Times New Roman, sans-serif;
}
I injected GlobalResources in main presenter so editing theme for standart widgets (MenuItem,DialogBox,etc.) became much easier.
If the obfuscation of the stylename is the problem as the others suggested simply add:
#external .gwt-TabLayoutPanel;
to the <ui:style> part.
Related
Browser: ie11 (My company requires this).
Once expanded, it overflows the div and the footer.
I need it to extend the div behind it so it always fits.
Currently, the div behind has these attributes:
height:600px;
width:650px;
background-color:white;
margin-left:200px;
margin-top:-520px;
position:absolute;
z-index:10;
border-radius:50px 10px 50px 10px;
border:solid;
border-width: 5 5px;
border-color: #fcf17a;
box-shadow:5px 5px 12px black;
font-size: 12px;
I am also using the Vallenato accordion as I'm not too good with JS myself.
Found here:
http://www.switchroyale.com/vallenato/
Image of accordion here
http://i.imgur.com/0mCCeX6.png
Thanks for your time.
I want the browser to show a vertical scrollbar when the content grows larger than the page. The content and footer disappear below the screen instead of showing a vertical scroll bar (like we see on the SO home page).
I asked a similar question earlier, but it was directed at why the page footer wouldn't expand as the content grew. I got that sorted out but now the footer moves south but a page scrollbar never shows up.
My UiBinder xml is as follows (here's a link to the file):
<g:DockLayoutPanel unit='PX' styleName="{style.shellStyles.wrap}">
<g:north size='180'>
<g:HTMLPanel styleName='{style.shellStyles.header}'>
<div id="login" class="{style.shellStyles.login}">
<g:InlineLabel ui:field="loggedInUser"/>
<g:InlineHyperlink ui:field="loginLogoutLink"/>
</div>
<h1>Flash Cards Application</h1>
</g:HTMLPanel>
</g:north>
<g:center>
<g:FlowPanel>
<g:HTMLPanel styleName='{style.shellStyles.content}'>
<g:SimplePanel styleName='{style.shellStyles.left}' ui:field="navigationPanel" />
<g:SimplePanel styleName='{style.shellStyles.right}' ui:field='contentPanel' />
<div style="clear: both;" ></div>
</g:HTMLPanel>
<g:HTMLPanel styleName="{style.shellStyles.footer}" height="70">
<g:Label>© Copyright by Justin Robbins</g:Label>
</g:HTMLPanel>
</g:FlowPanel>
</g:center>
Excerpt of CSS is as follows (here's a link to the full CSS):
.wrap {
width: 820px;
margin: 20px auto 10px auto;
}
#sprite .header {
gwt-image: "headerImage";
background-color: #efefef;
height: 180px;
}
#sprite .content {
gwt-image: "contentImage";
background-color: #efefef;
padding: 10px 40px 20px 20px;
min-height: 500px;
}
.left {
width: 210px;
float: left;
}
#sprite .left h4 {
gwt-image: "sidebarImage";
padding: 0 0 0 10px;
height: 50px;
line-height: 50px;
color: #fff;
}
.right {
width: 530px;
float: right;
padding-top: 10px;
padding-right: 60px;
}
#sprite .footer {
gwt-image: "footerImage";
background-color: #efefef;
height: 70px;
line-height: 70px;
color: #fff;
text-align: center;
}
*{margin:0; padding:0;}
body {
font-family: Arial;
font-size: 12px;
background: #efefef;
color: #232323;
margin:0;
padding:0;
line-height: 150%;
}
Wrap your Flowpanel in the content area with ScrollPanel and set its height. You will get the scroll
You are using a Layout-based panel as your root element, hence it will always fit the whole page and if you resize the browser window, everything will resize accordingly (if you've used ProvidesResize/RequiresResize widget down the road).
If the content you know it will grow, simply wrap it into a ScrollLayoutPanel, or set the first FlowPanel of the <center> element to have overflow (it's ugly as you will see).
You also probably want the footer to be always visible, so why not moving that into the region of the main DockLayoutPanel?
I suggest you to give a read here.
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
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.
can anyone tell me how I can change the style of the draggers in a UIBinder template for the SplitLayoutPanel.
Here is my MainMenu.ui.xml:
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style src="Resources/GlobalStyles.css" />
<g:SplitLayoutPanel width="100%" height="100%" styleName='{style.splitLayoutPanel}'>
<g:north size="100">
<g:HTMLPanel/>
</g:north>
<g:west size="250">
<g:HTMLPanel/>
</g:west>
<g:center>
<g:HTMLPanel/>
</g:center>
<g:south size="50">
<g:HTMLPanel
styleName='{style.footerPanel}'>
<div>
Contact us
Privacy
About
</div>
</g:HTMLPanel>
</g:south>
</g:SplitLayoutPanel>
</ui:UiBinder>
The Resources/GlobalStyles.css looks like this:
body,table {
font-size: small;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #000;
background: #red;
}
.splitLayoutPanel {
.gwt-SplitLayoutPanel-HDragger {
background:#d0e4f6;
cursor: col-resize;
}
.gwt-SplitLayoutPanel-VDragger {
background: #d0e4f6;
cursor: row-resize;
}
}
.footerPanel {
margin-left: 11px;
padding: 10px;
border-top: 2px solid #5693d6;
text-align: right;
}
What's wrong here? My draggers are not visible and there is no cursus change.
I think GWT doesn't like the nesting. So rewritting the css as follows should make it work:
.splitLayoutPanel .gwt-SplitLayoutPanel-HDragger {
background:#d0e4f6;
cursor: col-resize;
}
.splitLayoutPanel .gwt-SplitLayoutPanel-VDragger {
background: #d0e4f6;
cursor: row-resize;
}
Also GWT will probably complain about the .gwt- styles, in that case the following lines in your css:
#external .gwt-SplitLayoutPanel-HDragger;
#external .gwt-SplitLayoutPanel-VDragger;