Nested liferay-ui:panel-container - liferay

I am using Liferay 6.1 and need collapsible(!) <liferay-ui:panel-container>s to be nested (at least 2 layers deep).
I tried
<liferay-ui:panel-container extended="true" id="outerPanelContainer">
<liferay-ui:panel collapsible="true" title="outer panel">
outer content
<liferay-ui:panel-container extended="true" id="innerPanelContainer">
<liferay-ui:panel collapsible="true" title="inner panel">
inner content
</liferay-ui:panel>
</liferay-ui:panel-container>
</liferay-ui:panel>
</liferay-ui:panel-container>
but I get 2 "panels" that are not collapsible, as well as the outer panel not looking like a panel.
I'm not sure what I could be doing wrong.
edit: Removing the inner container tag solves part of the problem: The panels are collapsible again, but this also removes the "[+]" and "[-]" icons on them, so the user does not get a visual clue that they're collapsible.

Work for me, or I don't understand what do yout want to achieve, see screenshot:

Related

OpenCMS edit button overlap completely

1: <cms:contentload editable/>
2: <cms:contentload editable/>
there are two of <cms:contentload> in one jsp page.
The problem is, the edit button of first <cms:contentload>, instead of staying at the tag, has been positioned to the second <cms:contentload> tag. and overlay completely.
First, the edit button don't work in tables. Now i think may be will be your html divs. The Edit button is displayed in the first div you find
supose
<div>
[...]
<cms:contentload editable="true">
[...]
<div>
[...]
<cms:contentload editable="true">
[...]
</cms:contentload>
</div>
</cms:contentload>
</div>
also check you css

h:panelGrid with embedded h:graphicImage not displaying correctly

My question regards the display of h:graphicImage within a h:panelGrid
<h:panelGrid border="0" cellspacing="0" cellpadding="0" >
<h:graphicImage height="63" width="270" value="images/NewAOnly.PNG" />
<h:graphicImage height="60" width="270" value="images/NewABottom.PNG" />
</h:panelGrid>
The top .PNG file is 270 x 63 with no border area. The bottom .PNG is 270 x 60 with no border area.
My question is, with border="0", cellspacing="0" and cellpadding="0", why do the two images not sit one on top of the other with no space between them?
This will happen when you use a strict doctype. Long story short, check the article on Mozilla Developer Network: Images, Tables, and Mysterious Gaps. As to the doctype, you can fix this by using a quirks or transitional doctype (as a quick test, remove the DOCTYPE line altogether). This is however not recommended these days.
If you're absolutely positive that the table is the right tool for your concrete functional requirement of displaying images this way and e.g. a div is for some dubious reason absolutely not an option (and you're fully aware of the importance of "Semantic HTML"), then you can fix this by making the images in table cells block level elements.
td img {
display: block;
}
Please note that this problem is completely unrelated to JSF. JSF is in the context of this question merely a HTML code generator.

Is there a way to change behavior of rich:panelMenu collapse/expand?

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky
The above link has a demo which is similar to what we have on our application, but we would like for the collapse/expand behavior to act a little differently.
We have our menu starting completely expanded, but we basically want the user to have complete control over collapsing and expanding the menus. For example if you open the top one in the demo and then open the second one the first one closes. Is there a way to only collapse and expand onclick? This seems like it should be the default behavior.
So basically here is what I have:
<rich:panelMenu>
<a4j:repeat>
<rich:panelMenuGroup>
<a4j:repeat>
<h:link />
</a4j:repeat>
</rich:panelMenuGroup>
</a4j:repeat>
</rich:panelMenu>
I want to be able to open and close each rich:panelMenuGroup without it affecting the rest of the other rich:panelMenuGroup elements.
It's as simple as: <rich:panelMenu expandSingle="false">

Sharepoint calendar web part not working in Chrome Browser

I have a calendar web part in my SharePoint site which works fine in Firefox and IE but does not work in chrome browser.
This is the same situation i am facing.
http://answers.flyppdevportal.com/categories/sharepoint2010/sharepoint2010programming.aspx?ID=9dde800d-7ce0-4069-93d7-2adf2c53d94b
Any suggestions ?
One more thing to add here is that , I have a content Query web part which will rotate the Promotions using JQuery cycle plug in. It is on the same page where I have put the list and library web part with calendar Month view as a default view.
If I remove that CQWP with Promotions everything works fine but if it there it wont work
Any suggestions? I have checked for the Jquery conflicts but could not find any of them .
Thanks
I think that I have find the root cause of my problem
There is one CQWP placed on the same page with this Calendar view list.
This CQWP ha call to jquery cycle plugin which will cycle the content after some interval , due to this JQuery conflicts my calendar control is not working in chrome.
Whem I Remove this CQWP everything works like a charm!!!
1st, try to revert back to the OOB v4.master to see if the problem disappears. If it works as expected, this mean that your masterpage have some issue.
One of the most ridiculous bug in SP is that if you don't have the SiteAction control declared before the ribbon control, some javascript codes will fails.
In one of my custom master page, I have to create a second siteactions control, just before the ribbon control. I've put it into a invisible DIV to completely hide it from the user.
It ends with something like this :
<SharePoint:SPRibbon ID="SPRibbon1" runat="server" PlaceholderElementId="RibbonContainer"
CssFile="">
<SharePoint:SPRibbonPeripheralContent ID="SPRibbonPeripheralContent1" runat="server"
Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">
<!-- Here is the hidden site actions control -->
<div style="display: none">
<SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>"
ID="SiteActionsMenuMain" PrefixHtml="" SuffixHtml="" MenuNotVisibleHtml="&nbsp;">
<CustomTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</div>
<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigation" runat="server" Visible="false">
<SharePoint:PopoutMenu
runat="server"
>
.... Removed for readability ....
</SharePoint:PopoutMenu>
<div class="s4-die">
<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
</SharePoint:SPRibbonPeripheralContent>
<SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight"
CssClass="s4-trc-container s4-notdlg">
.... Removed for readability ....
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>
For your information, this behavior is due to one the inner control of the site action (PublishingConsole if I'm right). This inner control will produces some javascript global variable declaration (language and one another). This global variables are required by the ribbon control to works as expected.

Why is MyFaces/Trinidad rendering my disabled inputTexts as divs?

Deceptively simple question, but I'm at my wits' end here.
I have a document. It contains a form. Which contains a subform. Which contains a read-only text field. Here's the relevant part of the structure:
<tr:document ...>
<tr:form ....>
<tr:subform ...>
<div ...><div ...>
<tr:panelGroupLayout>
<tr:panelFormLayout>
<tr:inputText id="selectedAmount"
label="#{...}"
value="#{...}"
disabled="true" />
</tr:panelFormLayout>
</tr:panelGroupLayout>
</div></div>
</tr:subform>
</tr:form>
</tr:document>
(none of the attributes on the ... are setting style information.)
Why is it that MyFaces produces for the innermost element a div rather than input type="text"? I've seen forms with (apparently) this exact same structure that didn't have this problem.
The reason why this is silly and unacceptable is because the div, when empty, doesn't show as a box but as a single line (the border collapses since there is no content and no height style). Manually setting a height via css isn't acceptable either, because the font may vary from computer to computer. I really just wanted it to always render an input tag.
Any ideas? Feel free to ask for details if you want to confirm any suspicion. There's too many data for me to just dump everything in here.

Resources