3

I have a inline vf page which displays a dependent picklist field through apex:inputfield. When i change the resolution to 1024x768 (minimum supported resolution by salesforce) the field does not fit within the screen. How can i fix this?

enter image description here

2
  • Have you tried with style="width:100%;"? – Sergej Utko Jun 10 '13 at 12:22
  • Yes i did....but its not overwritting salesforce standard spreadsheet – SFDC_MJ Jun 10 '13 at 12:24
2

The browser is taking the select width from the largest value option it has. Try by forcing the max-width on css adding this :

<style>
 select{ max-width: 60px !important;}
</style>

In addition, max-width doesn't work on < IE9... To make this css cross-browser you could try:

select {  width:auto; } 

or

select {  width:100px; } 

Finally, If you only want to affect that picklist you would add a style class:

<style>
 .maxWidthSel{ max-width: 60px !important;}
</style>

....
    <apex:inputFiled  styleClass="maxWidthSel" ..../>
4
  • This seems to be a pretty cool solution but when i tried this its not overwritting salesforce standard style sheet. – SFDC_MJ Jun 10 '13 at 12:51
  • <td style="text-align: left;padding-left: 16px;"> <apex:inputField value="{!cse.PPS_Sub_Category__c}" styleClass="maxWidthSel"> </apex:inputField></td> – SFDC_MJ Jun 10 '13 at 12:53
  • <style> .maxWidthSel{ max-width: 60px !important;} </style> – SFDC_MJ Jun 10 '13 at 12:54
  • unless you have an inline style, like style="width:.." the render engine will follow the maxWithSel rule. Do you add the style block before the input? – Martin Borthiry Jun 10 '13 at 12:59
0

Some quick thoughts are to:

  1. Move your picklist to the left column
  2. Make the choices shorter.
  3. Try to use CSS to force the HTML select element to have a maximum width. I'm not sure how that would impact the display of text (e.g. would it force the text to wrap or would the text just not display?)

Update

Adding CSS to Visualforce is pretty simple. You have three options for the CSS; as an external file (static resource), in a <style> on the page, or inline on the element. Using style for the sake of this example, you would add a <style> block to your page and try to make the selector as explicit as possible, matching on a field id, if possible. Then set the width for that element. Adding the CSS inline on the element might even be necessary to get the CSS to override the standard styles provided by Salesforce.

You can review the DeveloperForce CSS cookbook or search for CSS help.

1
  • Hi Mike, i cannot change the picklist values and the UI since its our client requirement. I guess we can use CSS to overwrite sfdc standard style spreadsheet but not sure on how to implement that. Can you help me with this? – SFDC_MJ Jun 10 '13 at 12:28

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.