Versions Compared

Version Old Version 13 New Version 14
Changes made by

Ravikumar Babu CTOO (Unlicensed)

Ravikumar Babu CTOO (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
titleHow to adjust the width of the tab panels in a form wizard?

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:

  1. Open the market-jqtbs-ltr.css file and add the following code in it.

    Code Block
    languagecss
    [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. */


  2. Save the changes to market-jqtbs-ltr.css file.
  3. Refresh the browser and verify if the tab panels' width are adjusted as shown in the following screenshot:


Expand
titleHow to insert icons for form item labels?

You can insert icons for form item labels through CSS. Let's consider a form shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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 insert icons for the form item labels, perform the following:

  1. Open the market-jqtbs-ltr.css file and add the following code in it.

    Code Block
    languagecss
    [data-item-id="FORM_CREDITCARD"] .CITY-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f1ad';
}

[data-item-id="FORM_CREDITCARD"] .DOB-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f073';
}

[data-item-id="FORM_CREDITCARD"] .INCOME-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f0b1';
}

[data-item-id="FORM_CREDITCARD"] .EMAIL-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f1fa';
}

[data-item-id="FORM_CREDITCARD"] .MOBILE-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f1ac';
}

/* Here, FORM_DEMO is the form ID. CITY, DOB, INCOME, EMAIL, and MOBILE are the respective form item IDs. */


  2. Save the changes to market-jqtbs-ltr.css file.
  3. Refresh the browser and verify that the icons are appearing on the left side of the form item labels as shown in the following screenshot:

Image Added