Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NehaKSNehaKS 

Date Picker in Popup Issue

Hi,

 

I have a date input field in a popup window. Issue that i am facing is the date picker is not inligned with the text field. Could any one please address this issue

 

Thanks and Regards,

Neha

Pravesh RanaPravesh Rana

Hi,

 

Is the date picker is out side the pop up window or is just not aligned with the text box.

 

Do you have applied an type of css on the pop up page. If yes try adjusting the css.
NehaKSNehaKS

Apex Code:-

 

public class Testdatepickeronpopup
{     
      public string test;
      public String oppitemschedule;     
      public string typep{get;set;}
      public Id chosenId {get; set;}
      
      public Opportunity opp{get;set;}
      public List<OpportunityLineItemSchedule> olis{get;set;}
      public list<schedwrapper> olis1{get;set;}
      public list<opportunitylineitem> o{get;set;}   
      public list<OpportunityLineItemSchedule> olis1cache =new list<OpportunityLineItemSchedule>();  
      
      public Testdatepickeronpopup(ApexPages.StandardController stdController) 
      {
        opp = [SELECT Amount, Id, Name,CloseDate,StageName,Account.Name,Probability, (SELECT Quantity,  PricebookEntry.Name, Description, UnitPrice,ServiceDate,HasSchedule,HasRevenueSchedule FROM OpportunityLineItems order by SortOrder) FROM Opportunity where id =:ApexPages.currentPage().getParameters().get('id')];

             
      }
  
      public PageReference getOpsitem()
      { 
        olis1=new list<schedwrapper>();
        oppitemschedule=ApexPages.currentPage().getParameters().get('oppitems');
        chosenId =chosenId;
        this.olis = [Select OpportunityLineItem.PricebookEntry.Product2.Name, Id, OpportunityLineItemId,ScheduleDate, Revenue, Quantity, Description,type From OpportunityLineItemSchedule Where OpportunityLineItemId = :chosenId ];   
        for(OpportunityLineItemSchedule c1 : olis)
        {
            schedwrapper a1 = new schedwrapper(c1);
            olis1.add(a1);
            typep = c1.type;
        }
        oppitemschedule = '';
        return null;
      }
      

      public string gettype()
      {
        system.debug(typep);
        return ApexPages.currentPage().getParameters().put('A',typep);
      }
      

      
      public list<schedwrapper> getlist()
      {
        return olis1;
      }
      

      public PageReference updates()
      {   
                  
        List<Opportunitylineitemschedule> oppli1=new List<Opportunitylineitemschedule>();   
        for(opportunitylineitemschedule cacheo:olis)
        {            
            olis1cache.add(cacheo);
        }
        update this.olis; 
        
           
        return null;
      }     
      
 
      public PageReference save() 
      {
        if(opp.opportunitylineitems!=null)
        {
        update opp.opportunitylineitems;
        }
        return null;
      }

  
      public PageReference cancel() 
      {
        PageReference opportunityPage = new ApexPages.StandardController(Opp).view();
        opportunityPage.setRedirect(true);
        return opportunityPage;
      }
      

      public PageReference reset()
      {
        PageReference newpage = new PageReference(System.currentPageReference().getURL());    
        newpage.setRedirect(true);
        return newpage;
      }
      
      public class schedwrapper
      { 
        public OpportunityLineItemSchedule c {get; set;}
        public schedwrapper(OpportunityLineItemSchedule schd) 
        {
            c = schd;    
        }
     
      }
 
}

 Visualforce Page Code:-

 

<apex:page standardController="Opportunity" extensions="Testdatepickeronpopup" >
<html>
<head>
<style>

.showme
   {
   position:absolute;
   top: 25%;
   left:49%;
   width: 50%;
   height: 50%;
   display: none;
   overflow: auto;
   visibility:visible;
   border:3px solid #585858;
   background-color:white;
   padding:5px;
   line-height:20px;
   
   }


</style>
<script>

function showpopup(oppid)
   {
    paraFunction(oppid); 
   
   } 
function showpopup1(typep1)
    {    
            
            var popUp = document.getElementById("{!$Component.f.showme1}");
            popUp.style.display = "block";
            popUp.style.visibility = "visible";     
    }

</script>

