You are viewing a plain text version of this content. The canonical link for it is here.
Posted to adffaces-user@incubator.apache.org by Renzo Tomaselli <re...@tecnotp.it> on 2007/01/20 20:10:24 UTC
[Trinidad] wrong rendering of NavigationPane tabs on Firefox 2.0
Hi, I'm experiencing a wrong rendering of the tab bar on Firefox 2.0. On
IE it seems ok.
I'm using a MenuModel-driven navigationPane. I noticed that tabs are
rendered by means of an icon puzzle, surrounding tab label text.
All icons are provided by skin selectors as background. I did not modify
any selector.
The problem is that - after any tab clicking - such icons are not shown.
Any further action - such as right-button click on text, or page
refresh, displays all icons properly, till next tab selection.
Since full page refreshing renders everything ok, I suspect that PPR is
involved somehow.
Trinidad navigationPane examples run fine, but none of them uses the
MenuModel. They use direct children.
Had anybody else similar issues ?
Thanks -- Renzo
Re: [Trinidad] wrong rendering of NavigationPane tabs on Firefox 2.0
Posted by Adam Winer <aw...@gmail.com>.
I believe the display:inline is necessary for at least one
browser (IE, I think?), so removing it isn't OK. navigationPane
is definitely in need of an HTML overhaul, though - it
renders pretty badly on Safari.
-- Adam
On 1/24/07, Renzo Tomaselli <re...@tecnotp.it> wrote:
>
> After a long stripping session, I came up with a simple html page,
> derived from a rendered NavigationPanel tab.
> After placing this page on the local filesystem together with a stripped
> css, Common11-m7.js and all involved icons (tab3-*), Firefox 2.0
> displays this page completely only the first time or after any reloading.
> It does not complete the page after clicking on the link. No console
> errors, though.
> It seems pausing in the middle. Rendering completes if clicking either
> buttons. Even activating plugins such as CSSviewer or Firebug completes
> the page.
> Please notice that I removed all inline script function calls, so that
> no Trinidad js functions should be called. However, if I remove the
> script loading, page shows up ok. If I remove the outermost table, it's
> ok. If I place all those files on a remote server then I browse that
> page from here, it's ok.
> If I remove the onclick attribute from the link, it's ok (it's just
> submitting the enclosing form, the original page invoked another
> function).
>
> Now the funny point: look at those initial table/tbody elements having
> "display: inline;". If I remove *both* attributes, rendering is ok !
> Don't ask me why.
> Now I can easily patch NavigationPaneRenderer again (third time in a
> week) to remove those attributes, but does anybody know about any
> potential side effects ?
> Besides this page, I will check the real application ASAP through a
> patched NavigationPaneRenderer.
> In any case, here are all data (js and icons are from Trinidad):
>
> - Stripped css (gecko, from Trinidad-generated css) is:
>
> BODY {BACKGROUND-COLOR:#D9E1E8; BORDER-RIGHT:medium none;
> PADDING-RIGHT:0px; BACKGROUND-POSITION:left top; BORDER-TOP:medium none;
> PADDING-LEFT:0px; FONT-WEIGHT:normal; FONT-SIZE:8pt; PADDING-BOTTOM:0px
> ;MARGIN:0px; BORDER-LEFT:medium none; COLOR:black; PADDING-TOP:0px;
> BORDER-BOTTOM:medium none; FONT-FAMILY:Verdana, Arial;
> TEXT-DECORATION:none}
> .x3v {height:26px;overflow:hidden;width:100%}
> .x3z,.x40 {height:22px;width:26px;background-position:top right}
> .x46,.x48,.x4a {height:4px;background-repeat:repeat-x}
> .x47 {height:4px;width:17px;background-repeat:no-repeat}
> .x3w {cursor:pointer}
> .x43
>
> {height:22px;font-family:Arial,Helvetica,Geneva,sans-serif;font-size:10pt;font-weight:normal;padding-left:3px;color:#000000;white-space:nowrap}
> .x49 {height:4px}
> .x45 {height:22px;width:15px}
> .x4b {height:4px;width:100%;background-repeat:no-repeat}
> .x47 {height:4px;width:17px;background-repeat:no-repeat}
> .x49 {height:4px}
> .x3w .x3z
> {background-image:url('file:///C:/AxxBrowser/tab3-start-selected.gif')}
> .x3w .x40
> {background-image:url('
> file:///C:/AxxBrowser/tab3-start-join-selected.gif')}
> .x3w .x46,.x3w .x48,.x3w .x4a
> {background-image:url('file:///C:/AxxBrowser/tab3-bot-mid-selected.gif')}
> .x3w .x47
> {background-image:url('file:///C:/AxxBrowser/tab3-bot-start-selected.gif')
> }
> .x3w .x43
> {background-image:url('
> file:///C:/AxxBrowser/tab3-mid-selected.gif');font-weight:bold;color:#585955
> }
> .x3w .x45
> {background-image:url('file:///C:/AxxBrowser/tab3-end-selected.gif')}
> .x3w .x4b
> {background-image:url('file:///C:/AxxBrowser/tab3-bot-end-selected.gif')}
>
> - and the faulty page (dummy.htm):
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
> <html dir="ltr" lang="en">
> <head>
> <link rel="stylesheet" charset="UTF-8" type="text/css"
> href="file:///C:/AxxBrowser/gecko.css">
> <script src="file:///C:/AxxBrowser/Common11-m7.js"></script>
> </head>
> <body>
> <table cellpadding="0" cellspacing="0" border="0" summary=""><tr><td>
> <form id="tabberForm" name="tabberForm" method="POST"
> action="file:///C:/AxxBrowser/dummy.htm">
> <div class="x3v" id="tabberForm:tabber">
> <table cellpadding="0" cellspacing="0" border="0" summary=""
> style="display: inline;" class=""> <!-- this -->
> <tbody style="display: inline;"> <!--- and this -->
> <tr>
>
> <td>
> <table cellpadding="0" cellspacing="0" border="0"
> summary="" class="x3w">
> <tbody>
> <tr>
> <td class="x3z"></td>
> </tr>
> <tr>
> <td class="x46"><div class="x47"></div></td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <table cellpadding="0" cellspacing="0" border="0"
> summary="" class="x3w">
> <tbody>
> <tr>
> <td class="x43">
> <img border="0" align="absmiddle"
> style="padding-right: 5px; float: left;"
> src="file:///C:/AxxBrowser/document.png">
> <a id="tabberForm:tabber:0:tab"
> name="tabberForm:tabber:0:tab" href="#"
>
> onclick="document.forms['tabberForm'].submit();return false;">xxx</a>
> </td>
> </tr>
> <tr>
> <td class="x48"><div class="x49"></div></td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <table cellpadding="0" cellspacing="0" border="0"
> summary="" class="x3w">
> <tbody>
> <tr>
> <td class="x45"></td>
> </tr>
> <tr>
> <td class="x4a"><div class="x4b"></div></td>
> </tr>
> </tbody>
> </table>
> </td>
>
> </tr>
> </tbody>
> </table>
> </div>
> </form>
> </td></tr></table>
> </body>
> </html>
>
> -- Renzo
>
> >>
> >> Renzo Tomaselli wrote:
> >>> Hi, I'm experiencing a wrong rendering of the tab bar on Firefox
> >>> 2.0. On IE it seems ok.
> >>> I'm using a MenuModel-driven navigationPane. I noticed that tabs are
> >>> rendered by means of an icon puzzle, surrounding tab label text.
> >>> All icons are provided by skin selectors as background. I did not
> >>> modify any selector.
> >>> The problem is that - after any tab clicking - such icons are not
> >>> shown.
> >>> Any further action - such as right-button click on text, or page
> >>> refresh, displays all icons properly, till next tab selection.
> >>> Since full page refreshing renders everything ok, I suspect that PPR
> >>> is involved somehow.
> >>> Trinidad navigationPane examples run fine, but none of them uses the
> >>> MenuModel. They use direct children.
> >>> Had anybody else similar issues ?
> >>> Thanks -- Renzo
> >>>
> >>>
> >>>
> >>
> >>
> >
> >
>
Re: [Trinidad] wrong rendering of NavigationPane tabs on Firefox
2.0
Posted by Renzo Tomaselli <re...@tecnotp.it>.
After a long stripping session, I came up with a simple html page,
derived from a rendered NavigationPanel tab.
After placing this page on the local filesystem together with a stripped
css, Common11-m7.js and all involved icons (tab3-*), Firefox 2.0
displays this page completely only the first time or after any reloading.
It does not complete the page after clicking on the link. No console
errors, though.
It seems pausing in the middle. Rendering completes if clicking either
buttons. Even activating plugins such as CSSviewer or Firebug completes
the page.
Please notice that I removed all inline script function calls, so that
no Trinidad js functions should be called. However, if I remove the
script loading, page shows up ok. If I remove the outermost table, it's
ok. If I place all those files on a remote server then I browse that
page from here, it's ok.
If I remove the onclick attribute from the link, it's ok (it's just
submitting the enclosing form, the original page invoked another function).
Now the funny point: look at those initial table/tbody elements having
"display: inline;". If I remove *both* attributes, rendering is ok !
Don't ask me why.
Now I can easily patch NavigationPaneRenderer again (third time in a
week) to remove those attributes, but does anybody know about any
potential side effects ?
Besides this page, I will check the real application ASAP through a
patched NavigationPaneRenderer.
In any case, here are all data (js and icons are from Trinidad):
- Stripped css (gecko, from Trinidad-generated css) is:
BODY {BACKGROUND-COLOR:#D9E1E8; BORDER-RIGHT:medium none;
PADDING-RIGHT:0px; BACKGROUND-POSITION:left top; BORDER-TOP:medium none;
PADDING-LEFT:0px; FONT-WEIGHT:normal; FONT-SIZE:8pt; PADDING-BOTTOM:0px
;MARGIN:0px; BORDER-LEFT:medium none; COLOR:black; PADDING-TOP:0px;
BORDER-BOTTOM:medium none; FONT-FAMILY:Verdana, Arial; TEXT-DECORATION:none}
.x3v {height:26px;overflow:hidden;width:100%}
.x3z,.x40 {height:22px;width:26px;background-position:top right}
.x46,.x48,.x4a {height:4px;background-repeat:repeat-x}
.x47 {height:4px;width:17px;background-repeat:no-repeat}
.x3w {cursor:pointer}
.x43
{height:22px;font-family:Arial,Helvetica,Geneva,sans-serif;font-size:10pt;font-weight:normal;padding-left:3px;color:#000000;white-space:nowrap}
.x49 {height:4px}
.x45 {height:22px;width:15px}
.x4b {height:4px;width:100%;background-repeat:no-repeat}
.x47 {height:4px;width:17px;background-repeat:no-repeat}
.x49 {height:4px}
.x3w .x3z
{background-image:url('file:///C:/AxxBrowser/tab3-start-selected.gif')}
.x3w .x40
{background-image:url('file:///C:/AxxBrowser/tab3-start-join-selected.gif')}
.x3w .x46,.x3w .x48,.x3w .x4a
{background-image:url('file:///C:/AxxBrowser/tab3-bot-mid-selected.gif')}
.x3w .x47
{background-image:url('file:///C:/AxxBrowser/tab3-bot-start-selected.gif')}
.x3w .x43
{background-image:url('file:///C:/AxxBrowser/tab3-mid-selected.gif');font-weight:bold;color:#585955}
.x3w .x45
{background-image:url('file:///C:/AxxBrowser/tab3-end-selected.gif')}
.x3w .x4b
{background-image:url('file:///C:/AxxBrowser/tab3-bot-end-selected.gif')}
- and the faulty page (dummy.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html dir="ltr" lang="en">
<head>
<link rel="stylesheet" charset="UTF-8" type="text/css"
href="file:///C:/AxxBrowser/gecko.css">
<script src="file:///C:/AxxBrowser/Common11-m7.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" summary=""><tr><td>
<form id="tabberForm" name="tabberForm" method="POST"
action="file:///C:/AxxBrowser/dummy.htm">
<div class="x3v" id="tabberForm:tabber">
<table cellpadding="0" cellspacing="0" border="0" summary=""
style="display: inline;" class=""> <!-- this -->
<tbody style="display: inline;"> <!--- and this -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"
summary="" class="x3w">
<tbody>
<tr>
<td class="x3z"></td>
</tr>
<tr>
<td class="x46"><div class="x47"></div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0"
summary="" class="x3w">
<tbody>
<tr>
<td class="x43">
<img border="0" align="absmiddle"
style="padding-right: 5px; float: left;"
src="file:///C:/AxxBrowser/document.png">
<a id="tabberForm:tabber:0:tab"
name="tabberForm:tabber:0:tab" href="#"
onclick="document.forms['tabberForm'].submit();return false;">xxx</a>
</td>
</tr>
<tr>
<td class="x48"><div class="x49"></div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0"
summary="" class="x3w">
<tbody>
<tr>
<td class="x45"></td>
</tr>
<tr>
<td class="x4a"><div class="x4b"></div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</td></tr></table>
</body>
</html>
-- Renzo
>>
>> Renzo Tomaselli wrote:
>>> Hi, I'm experiencing a wrong rendering of the tab bar on Firefox
>>> 2.0. On IE it seems ok.
>>> I'm using a MenuModel-driven navigationPane. I noticed that tabs are
>>> rendered by means of an icon puzzle, surrounding tab label text.
>>> All icons are provided by skin selectors as background. I did not
>>> modify any selector.
>>> The problem is that - after any tab clicking - such icons are not
>>> shown.
>>> Any further action - such as right-button click on text, or page
>>> refresh, displays all icons properly, till next tab selection.
>>> Since full page refreshing renders everything ok, I suspect that PPR
>>> is involved somehow.
>>> Trinidad navigationPane examples run fine, but none of them uses the
>>> MenuModel. They use direct children.
>>> Had anybody else similar issues ?
>>> Thanks -- Renzo
>>>
>>>
>>>
>>
>>
>
>
Re: [Trinidad] wrong rendering of NavigationPane tabs on Firefox
2.0
Posted by Renzo Tomaselli <re...@tecnotp.it>.
A simple testcase to reproduce this problem:
the facelet component (tabber):
<ui:composition>
<h:form id="tabberForm">
<t:saveState id="tabs" value="#{bean.tabs}"/>
<tr:navigationPane id="tabber" hint="tabs"
value="#{bean.tabData}" var="tab">
<f:facet name="nodeStamp">
<tr:commandNavigationItem text="#{tab.label}"
actionListener="#{bean.navigation}"
id="tab" selected="#{tab.selected}"
icon="#{tab.icon}"/>
</f:facet>
</tr:navigationPane>
</h:form>
</ui:composition>
the including tr:document:
<tr:panelGroupLayout layout="horizontal">
<cx:tabber bean="#{tabBean}"/>
</tr:panelGroupLayout>
Beans are trivial.
Rendering on Firefox is ok if we remove panelGroupLayout above. Or if we
remove the icon attribute from the nodeStamp. I guess I should debug the
included Common11-m7.js, but I have ho idea where to start from. Nor I
can figure out why rendering completes by right-clicking (like it was
"suspended" while loading).
-- Renzo
Renzo Tomaselli wrote:
> Just in case anybody else is interested :) I investigated further on
> this issue. If the used MenuModel is not empty, then rendering is
> quite ok. However I cannot use the emptyness of the tab list as a
> criterion for rendering the panel: if a page has an empty model on a
> request and then renders with a tab (because of an event processing),
> then rendering is not complete.
> Missing icons are: tab3-start-selected, tab3-start-selected,
> tab3-bot-mid-selected, tab3-end-selected, tab3-bot-end-selected, all
> concerning the af|navigationPaneTabs:: selector group. Text background
> (done through tab3-mid-selected icon) is ok.
> I could debug further, but I cannot even figure out why a simple
> *right* click on tab labels forces rendering completion. This might be
> a starting point to debug.
> Does anybody have an idea about where to look at ?
> -- Renzo
>
> Renzo Tomaselli wrote:
>> Hi, I'm experiencing a wrong rendering of the tab bar on Firefox 2.0.
>> On IE it seems ok.
>> I'm using a MenuModel-driven navigationPane. I noticed that tabs are
>> rendered by means of an icon puzzle, surrounding tab label text.
>> All icons are provided by skin selectors as background. I did not
>> modify any selector.
>> The problem is that - after any tab clicking - such icons are not shown.
>> Any further action - such as right-button click on text, or page
>> refresh, displays all icons properly, till next tab selection.
>> Since full page refreshing renders everything ok, I suspect that PPR
>> is involved somehow.
>> Trinidad navigationPane examples run fine, but none of them uses the
>> MenuModel. They use direct children.
>> Had anybody else similar issues ?
>> Thanks -- Renzo
>>
>>
>>
>
>
Re: [Trinidad] wrong rendering of NavigationPane tabs on Firefox
2.0
Posted by Renzo Tomaselli <re...@tecnotp.it>.
Just in case anybody else is interested :) I investigated further on
this issue. If the used MenuModel is not empty, then rendering is quite
ok. However I cannot use the emptyness of the tab list as a criterion
for rendering the panel: if a page has an empty model on a request and
then renders with a tab (because of an event processing), then rendering
is not complete.
Missing icons are: tab3-start-selected, tab3-start-selected,
tab3-bot-mid-selected, tab3-end-selected, tab3-bot-end-selected, all
concerning the af|navigationPaneTabs:: selector group. Text background
(done through tab3-mid-selected icon) is ok.
I could debug further, but I cannot even figure out why a simple *right*
click on tab labels forces rendering completion. This might be a
starting point to debug.
Does anybody have an idea about where to look at ?
-- Renzo
Renzo Tomaselli wrote:
> Hi, I'm experiencing a wrong rendering of the tab bar on Firefox 2.0.
> On IE it seems ok.
> I'm using a MenuModel-driven navigationPane. I noticed that tabs are
> rendered by means of an icon puzzle, surrounding tab label text.
> All icons are provided by skin selectors as background. I did not
> modify any selector.
> The problem is that - after any tab clicking - such icons are not shown.
> Any further action - such as right-button click on text, or page
> refresh, displays all icons properly, till next tab selection.
> Since full page refreshing renders everything ok, I suspect that PPR
> is involved somehow.
> Trinidad navigationPane examples run fine, but none of them uses the
> MenuModel. They use direct children.
> Had anybody else similar issues ?
> Thanks -- Renzo
>
>
>