+ Start a Discussion
kdaviskdavis 

Table Columns expanding out of Page Block in VF Component

Hi,

 

I have an odd request by a client where they would like the text in the last column in their VF component to stay in the same line and not wrap, and just be able to scroll left. That's fine the problem I am encountering is that I am using a pageblock and when the text grows too high in characters the pageblock wont stretch with the table and its columns, and it looks very clunky. I have all widths set to 100% including the component in the detail page. Any idea how I can get the pageblock to stretch to the full width of the page with the table? VF below:

 

<apex:PageBlock title="Search Assets">
        
        <div id="searchContainer" style="width:100%;height:50px;">            
            <span id="serialSpan" >Serial #:</span>&nbsp;&nbsp;
            <apex:inputText id="serialIn" value="{!serialId}" ondblclick="clearText(this)" style="width:100px;"/>&nbsp;&nbsp;
            <apex:CommandButton value="Search" action="{!searchAssets}" onClick="resetSerialCount()"/>&nbsp;&nbsp;&nbsp;
        
            <span id="regSpan" stringLic="{!licString}">Registration #:</span>&nbsp;&nbsp;
            <apex:inputText id="extIn" value="{!externalRef}" ondblclick="clearText(this)" style="width:100px;"/>&nbsp;&nbsp;
            <apex:CommandButton value="Search" action="{!searchByRefId}" onClick="resetExtCount()"/><br/><br/>  
        </div>
                   
        
        <div id="pageBlockContainer" style="width:100%;height:100%;">
            <apex:pageMessages />
            
            <apex:pageBlockTable value="{!entitlements}" var="e" columns="7" Width="100%" rendered="{!renderEntitlements}">
                <apex:column id="Select" headerValue="Select">
                    <input type="checkbox" onclick="selectAsset(this)" name="{!e.Asset.Name}" serial="{!e.Asset.Serial_Number__c}" lic="{!e.Asset.External_Reference__c}" aid="{!e.AssetId}" entitle="{!e.Id}" caseId="{!c.Id}" eDate="{!e.EndDate}"/>
                </apex:column>
                <apex:column id="Name" headerValue="Name" value="{!e.AssetId}"/>                                
    
                <apex:column id="Serial" headerValue="Serial" value="{!e.Asset.Serial_Number__c}"/>
                
                <apex:column id="endDate" headerValue="Usage End Date" value="{!e.EndDate}"/>
                
                <apex:column id="extRef" headerValue="Registration" value="{!e.Asset.External_Reference__c}"/>
    
                <apex:column id="Entitle" headerValue="Entitlement" value="{!e.Name}"/>
                
                <apex:column id="sc" headerValue="Service Contract" style="white-space: nowrap;" value="{!e.ServiceContractId}"/>                
    
            </apex:pageBlockTable>
      
        </div>
        <div id="reloadMessage" style="width:100%;height:100%;display:none;margin: 0 auto;">
            <div style="width:50%;height20px;display:inline-block;"><b>Please wait for the parent page to manually refresh...</b></div><br/><br/>
            <div id="spinnerDiv" style="width:100px;margin:auto;">
                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
            </div>   
        </div>                           
        <apex:PageBlockButtons location="bottom">
            <div class="linkBtn" onclick="insertAssets()">Link</div>
        </apex:PageBlockButtons>
    </apex:PageBlock>

 

ericmonteericmonte

You can always set the colum width. Did you try that?

 

<apex:column headerValue="Last Name" width="100%" value="{!part.LastName}"/>