I have a visualforce page where i need to display 4 columns. Each column has a label along with outputfield. In one of the column, (second column in the attached pic), the labels are too long and spill onto next line. Is there a way i can move the whole stuff inside the second column to right, so that labels will fill in a single space.
In second column, "Contact Time Zone" is a single label, and i want it to be in one line.
Here's the code. I have eliminated everything except second column
<!-- Component for Contact Details.-->
<c:SC_TopPanelComponent compId="contactInfo">
<! ----- first column stuff >
</c:SC_TopPanelComponent>
<!-- Component for Contact Details -->
<c:SC_TopPanelComponent compId="contactDetail">
<c:SC_FieldValue fieldLabel="{!$Label.SC_Region}" onHover="true" fieldValue="{!Case.Support_required_region__c}" fieldId="Region" />
<c:SC_FieldValue fieldLabel="{!$Label.SC_TimeZone}" onHover="true" fieldValue="{!Case.Support_available_timezone__c}" fieldId="TimeZone" />
<c:SC_FieldValue fieldLabel="{!$Label.SC_AvailableDays}" onHover="true" fieldValue="{!Case.Support_Available_Days__c}" fieldId="AvailableDays" />
<c:SC_FieldValue fieldLabel="{!$Label.SC_TimeRange}" onHover="true" fieldValue="{!Case.Support_available_time_from__c}" fieldId="FromTime" />
</c:SC_TopPanelComponent>
<!-- Component for Case Details -->
<c:SC_TopPanelComponent compId="contactDetails">
<! ----- third column stuff
</c:SC_TopPanelComponent>
<!-- Component for Case Details -->
<c:SC_TopPanelComponent compId="caseDetails">
<!------- fourth column detail ---- >
</c:SC_TopPanelComponent>
<script type="text/javascript" language="javascript">
//<![CDATA[
<apex:outputPanel layout="none" rendered="{!notificationFields.size != 0}">
var currCase = new Object();
var caseFields = new Object();
<apex:repeat value="{!notificationFields}" var="field">
caseFields['{!field}'] = '{!field}';
currCase['{!field}'] = '{!JSENCODE(case[field])}';
</apex:repeat>
$('#sc_notify').children(':first').button({
icons: {
primary: "ui-icon-flag"
}
});
var pushTopicName = 'SCC_Case';
subs[pushTopicName] = {
subName: pushTopicName,
interval: 'short',
isAgentPanelFunction: false,
action: function() {
sc_invokeRemoteAction(SC_RemoteActionUtils.getCase, '{!JSENCODE(case.Id)}', function(result) {
var hasChangedValue = false;
for(var i in caseFields) {
if(currCase[i] == '' && result[i] == undefined) continue;
if(result[i] != currCase[i]) {
hasChangedValue = true;
currCase[i] = result[i];
var replacementText = result[i] == '' || result[i] == null ? '{!$Label.SC_none_provided}' : result[i];
$("[id$='" + i + "']").effect("highlight", {}, {!highlightTime}).children(":last").attr('title', replacementText).text(replacementText);
}
}
if(hasChangedValue) {
$('#sc_notify_text').text(result.LastModifiedById == '{!$User.Id}' ? 'saving update' : 'modified by ' + result.LastModifiedBy.Name);
$('#sc_notify').slideToggle('slow', function() {
$(this).delay(800).slideToggle('slow');
});
}
}, { escape: false} );
}
};
</apex:outputPanel>
// ]]>
</script>
</apex:define>
</apex:composition>
Best Answer
Difficult to say without knowing the structure of your components you are using but you can try:
Add the css
to the appropriate element