0

I have SharePoint custom form with jquery tabs for some reason the sharepoint datefield is so small you can't see it even though it has width specified width. It shows as a small box about the size of a checkbox. I copied just the specific section from the form.aspx file. I am using jquery tabs. Request Date is the field in question.

    <xsl:template name="dvt_1.rowedit">
    <xsl:param name="Pos" select="position()"/>
    <tr>
        <td>
        <div id="hometab">
        <ul><li><a href="#RequiredInformation"><span>Required Information</span></a></li>
        <li><a href="#ManagersApproval"><span>Manager&apos;s Approval</span></a></li>

        </ul>
        <div id="RequiredInformation">
        <table border="0" width="100%">
                    <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Title<span class="ms-formvalidation"> *</span>
                            </nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Request Date<span class="ms-formvalidation"> *</span>
                            </nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Request_x0020_Date" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Request_x0020_Date')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Request_x0020_Date" ControlMode="New"/>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>User Name<span class="ms-formvalidation"> *</span>
                            </nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="User_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@User_x0020_Name')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="User_x0020_Name" ControlMode="New"/>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Job Title<span class="ms-formvalidation"> *</span>
                            </nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="Job_x0020_Title" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Job_x0020_Title')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="Job_x0020_Title" ControlMode="New"/>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Location<span class="ms-formvalidation"> *</span>
                            </nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="Location" __designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Location')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff5description{$Pos}" FieldName="Location" ControlMode="New"/>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Division<span class="ms-formvalidation"> *</span>
                            </nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="Division" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Division')}"/>
                        <SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="Division" ControlMode="New"/>
                    </td>
                </tr>

        </table>
        </div>
1

I came across this posting while searching for the answer to the same problem and since it had not been answered I continued searching until I found this:

http://forum.jquery.com/topic/sharepoint-2010-date-form-field-size-issue-when-used-in-jquery-ui-tab

Essentially, you need to edit the redmond CSS file that you download from jQuery and locate:

.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:1em}

then change it to (or some other font size):

.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:11px}
| improve this answer | |

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.