I have a multiselectpicklist within apex:inlineeditsupport shown on a Visualforce table. When double clicked on it, the pop up window is corrupted as shown. I found that the issue is because of the width being automatically set. How to fix this, please help me out as i'm not a js expert.

enter image description here

Thanks in advance!


The select box takes the width of the largest option available. Ideally, you can reduce the length of the options or choose a more user-friendly UI interface to show these options to a user.

You can add this in your VF page to control the width but this is not something I would recommend if you are designing for mobile and tablets as well.

    .multiSelectPicklistRow select {
        max-width: 300px;

Simpler option:

<form method="post" action="/Tests/Post/">      
        <legend>What is Your Favorite Pet?</legend>      
        <input type="checkbox" name="favorite_pet" value="Cats">Cats<br>      
        <input type="checkbox" name="favorite_pet" value="Dogs">Dogs<br>      
        <input type="checkbox" name="favorite_pet" value="Birds">Birds<br>      
        <input type="submit" value="Submit now" />      
  • Thanks @Manjit5190. That did the trick. Any suggestions on your recommendation to choose more user friendly UI to show options? – SMorse Mar 12 '20 at 20:25
  • Well, a checkbox in front of each option would be great to start with, something as simple as this html5-tutorial.net/try.html#pre4 – manjit5190 Mar 12 '20 at 20:28
  • Ok, did you share any code in the above url coz it take me to an empty editor – SMorse Mar 12 '20 at 20:31
  • Yes, I did . :) Updated the answer – manjit5190 Mar 12 '20 at 20:33
  • cool! thank you Manjit :) – SMorse Mar 12 '20 at 20:37

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.