0

I have VF page designed as a form with multiple fields (input, output, radio button) as shown below. I would like to extend the label on my form to represent 30% of the space. At the moment it is all stuck on the left hand side. I am already using CSS style but could not figure it out how to fix the label width. Any idea? Thank you in advance for your help. Sylvie

Example

I have tried the table solution but it is not what I want to achieve. I would like the label to extend and moreover my radio button labels have disappeared. See below:

enter image description here

  • Hi @ultima67 Please share the code snippet. – SE_User Aug 4 '16 at 5:11
  • 1
    try putting !important to each line...it works for me "color: red !important;" – Micz Domz Aug 4 '16 at 5:55
  • When I add a style to my apex:inputfield such as style="width: 30% ! important", it change the size of the input field not the label. – ultima67 Aug 5 '16 at 1:53
1

I have fixed it by creating a style for the label and for the radio button:

 label {
      float: left;
      width: 150px;
      margin-left: 20px;
      text-align: left;
   }
 .radioB input, .radioB label{
      float:none;
      display:inline;
      width: 30px;
   }   
0

Use table for formatting and use below code.

 table td {
        width: 30%;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
    }

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>first</td><td>second</td><td>third</td><td>forth</td>
    </tr>
    <tr>
        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>
    </tr>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.