1

The question is about mix of both JQuery Tabs and SharePoint Input Form Text Box. My client requirement is to have a web part zone on the top and couple more in the middle wrapped with div that JQuery tabify and a web part zone at the bottom.

So Page structure is something like below. For this each zone there will be a web parts that has SharePoint Input Form Text Box.

<div class="Info-Page">
    <div class="Item-Edit">
        <WebPartPages:WebPartZone ID="xxxxxxxxxxxx" runat="server"
            Title="Item Basic Information Zone">
            <ZoneTemplate>
            </ZoneTemplate>
        </WebPartPages:WebPartZone>

        <div id="tabs-wrapper">
            <div id="tabs">
            <ul>
                <li id="tab-1">
                    <a href="#tabs-1"><asp:Label runat="server" Text="Description" ID="Label2"></asp:Label></a>
                </li>
                <li id="tab-2">
                    <a href="#tabs-2"><asp:Label runat="server" Text="Notes" ID="Label3"></asp:Label></a>
                </li>
                <li id="tab-3">
                    <a href="#tabs-3"><asp:Label runat="server" Text="Terms & Conditions" ID="Label4"></asp:Label></a>
                </li>
            </ul>
            <div id="tabs-1">
                <WebPartPages:WebPartZone ID="xxxxxxxxxxxx" runat="server"
                    Title="Description Tab Zone">
                    <ZoneTemplate>
                    </ZoneTemplate>
                </WebPartPages:WebPartZone>
            </div>
            <div id="tabs-2">
                <WebPartPages:WebPartZone ID="xxxxxxxxxxxx" runat="server"
                    Title="Notes Tab Zone">
                    <ZoneTemplate>
                    </ZoneTemplate>
                </WebPartPages:WebPartZone>
            </div>
            <div id="tabs-3">
                <WebPartPages:WebPartZone ID="xxxxxxxxxxxx" runat="server"
                    Title="Terms & Conditions Tab Zone">
                    <ZoneTemplate>
                    </ZoneTemplate>
                </WebPartPages:WebPartZone>
            </div>
        </div>
        <br />
        <WebPartPages:WebPartZone ID="xxxxxxxxxxxx" runat="server"
            Title="Controls Zone">
            <ZoneTemplate>
            </ZoneTemplate>
        </WebPartPages:WebPartZone>
    </div>
</div>

<script language="javascript" type="text/javascript">
    $('#tabs').tabs();
</script>

Here is the actual Problem I faced.

SharePoint Input Form Text Box funtionality fully works only in the last web part in the in the tabed zones. Rest of the rich text control's drop down menus (Color Picker, Font Selection, Font Size) not shown and not working.

Other Observations

By commenting out the jquery tabs() funtion results the page not to get tabify and then all the web parts like in a single page and all funtioanlities working as expected.

Adding a web part with Input Form Text Box while others are in the ri out of the tab zones like header/ or controls zone while others are in the right places will show the drop downs menus (Color Picker, Font Selection, Font Size) in top of the page with wrong alignment. But not a correct approch.

Help

Any one who has come accross this issue or similar can help me to and give any idea that I will try to fix this issue.

  • This would be so much easier with InfoPath. – teylyn Aug 12 '13 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.