One thing I've learned in my experience with designing a gwt app: look
for lots of nesting. Once you understand how something is built, you can
correctly implement and style it. That being said, while it works fine
in terms of the javascript output, the tabpanel's HTML output has me
slightly confused.
The tab panel, as I understand, is created via a tabbar and deckpanel
inserted into a verticalpanel. So, that should mean the HTML would show
a two-row container table (the verticalpanel) with the top row housing
the tabbar table and the bottom row housing the deckpanel div. However,
when I create a tabpanel in gwt and then view in Firefox, trusty Firebug
indicates there is an extra div between the deckpanel div and the child
widget. Here's a very simplified example:
//gwt-code:
final TabPanel pUserTabs = new TabPanel();
pBody.add(pUserTabs);
final Button btnTest = new Button("test");
pUserTabs.add(btnTest, "Test");
pUserTabs.selectTab(0);
<!--HTML output-->
<table class="gwt-TabPanel" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="usr" cellspacing="0" cellpadding="0" role="tablist"
style="width: 100%;">
<tbody>
<!--Tab Bar Row-->
<tr>
<td class="gwt-TabBarFirst-wrapper" height="100%" align="left"
style="vertical-align: bottom;">
<div class="gwt-TabBarFirst" style="white-space: normal; height: 100%;">
</div>
</td>
<td class="gwt-TabBarItem-wrapper gwt-TabBarItem-wrapper-selected"
align="left" style="vertical-align: bottom;">
<div class="gwt-TabBarItem gwt-TabBarItem-selected" tabindex="0" role="tab">
<div class="gwt-Label" style="white-space: nowrap;">Test</div>
</div>
</td>
<td class="gwt-TabBarRest-wrapper" align="left" width="100%"
style="vertical-align: bottom;">
<div class="gwt-TabBarRest" style="white-space: normal; height: 100%;">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--DeckPanel row-->
<tr>
<td height="100%" align="left" style="vertical-align: top;">
<div class="gwt-TabPanelBottom" role="tabpanel">
<div style="margin: 0px; padding: 0px; width: 100%; height: 100%;">
<!--Where is this div coming from? Can it be reached, styled, removed?-->
<button class="gwt-Button" tabindex="0" type="button" style="width:
100%; height: 100%;">test</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Why is an extra div thrown in here? While in the above example there's
not much of a problem, I'm currently trying to tame two nested tabpanels
with further nested children, and it can be difficult to style
everything when there's something extra thrown into the inheritance that
I wasn't expecting and can't reach. Anyone ever seen this or have any
suggestions as to why it's there?
Michelle
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
