Re: TabbedPanel whitspace markup
Hi,
On Tue, Sep 18, 2012 at 2:29 PM, Lemke, Michael SZ/HZA-ZSW
lemke...@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 #FF;
}
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=linkspan 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=tabsa href=# wicket:id=linkspan
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-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com
-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
RE: TabbedPanel whitspace markup
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 #FF;
}
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=linkspan 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=tabsa href=# wicket:id=linkspan
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
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
lemke...@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 #FF;
}
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=linkspan 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=tabsa href=# wicket:id=linkspan
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-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
RE: TabbedPanel whitspace markup
On Tue, Sep 18, 2012 2:10 PM
Martin Grigorov [mailto:mgrigo...@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
lemke...@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 #FF;
}
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=linkspan 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=tabsa href=# wicket:id=linkspan
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-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
