I am using TabPanel in my GWt application
<g:HTMLPanel>
<div class="center">
<g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
barHeight="40" width="100%;">
<g:tab>
<g:header>
DashBoard
</g:header>
</ g:TabLayoutPanel>
using this for my tabpanel height
.gwt-TabLayoutPanel {
min-height:500px;
}
its working fine , BUT i want this height to be 100%, But when I make it to 100% ,The whole TabPanel disappears ,
Any solution for that ..coz when my stuff hights increase , the lower are start cutting off ..
thanks
Put your TabLayoutPanel in a LayoutPanel or any other panel that provides size to its children. For example, if you put your panel directly into the RootLayoutPanel, it will take 100% of the screen automatically, and it will resize with the browser window.
The problem with 100% height is it will be 1px if the parent container does not have a height set.
You might find the following article intresting as a possible workarround.
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
Related
We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.
When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:
<img style="width: 500px; height:500px;"
src="/media/1007/jobs-block.jpg?width=500&height=500" alt="undefined" rel="1097" />
I really don't want ANY w x h in the tag or image src.
I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.
If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.
If you set it to 0 it will disable any resizing.
I think you can have your cake and eat it too, no need to restrict editor re-sizing.
Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.
I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css
I have a complicated GWT question. Wish someone can give me some tips.
I want to create a panel that looks like in the following( content on the left, and some texts in the middle of the right side(tab), OR on the top of right side. (see the first picture)
Firstly, I considered the tab panel. but tap panel only has the horizontal tab on top. So this will not work unless I use third party libraries.
Then I tired the docklayoutpanel. but there is some problem as well. I put the content in mid, and put a label with some text in east. The height of the tab will be the same as the height of content. (see the 2nd picture). I dont like this. I dont want the white space shown up.
So does anyone have good idea about how to implement this kind of panel?
Thanks a lot.
Regards!
1st picture
|-------------------------|
|------- content ---------|---------|
|-------------------------|---tab---|
|-------------------------|---------|
| ------------------------|
2nd picture
|-------------------------|white space|
|------- content ---------|-----------|
|-------------------------|----tab----|
|-------------------------|-----------|
| ------------------------|white space|
Also, for the 2nd method, I tried to set the east area of docklayoutpanel to be transparent. But I did not know how to do this. and i am not sure if it will clean out the white space area.
Put the tabs in an "east" panel with height: 100%, and give it the background color you want. Put the main content in a "center" panel. Do not use "north" or "south".
If you want vertical centering for the tabs, then the easiest method is to use VerticalPanel with verticalAlignment="MIDDLE".
<ui:style>
.centerPanel { background-color: royalblue; }
.eastPanel { background-color: lightblue; width: 100%; height: 100%; }
</ui:style>
<g:DockLayoutPanel unit="EM">
<g:center>
<g:FlowPanel addStyleNames="{style.centerPanel}">
<g:Label>Content</g:Label>
</g:FlowPanel>
</g:center>
<g:east size="8">
<g:VerticalPanel addStyleNames="{style.eastPanel}"
verticalAlignment="MIDDLE">
<g:FlowPanel>
<g:Label>Tab1</g:Label>
<g:Label>Tab2</g:Label>
</g:FlowPanel>
</g:VerticalPanel>
</g:east>
</g:DockLayoutPanel>
The result looks like this:
I'm using GWT 2.3 and have what I think is an extremely common layout scenario that doesn't seem to be very well supported -- but I hope StackOverflow can tell me I'm looking at the problem wrong.
I'm using layout panels to arrange my app. Typically, you put a layout panel into the RootLayoutPanel, where it takes over the whole browser window.
However, I have a site header and footer that need to be outside of GWT.
The problem is, as the docs clearly say, if you insert a layout panel into an arbitrary HTML element of the page instead of using the RootLayoutPanel, you lose the automatic resize behavior. You must specify the layout panel's starting size, and do any resizing manually.
How would I achieve this manual resizing? I'm pretty sure I can track the resizing of the HTML element via javascript, but how do I then interact with GWT to tell it the new size?
Thanks!
I would recommend using css absolute positioning in your html file :
<body style='position:absolute; top:10em; bottom:10em; left:0; right:0;>
<div id="top" style="position:absolute; left:0; top:-10em; bottom:0; right:0;">
<p> THIS IS THE TOP BANNER </p>
</div>
<div id="bottom" style="position:absolute; left:0; top:100%; bottom:0; right:0;">
<p> THIS IS THE BOTTOM BANNER </p>
</div>
</body>
Your RootLayoutPanel will attach to the body, which now has a 10em top and bottom margin.
One possible pure GWT solution.
You can add a resize handler. In the resize event you can get the new dimensions and resize your component.
The GWT mail sample pre GWT 2.0 Mail used "manual" resizing (but its a bit out of date).
http://code.google.com/p/google-web-toolkit/source/browse/releases/1.7/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java
Basically, you want to hook into the window resize event handler:
// Hook the window resize event, so that we can adjust the UI.
Window.addResizeHandler(new ResizeHandler() {
public void onResizeA(int width, int height) {
// Adjust each immediate child widget by calling child.onResize()
}
}
hey guys,
I have a div.mapFullscreenContainer
#mapFullscreenContainer {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
This div is shown when I scroll to the bottom and click on a button. In normal browsers this works just fine. The overlay is 100% wide and 100% high and lies on top of the page.
However on touch devices there is the problem that the overlay is always out of the viewport. Imagine the button that makes the overlay visible is in the footer of a rather long webpage. The overlay is always at the very beginning of the page so it's not immediately visible to the user. The user has to scroll back to the top to see the overlay.
Any idea how I could fix that so it behaves like on a normal browser. bottom:0; instead of top:0 doesn't make a difference.
you can use JS to count and apply total height of your page to this div http://jsfiddle.net/seler/FjeyK/
My existing layout is a stack of two divs - g:layers in a LayoutPanel. The top div should be as big as it needs to be to contain its contents. The bottom div should take up the rest of the space on the screen, without causing scrollbars to appear.
The contents of the top div can change, so the size of the top div can change.
My current solution is a callback that's triggered whenever the contents of the top div change. The containing LayoutPanel can then recalculate the size of the top div and explicitly set the top and bottom attributes of the second layer to take up the rest of the space. Is there a better way? Something like,
<g:LayoutPanel>
<g:layer top="0px" height="whatever you need, baby">
<c:SomeWidget/>
</g:layer>
<g:layer top="the bottom of the first layer" bottom="0px">
<c:Anotherwidget/>
</g:layer>
</g:LayoutPanel>
What about using DockLayoutPanel?
<g:DockLayoutPanel unit='PX'>
<north size="10" ui:field='northWidget'>
<c:SomeWidget/>
</north>
<center>
<c:Anotherwidget/>
</center>
</g:DockLayoutPanel>
Then the center will take up the rest of the space. If you want to resize the top, call
setWidgetSize(northWidget, newSize); and the center widget will be recalculated.
The answer seems to be that there is not a better way. Manual recalculation isn't so bad when you get used to it!
I think HeaderPanel is the standard Widget to do this. Maybe it was added after the question was asked. We missed it too and had our own version for a while.