You can adjust the width of the tab panels in a form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse. 
Assume that the ModelHouse application is using the Market theme and the corresponding CSS file is: D:\Canvas\apache-tomcat-7.0.67\webapps\ctmodelhouse\css\style\market\jqtbs\market-jqtbs-ltr.css. To adjust the width of the tab panels in a form wizard, perform the following: Open the market-jqtbs-ltr.css file and add the following code in it.
| Code Block |
|---|
| [data-item-id="FORM_TRANSFER"] [class*=wizard-view-]{
display: inherit;
}
[data-item-id="FORM_TRANSFER"] [class*=wizard-view-].nav-tabs li {
width: 250px;
}
/* where, FORM_TRANSFER is the form wizard ID. */ |
- Save the changes to market-jqtbs-ltr.css file.
- Refresh the browser and verify if the specific form's title ('Add Payee' in this example) is hidden tab panels' width are adjusted as shown in the following screenshot:
|