0

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!

1 Answer 1

0

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.

<style>
    .multiSelectPicklistRow select {
        max-width: 300px;
    }
</style>

Simpler option:

<form method="post" action="/Tests/Post/">      
    <fieldset>      
        <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>      
        <br>      
        <input type="submit" value="Submit now" />      
    </fieldset>      
</form>
5
  • Thanks @Manjit5190. That did the trick. Any suggestions on your recommendation to choose more user friendly UI to show options?
    – SMorse
    Commented Mar 12, 2020 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
    Commented Mar 12, 2020 at 20:28
  • Ok, did you share any code in the above url coz it take me to an empty editor
    – SMorse
    Commented Mar 12, 2020 at 20:31
  • Yes, I did . :) Updated the answer
    – manjit5190
    Commented Mar 12, 2020 at 20:33
  • cool! thank you Manjit :)
    – SMorse
    Commented Mar 12, 2020 at 20:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .