I have designed an inline vf page with lightning design css. But my apex:datatable is not responsive. If i increase the resolution it is not fit into the page block . Please provide me a solution . Here is my code :

.TableTitle {
font-weight: bold;
color: #CC0000;

<div class = "slds" style="clear:both;overflow:hidden;height:auto;width:125%;" id = "tooltip"> 
 <apex:outputPanel id="idsubcribedContractPanel" rendered="{!IF(showDetail = 4 || showDetail=69,true, false)}">        
    <apex:pageblock >
      <apex:pageMessages ></apex:pageMessages>
        <apex:pageblocksection title="Subscribed">                       
          <apex:dataTable value="{!contracts}" var="w" border="1" style="border-style:hidden;width:auto;" align="center" styleClass="slds-table slds-table--bordered" headerClass="TableTitle">

                <apex:column value="{!w.idContract}" headerValue="{!$Label.Rforce_ContractID}"/>
                <apex:column value="{!w.strType}" headerValue="{!$Label.VFP05_Type}" />
                <apex:column value="{!w.strTechLevel}" headerValue="{!$Label.Rforce_TechnicalLevel}" />
                <apex:column value="{!w.strServiceLevel}" headerValue="{!$Label.Rforce_ServiceLevel}" />
                <apex:column value="{!w.strProductCode}" headerValue="{!$Label.Rforce_ProductCode}" />
                <apex:column value="{!w.strInitKm}" headerValue="{!$Label.Rforce_InitialKM}" />
                <apex:column value="{!w.strMaxSubsKm}" headerValue="{!$Label.Rforce_MileageMaximumSubscript}" />
                <apex:column value="{!w.strSubsDate}" headerValue="{!$Label.Rforce_SubscriptionDate}" />
                <apex:column value="{!w.strInitContractDate}" headerValue="{!$Label.Rforce_InitialdateoftheContract}"/>
                <apex:column value="{!w.strEndContractDate}" headerValue="{!$Label.Rforce_DateofTermination}" />
                <apex:column value="{!w.strStatus}" headerValue="{!$Label.Rforce_StatusofContract}" />
                <apex:column value="{!w.strUpdDate}" headerValue="{!$Label.Rforce_UpdatedDateofContract}" /> 



The apex:pageBlockSection defaults to the 2 columns. So your table just can't stretch to the 100% because the second (empty) column is there.

To avoid the second column you should set the columns attribute to 1:

<apex:pageBlockSection title="Subscribed" columns="1">  

And then set the width of the dataTable to 100%:

<apex:dataTable style="border-style:hidden;width:100%;" ...>
  • Thanks Sergey !! But now i am facing another issue. I put the output panel inside div as mentioned above. now my div is not responsive. – uma451 Mar 24 '16 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.