</head>
<body>
        <apex:form id="f">
            <apex:pageBlock id="results" >
                <apex:pageMessages id="msg"/>
                <apex:pageBlockButtons >
                    <apex:commandbutton action="{!save}" id="savebutton1" value="Save" />
                    
                    <apex:commandbutton action="{!cancel}" id="cancelbutton" value="Cancel" onclick="return confirmCancel();" immediate="true"/> 
                    <script language="JavaScript" type="text/javascript">
                    function confirmCancel()
                    {
                        var isCancel = confirm("Are you sure you wish to cancel?");
                        if (isCancel)
                        {
                            window.top.close();  
                            return true;
                        }
                        return false;
                    }
                    </script>
                    <apex:actionFunction name="paraFunction" action="{!getOpsitem}" rerender="pbtresults1" immediate="true" oncomplete="showpopup1('{!typep}')">       
                        <apex:param id="oppitems" name="oppitems" value="" assignTo="{!chosenId}"/>  
                    </apex:actionFunction>
                </apex:pageBlockButtons>
                               <apex:pageBlocksection id="pbs2">
                    <apex:pageBlock mode="edit" id="pb">
                        <apex:pageBlockTable value="{!opp.OpportunityLineItems}" var="oppitems" align="center" id="main">
                            <apex:column value="{!oppitems.PricebookEntry.Name}" /> 
                            <apex:column headerValue="Line Description">
                                <apex:inputField value="{!oppitems.Description}"/>
                            </apex:column>
                            <apex:column headerValue="Date" >
                            <c:noDateLink >
                                <apex:inputField value="{!oppitems.ServiceDate}"/>
                                </c:noDateLink>
                            </apex:column>
                            <apex:column headerValue="Test" id="ls" >
                                <apex:commandlink value=">>" id="lin" onmouseover="showpopup('{!oppitems.id}');"/>
                              </apex:column>
                        </apex:pageBlockTable>
                    </apex:pageBlock>
                </apex:pageBlockSection>
            </apex:pageBlock>
            <apex:outputPanel layout="block" styleClass="showme" id="showme1">
          
                                <apex:actionregion id="ar"> 
                                    <apex:pageBlock id="results1">
                                        <apex:pageMessages id="msg1"/>
                                            <apex:pageblockTable align="middle" value="{!olis1}" var="olis2" id="pbtresults1"> 
                                            <apex:column headerValue="Product" value="{!olis2.c.OpportunityLineItem.PricebookEntry.Product2.Name}"/>
                                            
                                            <apex:column headerValue="Date" > 
                                            
                                                <apex:inputField value="{!olis2.c.ScheduleDate}"/>
                                            
                                            </apex:column>
                                            
                                            <apex:column headerValue="Comments"> 
                                                <apex:inputField value="{!olis2.c.Description}"/ >
                                            </apex:column>
                                        </apex:pageblockTable>             
                                       
                                     </apex:pageBlock>
                                </apex:actionregion>
                             
            </apex:outputPanel>
        </apex:form>
        
</body>
</html>
</apex:page>

 This is the code for popup. The Problem that i am facing is if i have more rows in popup window then the datepicker openup below the popup and not with the date input field. The datepicker position is fixed on page and not on popup. So facing this issue
NehaKSNehaKS

Have tried setting  z-index property as well but didnt worked out. Any suggestions on this are welcomed
Pravesh RanaPravesh Rana

Ok,

 

if the given code is of POP up window that try removing ..

 

.showme

{

 

position:absolute;

 

"ABSOLUTE" and use relative.. it might be that "ABSOLUTE" is not allowing the datepicker any sapce so it have to move to the bottom. Some thing like this might be the cause....
NehaKSNehaKS

If i give as 'relative' It opens the popup below the pageblock . I want it to open at a fixed position beside the pageblock.
Pravesh RanaPravesh Rana

Ok,

 

but just for checking reason...  try relative and see did date picker came where you want or not.
NehaKSNehaKS

Yes daetpicker is coming corrctly below the date input field if i give as relative. but i want the popup to be at a constant place
Pravesh RanaPravesh Rana

Ok,

now try putting "height" and "width" value where you want your pop up screen using ---"realtive" and percentage values for width and height this way pop up will always be at a particular position no matter the screen.
NehaKSNehaKS

Still didntt worked :(

 
NehaKSNehaKS

Tried using

.datePicker
   {
   
   position:fixed;
  
   }

 

It is still not opening aligned to the text box. Also tried position:absolute and relative as well. Nothing has achieved my requirement. If any one could please suggest some workaround for this it would be great.
ameghamegh

by using  position:fixed its aligned to inputfield.but popup window overlap the datepicker.so datepicker is not displayed clearly.Any idea how to focus that datepicker?
WernerberWernerber

Yes, that worked perfect for me.

Thanks
zoranszorans
My experience with this was that I had two divs overlapping each other (pop up hidden(div 1 - z-index:999;) with darker background behind(div 2 z-index:998;)) so when putting just date picker with position but without "z-index" it was overlapped. After putting "z-index" parameter in .datePicker with the largest number it worked, and as of position fixed and absolute are working both.

.datePicker{
        position:absolute;  
        z-index:1000;
}

Cheers.
Abhishek Verma 34Abhishek Verma 34
I am also facing the same problem wherein I have a date field on a pop up and i dont want to use position:relative as while scrolling down I want to see the popup but for that the date picker remains at the top of the page while scrolling down. in case of using position:fixed.
Abhishek Verma 34Abhishek Verma 34
I have got the answer..

Add the following code:
.datePicker{
        position: fixed;
        z-index:10001;
        width: 420px;
        height:auto;}

no need for using styleclass=datePicker as datePicker is by default the styleclass for the date field and its done