function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alex Waddell 12Alex Waddell 12 

2-in-1 Questions: Hide Field Name on Visual Force Page / Shift Left

Hello, new developer here. I want to make a few changes aesthetic changes to my VF page

i would like to hide the field name titled - "Note". Since i have a title that enlightens the user on what the VF page is for, the "Note" label is unnecessary.

Also, I want to shift the text box left so it sits flush with the title and Save button. I already have a style to make the text box larger so i know i will need a StyleClass. Wondering if i can get some help to have the style both shift left and have a width of 400

Below is a picture of the VF page (marked with the 2 things i want done) and the code that goes with it 

User-added image

<apex:page standardController="Notes_for_the_Day__c">
<apex:form >
  <apex:Pageblock Title="Notes on the Day">
  <apex:pageBlockSection columns="1">
  <apex:inputField Value="{!Notes_for_the_Day__c.Note__c}"
 style="height:100px;width:400px;"/>
  <apex:commandButton action="{!save}" value="save"/>
  </apex:pageBlockSection>
  </apex:Pageblock>
  </apex:form>

Thank you in adnvance
 
Best Answer chosen by Alex Waddell 12
GarryPGarryP
it is due to the structure of pageblock table. once the payout is generated in HTML after it re-renders. The inout field takes the full width of the page.
PFB updated code. Plase note i have added a style class and added style to one class, that is default class which is generated by SFDC once you use Pageblocks. Tried the code and it works.
<pre><apex:page standardController="Contact" extensions="ExampleController">
<style>.pbSubsection{
width: 400px;}</style>
<apex:form >
  <apex:Pageblock Title="Notes on the Day" >
  <apex:pageBlockSection columns="1" >
  <apex:inputField Value="{!contact.lastname}"
 style="height:100px;width:400px;"/>
  <apex:commandButton action="{!callFutureMethod}" value="save"/>
  </apex:pageBlockSection>
  </apex:Pageblock>
  </apex:form></apex:page>
</pre>
Points to be noted,
1. in all such UI related stuffs, try adding a common style tag and ad your styling there.

All Answers

GarryPGarryP
it is due to the structure of pageblock table. once the payout is generated in HTML after it re-renders. The inout field takes the full width of the page.
PFB updated code. Plase note i have added a style class and added style to one class, that is default class which is generated by SFDC once you use Pageblocks. Tried the code and it works.
<pre><apex:page standardController="Contact" extensions="ExampleController">
<style>.pbSubsection{
width: 400px;}</style>
<apex:form >
  <apex:Pageblock Title="Notes on the Day" >
  <apex:pageBlockSection columns="1" >
  <apex:inputField Value="{!contact.lastname}"
 style="height:100px;width:400px;"/>
  <apex:commandButton action="{!callFutureMethod}" value="save"/>
  </apex:pageBlockSection>
  </apex:Pageblock>
  </apex:form></apex:page>
</pre>
Points to be noted,
1. in all such UI related stuffs, try adding a common style tag and ad your styling there.
This was selected as the best answer
Alex Waddell 12Alex Waddell 12
Thank you Girish! the <Style> worked perfectly :D
GarryPGarryP
For got to answer your 2nd question :P
How to hide the label?
1. you will have to use the InputText tag instead inputField, but in this case you will loose binding with controller. Will have to write the custom logic.
2. Just use Styling class to hide the label from UI

Cheers!