4

I am trying to resize a lookup field to be wider since the options are too long and get cut off. I have searched for a solution but nothing seems to quite work. My SharePoint skills are less than average (I've been dabbling on the side for a couple months), so I apologize if this is a simple fix.

The fields that need to be resized: enter image description here

<tr>
    <td width="190px" valign="top" class="ms-formlabel">
        <H3 class="ms-standardheader">
            <nobr>Add to Groups</nobr>
        </H3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
        <SharePoint:FormField runat="server" id="ff24{$Pos}" ControlMode="New" FieldName="Add_x0020_to_x0020_Domain_x0020_" __designer:bind="{ddwrt:DataBind('i',concat('ff24',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Add_x0020_to_x0020_Domain_x0020_')}"/>
        <SharePoint:FieldDescription runat="server" id="ff24description{$Pos}" FieldName="Add_x0020_to_x0020_Domain_x0020_" ControlMode="New"/>
    </td>
</tr>
<tr>
    <td width="190px" valign="top" class="ms-formlabel">
        <H3 class="ms-standardheader">
            <nobr>Add to Distro Lists</nobr>
        </H3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
        <SharePoint:FormField runat="server" id="ff25{$Pos}" ControlMode="New" FieldName="Add_x0020_to_x0020_Distro_x0020_" __designer:bind="{ddwrt:DataBind('i',concat('ff25',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Add_x0020_to_x0020_Distro_x0020_')}"/>
        <SharePoint:FieldDescription runat="server" id="ff25description{$Pos}" FieldName="Add_x0020_to_x0020_Distro_x0020_" ControlMode="New"/>
    </td>
</tr>

I changed the width for every section but it made no difference to the output. If there is another section of code I need to post I can add it. I'm working in SharePoint Designer 2013.

2

The tables you refer to have a fixed with in their HTML, which is why applying CSS to them might not seem to work. The cure is to use CSS's !Important to override HTML style rules.

To change e.g. both the height and the width of the all tables shown, apply the following change:

.ms-formlabel ~ .ms-formbody table.ms-long .ms-input select {
    width: 250px !Important;
    height: 300px !Important;
}
1

Another way would be to use the SPServices.js library (http://sympmarc.github.io/SPServices/).

It has a function $().SPServices.SPSetMultiSelectSizes. Give it the display name of the field and a min and max size.

0

The width (400px) you have specified for TD not going to work for SharePoint select control because they are control level styles. enter image description here

To apply the change to the control add the following CSS to the page.

<style type="text/css">
select {
    width: 200px !important;
}
</style>

Refer the below image to know where you can add that enter image description here

0

Use JQuery to set the css property of the field. You need to set the width of each side separately. This works perfectly in SP 2016 On Prem.

var standardWidth = '250px';

//File Type
$("select[title='File Type possible values']").css('width',standardWidth);
$("select[title='File Type selected values']").css('width',standardWidth);

//Category
$("select[title='Category possible values']").css('width',standardWidth);
$("select[title='Category selected values']").css('width',standardWidth);

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.