now i am creating a visualforce page and in VF page, i am passing map list and display using apex repeat. now i am facing problem when i want to get border in table.
VF Page:-
<apex:page controller="ContactGoalControllerTest" showheader="true">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"></link>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<script>
function Cancel()
{
//$("#opppopup").close();
$(".ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable").dialog('close');
//j$modalDialog.dialog('close');
}
function reload()
{
location.reload();
}
function msgSave()
{
alert('Record saved successfully!!!!');
}
</script>
<apex:form >
<apex:pageMessages escape="false"> </apex:pageMessages>
<apex:pageBlock mode="edit" id="block">
<apex:outputPanel id="detailPanel" >
<apex:outputLabel style="font-family: sans-serif;font-size: 15px;" >
Contact Name :
</apex:outputLabel>
<apex:outputText value="{!clientDetails[0].First_Name__c}" style="font-family: sans-serif;font-size: 15px;" >
</apex:outputText>
<br/><br/>
<apex:outputLabel style="font-family: sans-serif;font-size: 15px;">
Email Id :
</apex:outputLabel>
<apex:outputText value="{!clientDetails[0].Email__c}" style="font-family: sans-serif;font-size: 15px;">
</apex:outputText>
<br/><br/>
</apex:outputPanel>
<apex:pageBlockSection columns="1" title="Dream Map Details">
<apex:pageBlockTable value="{!dreamMapDetails }" var="objDreamMap">
<apex:column headerValue="DreamMap No " >
<apex:commandLink action="{!goalsobjectivesDetailsList}" rerender="goalDetailsId" status="status">
{!objDreamMap['Name']}
<apex:param name="dreamMapDetails" value="{!objDreamMap.Id}" id="dreamMapId" />
<apex:param name="dreamMapDetailsName" value="{!objDreamMap['Name']}" id="dreamMapName" />
</apex:commandLink>
</apex:column>
<apex:column value="{!objDreamMap['Contact_Name__c']}"/>
<apex:column value="{!objDreamMap['Email__c']}"/>
<apex:column value="{!objDreamMap['Agency_Name__c']}"/>
</apex:pageBlockTable>
<apex:commandButton value="Add Dream Map" action="{!addDreamMap}" id="addDreamMapPage"/>
</apex:pageBlockSection>
<apex:outputpanel >
<apex:actionstatus id="status">
<apex:facet name="start">
<div class="waitingSearchDiv" id="el_loading" style="height:10%;opacity:0.65;width:100%;">
<div class="waitingHolder" style="top:220px; width: 81px;">
<img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
<span class="waitingDescription">Please Wait...</span>
</div>
</div>
</apex:facet>
</apex:actionstatus>
</apex:outputpanel>
<apex:outputPanel id="goalDetailsId">
<apex:pageBlockSection columns="1" title="Goal Details" rendered="{!showBtn}">
<h4>{!strDreamMapName}</h4>
<!--<apex:outputpanel >
<tr>
<th><br/> <apex:outputLabel value="Status"></apex:outputLabel> </th>
<th><br/><apex:selectList value="{!operatorsymbol}" multiselect="false" size="1">
<apex:selectOptions value="{!items}"/>
</apex:selectList><p/></th>
<th><br/><apex:selectList value="{!statusSelectedValue}" multiselect="false" size="1" onchange="filterGoalData()" >
<apex:selectOptions value="{!itemsStatus}"/>
<apex:actionFunction action="{!goalDetailsList}" name="filterGoalData" reRender="pbTable"/>
</apex:selectList><p/></th>
</tr>
</apex:outputpanel>-->
<apex:outputpanel id="pbTable">
<table >
<apex:repeat value="{!mainList }" var="goalDetails">
<tr style="font-size:12px; font-weight:bold;">
<td> Goal Name </td>
<td> Goal Type</td>
</tr>
<tr>
<td width="20%">
{!goalDetails.goalName}
</td>
<td width="20%">
{!goalDetails.goalType}
</td>
</tr>
<tr>
<apex:repeat value="{!goalDetails.objList}" var="objDetails">
<table border="1">
<tr border="1" style="font-size:12px; font-weight:bold;">
<td> Objectives </td>
<td> Service Needed</td>
<td> Start Date </td>
<td> Target Date </td>
<td> Potential Barrier </td>
<td> Potential Strength </td>
<td> Action </td>
</tr>
<td width="20%">
{!objDetails.Describe_Objectives__c}
</td>
<td width="20%">
{!objDetails.Service_Needed__c}
</td>
<td width="20%">
{!objDetails.Start_Date__c}
</td>
<td width="20%">
{!objDetails.Target_Date__c}
</td>
<td width="20%">
{!objDetails.Potential_Barrier__c}
</td>
<td width="20%">
{!objDetails.Potential_Strength__c}
</td>
</tr>
</table>
</apex:repeat>
</tr>
</apex:repeat>
</table>
</apex:outputpanel>
<p>*Note:Click on the objective count to see the details of the Dream Map {!strDreamMapName}.</p>
<apex:commandButton action="{!AddGoal}" value="Add Goal" id="theButton" />
</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
<style type="text/css">
.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: relative;
/* These are the 3 css properties you will need to change so the popup
displays in the center of the screen. First set the width. Then set
margin-left to negative half of what the width is. You can add
the height property for a fixed size pop up if you want.*/
width: 65%;
margin-left: -460px;
top:100px;
}
.popupBackground{
background-color:rgba(0, 0, 0, 0.27);
opacity: 1;
filter: alpha(opacity = 20);
position: fixed;
width: 100%;
height: 500%;
top: 0;
left: 0;
z-index: 9998;
}
</style>
</apex:page>
Kindly help me?
Best Answer
In
<apex:column>
usestyle
attribute:Example:
Alternatively you can use
StyleClass
attribute as well to provide name of css selector.