Page Comparison

You can explicitly enable horizontal scroll bar for a 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 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
   language css theme Eclipse
   .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:
   
   

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
   theme language css Eclipse
   /* The following CSS code snippet is for hiding the column headers of a grid. */ .CT_CARD_SUMMARY_WGT .table-wrapper-container thead { display: none; } /* The following CSS code snippet is for hiding the filter bar of a grid. */ .CT_CARD_SUMMARY_WGT .ct-padding-filter-container { display: none; } /* Here, 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:
   
   

You can hide a specific column header in a grid, such as plus icon header column in Grouped Grid 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 hide a specific column header in a grid, perform the following:

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

   Code Block
   language css theme Eclipse
   .CT_ACC_SUMMARY_WGT table tr th:first-child .ct-row-expand { display: none; } /* where CT_ACC_SUMMARY_WGT is the widget ID. */

   
   

2. Save the changes to market-jqtbs-ltr.css file.
3. Refresh the browser and verify if the specific column header (plus icon in this example) is hidden as shown in the following screenshot.

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.

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
   language css theme Eclipse
   [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:

You can hide a specific form's title 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. Consider that in the form wizard shown in the screen shot you want to hide the "Add Payee" title alone.

To hide a specific form's 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
   language css theme Eclipse
   [class*=wizard-view-] .PAYEE_FORM_tabItem span.ct-tab__txtspan { display: none; } /* where PAYEE_FORM is the "Add Payee" form ID. */

   
   

2. Save the changes to market-jqtbs-ltr.css file.
3. Refresh the browser and verify if the specific form's title ('Add Payee' in this example) is hidden as shown in the following screenshot: