Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
PortletFaces Community Member
ICEfaces Tab Component Not Rendering Properly
September 15, 2011 9:57 AM
Answer

PortletFaces Community Member

Rank: Regular Member

Posts: 201

Join Date: April 2, 2012

Recent Posts

Tabs look like this:



I've been researching this issue and there's a Jira on it at icesoft: Link

The workarounds they suggest there don't seem to make any difference, and I suspect it's got to do with the fact that I'm in a portlet environment. Also, the notes in the Jira insist that this only happens in Chrome and Safari, but in my case I've tried it in Firefox, IE, Chrome, Safari and Opera and they all look exactly the same.

Is it just me?
Neil Griffin
RE: ICEfaces Tab Component Not Rendering Properly
September 19, 2011 9:16 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2336

Join Date: July 26, 2005

Recent Posts

Hi Chris!

Try this in your CSS:

.icePnlTbLblLnk, .LftTop, .MidTop, .RtTop, .LftBtm, .MidBtm, .RtBtm {
line-height: 1px;
}
Deryk Sinotte
RE: ICEfaces Tab Component Not Rendering Properly
September 19, 2011 10:23 AM
Answer

Deryk Sinotte

Rank: New Member

Posts: 18

Join Date: August 7, 2007

Recent Posts

I'm assuming Liferay 6.0.6 and ICEfaces 2.0.2.

The most likely cause is a styling conflict between the stock styling that comes with the tab component and the Liferay theme. If I had to guess, I would say that the default AUI theme provided by Liferay are setting the height and/or line-height style and it's affecting the table or possibly the spacer images that are used to build the tab set. The only thing I can recommend is playing around with the styles/themes and see if you can see where the conflict arises. Then perhaps you can override the Liferay or ICEfaces default CSS settings.
PortletFaces Community Member
RE: ICEfaces Tab Component Not Rendering Properly
September 19, 2011 1:12 PM
Answer

PortletFaces Community Member

Rank: Regular Member

Posts: 201

Join Date: April 2, 2012

Recent Posts

Neil Griffin:
Hi Chris!

Try this in your CSS:

.icePnlTbLblLnk, .LftTop, .MidTop, .RtTop, .LftBtm, .MidBtm, .RtBtm {
line-height: 1px;
}


Hey Neil,

Thanks for the reply... Actually I'd tried that approach before, and no luck. Inspecting the element in Chrome shows that it is indeed setting the style for that at 1px height, but it looks like something else is "prying" that element open wider. As I mouse over the page source to highlight the various visual components on the page, it does seem to correctly render it as a 1px high block, but the rest is still empty space.

Deryk Sinotte:
I'm assuming Liferay 6.0.6 and ICEfaces 2.0.2.

The most likely cause is a styling conflict between the stock styling that comes with the tab component and the Liferay theme. If I had to guess, I would say that the default AUI theme provided by Liferay are setting the height and/or line-height style and it's affecting the table or possibly the spacer images that are used to build the tab set. The only thing I can recommend is playing around with the styles/themes and see if you can see where the conflict arises. Then perhaps you can override the Liferay or ICEfaces default CSS settings.
.

Hey Deryk,

Yep, you assume correctly. Since I've been focusing on the ICEfaces styling on the tab in particular, I think my next step is to look at any other ICEfaces styling that may be involved, and then Liferay styling itself. My concern initially was that it was an issue with the browser, related to the link I provided in my first post, but between you guys' feedback and the fact that it's identical in all the browsers I've tried, I think it must be a styling conflict somewhere.
Neil Griffin
RE: ICEfaces Tab Component Not Rendering Properly
September 19, 2011 1:24 PM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2336

Join Date: July 26, 2005

Recent Posts

One thing to try -- make sure you're loading the CSS for the ICEfaces theme override stuff after the ICEfaces theme:

<link href="#{request.contextPath}/xmlhttp/css/xp/xp-portlet.css" rel="stylesheet" type="text/css" />
<link href="#{request.contextPath}/css/icefaces-theme-override.css" rel="stylesheet" type="text/css" />

