Apex Code Development You need to sign in to do that
Don't have an account?
Bullet point list in Visualforce
Hi all,
I am trying to create a bullet point list in a table in Visualforce. See below for my current code. I would like bullet points where every time where I have noted ***.
Thanks,
Paul
I am trying to create a bullet point list in a table in Visualforce. See below for my current code. I would like bullet points where every time where I have noted ***.
<table style="float: left" border="0" cellpadding="8" cellspacing="0" width="100%">
<tr >
<td width="50%">
<b><span style="font-size: 11pt;">Take your seat</span></b><br/>
Your space at <apex:outputText value="{!Proposal__c.Building__r.Name}"/> comes with everything you need to get started as soon as you move in - all included in the price:<br/>
<br/>
*** Office furniture package including desk and adjustable office chair.<br/>
<br/>
*** Telephony package including 2,000 minutes per month and a handset.<br/>
<br/>
*** High speed, fully inclusive internet package with optional upgrade to 100mb line.<br/>
<br/>
<b><span style="font-size: 11pt;">Join the <apex:outputText value="{!Proposal__c.Building__r.Name}"/> community</span></b><br/>
When you move into <apex:outputText value="{!Proposal__c.Building__r.Name}"/>, you get more than just workspace. You’ll be able to move into an active community made up of like-minded businesses.<br/>
<br/>
*** Customer Steering Group to give you a say in the running of the building.<br/>
<br/>
*** Community Engagement Manager to build the <apex:outputText value="{!Proposal__c.Building__r.Name}"/> community.<br/>
<br/>
*** Onsite customer service team.<br/>
<br/>
*** Regular programme of business, social and wellbeing events.
</td>
<td width="50%">
<b><span style="font-size: 11pt;">The Bruntwood Way</span></b><br/>
We prefer to think of ourselves as your property partner, not your landlord. When your business succeeds, our can too so that’s why we work hard to provide the best service possible.<br/>
<br/>
*** <b>Peace of mind</b><br/>
We own and manage all of our own buildings so you can be sure there will always be a member of the Bruntwood team on hand to help.<br/>
<br/>
*** <b>Flexibility</b><br/>
As your business grows you can move around the Bruntwood portfolio whenever you need more space - even if your current contract hasn’t ended.<br/>
<br/>
*** <b>Value for money</b><br/>
Managing our buildings ourselves means that we can often provide more cost effective solutions across our range of properties.<br/>
<br/>
*** <b>Responsible</b><br/>
From recycling to improving energy efficiency, we take our commitment to the protecting the environment seriously. We believe we are good people to do business with and always work with suppliers who are too.
</td>
</tr>
</table>
Any help would be greatly appreciated.Thanks,
Paul
Use <ul> and <li> tag inside <td> to accomplish what you wanted
Use the below code
<table style="float: left" border="0" cellpadding="8" cellspacing="0" width="100%">
<tr >
<td width="50%">
<b><span style="font-size: 11pt;">Take your seat</span></b><br/>
Your space at <apex:outputText value="{!Proposal__c.Building__r.Name}"/> comes with everything you need to get started as soon as you move in - all included in the price:<br/>
<ul>
<li>
Office furniture package including desk and adjustable office chair
</li>
<li>
Telephony package including 2,000 minutes per month and a handset
</li>
<li>
High speed, fully inclusive internet package with optional upgrade to 100mb line
</li>
<li>
<b><span style="font-size: 11pt;">Join the <apex:outputText value="{!Proposal__c.Building__r.Name}"/> community</span></b><br/>
When you move into <apex:outputText value="{!Proposal__c.Building__r.Name}"/>, you get more than just workspace. You’ll be able to move into an active community made up of like-minded businesses.<br/>
</li>
<li>
Customer Steering Group to give you a say in the running of the building
</li>
<li>
Community Engagement Manager to build the <apex:outputText value="{!Proposal__c.Building__r.Name}"/> community.<br/>
</li>
<br/>
<li>
Onsite customer service team.<br/>
</li>
<br/>
<li>
Regular programme of business, social and wellbeing events.
</li>
</td>
<td>
</td>
</tr>
</table>
Another one method is as follows
<style> .divBulletClass::before { content: '\2022'; } </style> <body> <div class="divBulletClass"> bullet points will be inserted</div> </body> </html>after adding the style replace "*" by <div class="divBulletClass"> </div> to get the required output.Let me know if the above mentioned code helps.
Thanks and Regards,
Shiva RV
All Answers
Use <ul> and <li> tag inside <td> to accomplish what you wanted
Use the below code
<table style="float: left" border="0" cellpadding="8" cellspacing="0" width="100%">
<tr >
<td width="50%">
<b><span style="font-size: 11pt;">Take your seat</span></b><br/>
Your space at <apex:outputText value="{!Proposal__c.Building__r.Name}"/> comes with everything you need to get started as soon as you move in - all included in the price:<br/>
<ul>
<li>
Office furniture package including desk and adjustable office chair
</li>
<li>
Telephony package including 2,000 minutes per month and a handset
</li>
<li>
High speed, fully inclusive internet package with optional upgrade to 100mb line
</li>
<li>
<b><span style="font-size: 11pt;">Join the <apex:outputText value="{!Proposal__c.Building__r.Name}"/> community</span></b><br/>
When you move into <apex:outputText value="{!Proposal__c.Building__r.Name}"/>, you get more than just workspace. You’ll be able to move into an active community made up of like-minded businesses.<br/>
</li>
<li>
Customer Steering Group to give you a say in the running of the building
</li>
<li>
Community Engagement Manager to build the <apex:outputText value="{!Proposal__c.Building__r.Name}"/> community.<br/>
</li>
<br/>
<li>
Onsite customer service team.<br/>
</li>
<br/>
<li>
Regular programme of business, social and wellbeing events.
</li>
</td>
<td>
</td>
</tr>
</table>
Another one method is as follows
<style> .divBulletClass::before { content: '\2022'; } </style> <body> <div class="divBulletClass"> bullet points will be inserted</div> </body> </html>after adding the style replace "*" by <div class="divBulletClass"> </div> to get the required output.Let me know if the above mentioned code helps.
Thanks and Regards,
Shiva RV
Regards,
Ramakant