locked
How to change the height and width of multi-select boxes (combo boxes) RRS feed

  • Question

  • Is there a way, presumably using JavaScript and/or CSS, to change the height and width of the multi-select boxes in newform/editform.aspx?

    The id attribute is pretty crazy: Module_54436aac-2e86-40cc-b706-152e6a9be690_SelectCandidate


    There are no mistakes; every result tells you something of value about what you are trying to accomplish.

    Tuesday, December 11, 2018 11:55 PM

Answers

  • Hi,

    We can use CSS style to achieve it. Modify the width and height values in the code below and add the CSS into a script editor web part in newform.aspx/editform.aspx pages.

    <style>
    select[title='Module possible values']{
    	width:220px !important;
    	height:180px !important;
    }
    select[title='Module selected values']{
    	width:220px !important;
    	height:180px !important;
    }
    </style>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Proposed as answer by LinyusMVP Wednesday, December 12, 2018 2:45 AM
    • Marked as answer by run4it Wednesday, December 12, 2018 4:54 PM
    Wednesday, December 12, 2018 2:31 AM

All replies

  • Hi,

    We can use CSS style to achieve it. Modify the width and height values in the code below and add the CSS into a script editor web part in newform.aspx/editform.aspx pages.

    <style>
    select[title='Module possible values']{
    	width:220px !important;
    	height:180px !important;
    }
    select[title='Module selected values']{
    	width:220px !important;
    	height:180px !important;
    }
    </style>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Proposed as answer by LinyusMVP Wednesday, December 12, 2018 2:45 AM
    • Marked as answer by run4it Wednesday, December 12, 2018 4:54 PM
    Wednesday, December 12, 2018 2:31 AM
  • Thank Dennis.  I had ended up doing it as below, but I think your way of referencing the object is far cleaner and will try that out today.

    <style>
    select#Module_54436aac-2e86-40cc-b706-152e6a9be690_SelectCandidate,
    select#PS_x0020_Submodule_48b76c59-13c4-4152-a5db-10ef435086a2_SelectCandidate,
    select#Module_54436aac-2e86-40cc-b706-152e6a9be690_SelectResult,
    select#PS_x0020_Submodule_48b76c59-13c4-4152-a5db-10ef435086a2_SelectResult,
    select#Related_x0020_Inventory_e2eefe89-b6d5-4caf-84be-5db3c5d3f86d_SelectCandidate,
    select#Related_x0020_Inventory_e2eefe89-b6d5-4caf-84be-5db3c5d3f86d_SelectResult
     {
    display: block;
        padding: 6px 4px;
        -moz-box-sizing: content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
        height: 150px !important;
    width: 300px !important;
    }
    </style>


    There are no mistakes; every result tells you something of value about what you are trying to accomplish.

    Wednesday, December 12, 2018 4:19 PM