Versions Compared

Version Old Version 5 New Version 6
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 enable horizontal scroll bar for a widget?

You can explicitly enable horizontal scroll bar for a widget through CSS. Let's consider the 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 enable horizontal scroll bar for the grid widget, perform the following:

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

    Code Block
    languagecss
    themeEclipse
    .CT_CARD_SUMMARY_WGT .table-wrapper-container 
{
	overflow-x: scroll;
}

// 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 horizontal scroll bar appears on the widget as shown in the following screenshot:



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.

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 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:

    Image Added