I've encountered a layout problem with TabbedPanels.  In the 
generated markup there is whitespace between the LI items and 
the anchor that switches tabs.  This causes a layout problem for me
with this style sheet (simplified to show the issue, not tested):

.selected a {
    background: url("../i/bg_tab_lw_content_active.gif") repeat-x scroll center 
top #E8EEF1;
    border-right: 1px solid #CDD3D6;
}

a {
    background: none repeat scroll 0 0 transparent;
    border-right: 1px solid #FFFFFF;
}

li {
    display: inline;
    margin: 0;
    list-style: none outside none
}

The idea is to have a white border between the tabs which
disappears for the selected tab.  Kind of hard to explain
without screenshots.  Currently with Wicket there is always
a small margin left or right of the white border of the A
element.  It is caused by whitespace in the markup.

li { float:left; } would remove the undesired whitespace
but would break the rest of our layout.


Anyway, the root cause is the markup in TabbedPanel.html of
Wicket.

Current (1.5.8 and 6.0.0):

<wicket:panel xmlns:wicket="http://wicket.apache.org";>
<div wicket:id="tabs-container" class="tab-row">
<ul>
        <li wicket:id="tabs">
                <a href="#" wicket:id="link"><span wicket:id="title">[[tab 
title]]</span></a>
        </li>
</ul>
</div>
<div wicket:id="panel" class="tab-panel"><!-- no panel --></div>
</wicket:panel>


Should be changed in e.g.

<wicket:panel xmlns:wicket="http://wicket.apache.org";>
<div wicket:id="tabs-container" class="tab-row">
<ul>
<li wicket:id="tabs"><a href="#" wicket:id="link"><span wicket:id="title">[[tab 
title]]</span></a></li>
</ul>
</div>
<div wicket:id="panel" class="tab-panel"><!-- no panel --></div>
</wicket:panel>


Is there a Wicket way to work around this?

Thanks for any insight,
Michael


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Reply via email to