SharePoint 2010 Custom List Form: Issues with MultiTab UI

If you want not to use InfoPath Form for some reason and want to customize the List Form using DVWP, which is still a good option in case you want more control on the UI of the form, you will come accross a few issues specially if you are using the JQuery tabs (MultiTab form). To get the JQuery tabs to work, you have to download JQuery UI and then upload in a Script Library (A doc library), as you were doing on SharePoint 2007. Then you have to refer them on the custom form like this:

[This should go in the PlaceHolderAdditionalPageHead]

<link rel="stylesheet" href="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="/ScriptLib/jquery-1.5.1.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/demos/demos.css">

Once done, you code the form HTML to have tabs as explained here.

But you are not done. If you have any DateTime control on your form, they will look very small and if you look at the view source, you would find that the font size is 0 for the Date Picker control.

Therefore, you have to override the settings of CSS like this:


         <style>

.ms-dtinput{
   font-size:11px!important;
}

</style>

Note: I recently learned that the issue was with one of the CSS and better way of handling would be to correct that CSS. I was using JQuery UI (tabs) and one of the CSS I was using was jquery.ui.theme.css. In this CSS, here is the code snippet that should be changed:


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }

The font-size part should be removed and this wil fis the issue and the consumer component will inherit the font size from main CSS (in my case core.css).

Then there is another issue if you many any HTML change in the form and save it, assuming that you made your custom form default, aftre changing the HTML, though it still shows as default form, it does not work and you will see the OOB form when aftre you change any HTML in the form and save it. SO you have to set OOB form default and set the custom form default again. I am assuming that either I am missing some setting some where (and the chances for that is remote) or it is a bug.