Versions Compared

Version Old Version 6 New Version 7
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 hide the column headers and filter bar of a grid widget?

You can hide the column headers of a grid widget through CSS. Let's consider a grid widget 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 hide the column headers and the filter bar of a grid widget, perform the following:

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

    Code Block
    languagecss
    themeEclipse
    // For hiding the column headers of a grid:
.CT_CARD_SUMMARY_WGT .table-wrapper-container thead
{
	display: none;
}

// where CT_CARD_SUMMARY_WGT is the widget ID.

//For hiding the filter bar of a grid:
.CT_CARD_SUMMARY_WGT .ct-padding-filter-container
{
	display: none;
}

// where CT_CARD_SUMMARY_WGT is the widget ID.


  2. Save the changes to market-jqtbs-ltr.css file.
  3. Refresh the browser and verify if the column headers and filter bar of the widget are hidden as shown in the following screenshot:


Expand
titleHow to hide the forms title in a form wizard?

You can hide the forms title in form wizard through CSS. Let's consider a form wizard 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 hide the forms title 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
    themeEclipse
    [data-item-id="FORM_TRANSFER"] [data-wizard-id="progress-steps-FORM_TRANSFER"] span.ct-tab__txtspan
{
    display: none;
}

// 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 forms title are hidden as shown in the following screenshot:

Image Added