0

enter image description hereI have a requirement where clicking on a an icon brings up a popup with chatter feed for a particular Entity Id like the image below. I was able to do this but clicking on like or Post or Files doesn`t work 

<chatter:feed showPublisher="true" entityId="{!taskId}"/>

CSS

.custPopup {
    background-color: #ffffff;
    border-width: 2px;
    border-radius: 10px;
    z-index: 9999;
    left: 45%;
    padding: 10px;
    position: absolute;
    width: 650px;
    margin-left: -250px;
    top: 50px;
}
.popupBackground {
    background-color: black;
    opacity: 0.20;
    filter: alpha(opacity 20);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

My Vf Page

i will post the code if required

Improve this question
8
  • What do you mean by doesn't work? What's the behavior?
    – Martin Lezer
    Commented Jan 25, 2017 at 16:36
  • clicking on the post or file does nothing...! like wen u click on Post u get a small dropdown to enter a text and click on post...that doesnt come up.! Not only for Post ...any icon on this popup acts like a static image..!
    – RAJ KIRAN
    Commented Jan 25, 2017 at 16:37
  • Just to add...... this chatter component works normally wen i tried to display on parent window
    – RAJ KIRAN
    Commented Jan 25, 2017 at 16:41
  • What are you using to display this popup?
    – Martin Lezer
    Commented Jan 25, 2017 at 16:46
  • Just a css styling .custPopup { background-color: #ffffff; border-width: 2px; border-radius: 10px; z-index: 9999; left: 45%; padding: 10px; position: absolute; width: 650px; margin-left: -250px; top: 50px; } .popupBackground { background-color: black; opacity: 0.20; filter: alpha(opacity = 20); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
    – RAJ KIRAN
    Commented Jan 25, 2017 at 16:48

2 Answers 2

Reset to default
1

hey guys got it to be working using that chatter component in different page and embedding in an iframe

    <apex:outputPanel title="Chatter" layout="block" rendered="{!showWhat=='showChatter'}" style="z-index:4">
       <script src="https://ap2.salesforce.com/jslibrary/1481555358000/sfdc/Chatter.js"/>
        <apex:iframe id="chatter-iframe" src="/apex/ChatterPage?chatterTaskId={!taskId}" width="100%" height="400px" scrolling="true" />

       <apex:form >
           <center><apex:commandButton action="{!closePopup}" status="actStatus" reRender="tstpopup" value="close"/></center>
       </apex:form>
    </apex:outputPanel>

Chatter Page:

<apex:page Controller="ProjectHomePageController" showHeader="false">


    <chatter:feedWithFollowers showHeader="true" entityId="{!chatterTaskId}"/>


</apex:page>

Controller:

public ProjectHomePageController() {
        chatterTaskId=ApexPages.currentPage().getParameters().get('chatterTaskId');
    }
Improve this answer
2
  • Sorry I couldn't help. But I'm glad you managed to do it !
    – Martin Lezer
    Commented Jan 26, 2017 at 7:49
  • no problem @Martin. Im thankful to u fr spending time on my questionss. Im sure ul help many others like me when they have this requirement:)
    – RAJ KIRAN
    Commented Jan 26, 2017 at 13:16
0

The problem here must be coming from the z-index value of your popup set to 9999.

All the elements inside your container probably have a z-index inferior to 9999.

Just try to set the z-index to your popup to 1.

Improve this answer
3
  • I tried that too ....No Luck....! :(
    – RAJ KIRAN
    Commented Jan 25, 2017 at 16:55
  • Did you try to add z-index: 2; to the children inside the popup?
    – Martin Lezer
    Commented Jan 25, 2017 at 17:17
  • Yup .....after that ....on hover on like n comment showed me their titles it means css works bt js for chatter doesnt seem to work...!
    – RAJ KIRAN
    Commented Jan 25, 2017 at 20:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .