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 :
<style>
.TableTitle {
font-weight: bold;
color: #CC0000;
}
</style>
<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}" />
</apex:dataTable>
</apex:pageblocksection>
</apex:pageblock>
</apex:outputpanel>
</div>
Best Answer
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 to1
:And then set the width of the
dataTable
to 100%: