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

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.

Answer 1

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 [e-mail].


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

Answer 2

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.