This is the approach taken in the Liferay Chat Portlet and it seems to work there. A new ICEfaces tab is created for each new chat room. See: http://www.liferay.com/community/liferay-projects/liferay-faces/demos#icefaces3-chat-portlet
PortletFaces Community Member
RE: ICEfaces Tab Component Not Rendering Properly
September 28, 2011 7:00 AM
Answer

PortletFaces Community Member

Rank: Regular Member

Posts: 201

Join Date: April 2, 2012

Recent Posts

It took some more fiddling with the various elements of the tab css but I got it to where it looks much better. I didn't really get to work on it until this week, since getting the service layer stuff done and a few other features of the portlet were a higher priority.

I do have a question... why isn't it better to load the css files in the liferay-portlet.xml file as opposed to declaring them on the view?
Neil Griffin
RE: ICEfaces Tab Component Not Rendering Properly
September 28, 2011 7:10 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2336

Join Date: July 26, 2005

Recent Posts

Either should work fine. The benefit of putting it in liferay-portlet.xml is that you can specify that the CSS be loaded as part of the <head> section of the portal page. The drawback is that the portlet won't move to other portlet containers like Pluto since it's taking advantage of a vendor-specific Liferay feature.
PortletFaces Community Member
RE: ICEfaces Tab Component Not Rendering Properly
September 28, 2011 10:23 AM
Answer

PortletFaces Community Member

Rank: Regular Member

Posts: 201

Join Date: April 2, 2012

Recent Posts

Makes sense. Thank you.

Incidentally, Here's the .css I'm using at the moment:

 1.icePnlTbLblLnk, .LftTop, .MidTop, .RtTop {
 2    line-height: 0px;
 3}
 4
 5.icePnlTbLblLnk, .LftBtm, .MidBtm, .RtBtm {
 6    line-height: 0px;
 7}
 8
 9.icePnlTbLblLnk, .LftMid, .RtMid, .LftMid {
10    line-height: 15px;
11}


Initially setting the line-height on the Top to 1 left a visible single pixel wide horizontal line, so I set it to 0. Also, the earlier version also caused the actual label cell with the graphic to compress, so I set the middle height to 15px.

There's still a thick (although better) line at the bottom of each tab, so this isn't a complete solution and once I finish this next round of features I've been assigned, I'll be going back to find the root problem.
Attachment

Attachments: tabledatetime.png (9.5k)
PortletFaces Community Member
RE: ICEfaces Tab Component Not Rendering Properly
November 15, 2011 4:59 AM
Answer

PortletFaces Community Member

Rank: Regular Member

Posts: 201

Join Date: April 2, 2012

Recent Posts

This works for me:

 1<!--
 2FIX for broken tab-panel -->.LftTop,.MidTop,.RtTop {
 3    height: 2px;
 4}
 5
 6.LftTop img,.MidTop img,.RtTop img,.LftBtm img,.MidBtm img,.RtBtm img {
 7    display: none;
 8}
 9
10table.icePnlTbSet {
11    width: auto;
12}
13
14table.icePnlTbSet table {
15    width: 100%;
16}
17
18.icePnlTb {
19    border-bottom: 1px solid #ABABAB;
20}
21
22.icePnlTb .icePnlTbOff .MidMid a,.icePnlTb .icePnlTbOn .MidMid a,.icePnlTb .icePnlTbOver .MidMid a
23    {
24    padding-top: 0;
25}
26
27<!--
28FIX for the unstreched background: -->
29.icePnlTbSetCnt {
30    background-size: cover;
31    -moz-background-size: cover;
32}
PortletFaces Community Member
RE: ICEfaces Tab Component Not Rendering Properly
November 29, 2011 8:16 AM
Answer

PortletFaces Community Member

Rank: Regular Member

Posts: 201

Join Date: April 2, 2012

Recent Posts

Gonna give that a try in my next portlet maintenance sprint... emoticon