1

I'm new with SharePoint 2013 Development and I'm really enjoying it. But I did encounter a bump with creating new forms ins SharePoint Designer.

I have a simple custom list and I need to have fields about State and Zip Code. Now when I created the new form, the textbox (single line of text column type) is a bit long and I need make it smaller. The only catch is that I need to do it in JQuery? Below is what I have.

enter image description here

this is what I have for my SharePoint tags and JavaScript.

<td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff8{$Pos}" ControlMode="New" FieldName="State" __designer:bind="{ddwrt:DataBind('i',concat('ff8',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@State')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff8description{$Pos}" FieldName="State" ControlMode="New"/>
                    </td>

                    <td width="50px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Zip Code</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff9{$Pos}" ControlMode="New" FieldName="Zip_x0020_Code" __designer:bind="{ddwrt:DataBind('i',concat('ff9',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Zip_x0020_Code')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff9description{$Pos}" FieldName="Zip_x0020_Code" ControlMode="New"/>
                    </td>

<script>
    $("State").css("width", 100);
    $("Zip Code").css("width", 100);
</script>

Hope you guys can help me out. Thank you.

RESOLVED!

I figured it out. Here is what I used for those like me struggling.

$(document).ready(function()
    {
        $('input[title="State"]').css("width","100px");
        $('input[title="Zip Code"]').css("width","100px");
    }
);
  • Did you try style attribute inside the SharePoint:FormField tag? – Hasan Köroğlu Feb 28 '17 at 19:05
0

I figured it out. Here is what I used for those like me struggling.

$(document).ready(function()
{
    $('input[title="State"]').css("width","100px");
    $('input[title="Zip Code"]').css("width","100px");
});

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.