You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by "Lemke, Michael SZ/HZA-ZSW" <le...@schaeffler.com> on 2012/09/18 13:29:02 UTC
TabbedPanel whitspace markup
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-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: TabbedPanel whitspace markup
Posted by "Lemke, Michael SZ/HZA-ZSW" <le...@schaeffler.com>.
On Tue, Sep 18, 2012 2:10 PM
Martin Grigorov [mailto:mgrigorov@apache.org] wrote:
>To: users@wicket.apache.org
>Subject: Re: TabbedPanel whitspace markup
>
>Create a ticket and attach the screenshots.
>I'm not much in CSS and I cannot imagine how this whitespace breaks
>the layout. But I don't see a problem to remove them too.
Thanks Martin. Created
https://issues.apache.org/jira/browse/WICKET-4768
>
>On Tue, Sep 18, 2012 at 3:07 PM, Lemke, Michael SZ/HZA-ZSW
><le...@schaeffler.com> wrote:
>> On Tue, Sep 18, 2012 1:51 PM
>> Martin Grigorov wrote:
>>>On Tue, Sep 18, 2012 at 2:29 PM, Lemke, Michael SZ/HZA-ZSW wrote:
>>>> 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?
>>>
>>>You can create MyTabbedPanel that extends TabbedPanel and provides
>>>MyTabbedPanel.html.
>>>The only code in .java that is needed to add is the constructor(s) you use.
>>>
>>
>> Thanks, I just did this. Works fine. But is there a chance
>> it gets fixed in Wicket? Or isn't this considered a problem?
>>
>> Michael
>
>
>
>--
>Martin Grigorov
>jWeekend
>Training, Consulting, Development
>http://jWeekend.com
>
>---------------------------------------------------------------------
>To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: TabbedPanel whitspace markup
Posted by Martin Grigorov <mg...@apache.org>.
Create a ticket and attach the screenshots.
I'm not much in CSS and I cannot imagine how this whitespace breaks
the layout. But I don't see a problem to remove them too.
On Tue, Sep 18, 2012 at 3:07 PM, Lemke, Michael SZ/HZA-ZSW
<le...@schaeffler.com> wrote:
> On Tue, Sep 18, 2012 1:51 PM
> Martin Grigorov wrote:
>>On Tue, Sep 18, 2012 at 2:29 PM, Lemke, Michael SZ/HZA-ZSW wrote:
>>> 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?
>>
>>You can create MyTabbedPanel that extends TabbedPanel and provides
>>MyTabbedPanel.html.
>>The only code in .java that is needed to add is the constructor(s) you use.
>>
>
> Thanks, I just did this. Works fine. But is there a chance
> it gets fixed in Wicket? Or isn't this considered a problem?
>
> Michael
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: TabbedPanel whitspace markup
Posted by "Lemke, Michael SZ/HZA-ZSW" <le...@schaeffler.com>.
On Tue, Sep 18, 2012 1:51 PM
Martin Grigorov wrote:
>On Tue, Sep 18, 2012 at 2:29 PM, Lemke, Michael SZ/HZA-ZSW wrote:
>> 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?
>
>You can create MyTabbedPanel that extends TabbedPanel and provides
>MyTabbedPanel.html.
>The only code in .java that is needed to add is the constructor(s) you use.
>
Thanks, I just did this. Works fine. But is there a chance
it gets fixed in Wicket? Or isn't this considered a problem?
Michael
Re: TabbedPanel whitspace markup
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
On Tue, Sep 18, 2012 at 2:29 PM, Lemke, Michael SZ/HZA-ZSW
<le...@schaeffler.com> wrote:
> 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?
You can create MyTabbedPanel that extends TabbedPanel and provides
MyTabbedPanel.html.
The only code in .java that is needed to add is the constructor(s) you use.
>
> Thanks for any insight,
> Michael
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org