To resize all quick selectors globally in the application, you need to define the following CSS classes in Style.css which will override the classes in BaseStyles.css.
|
CSS class name |
Description |
Default values |
Example of new values |
|
.QSSize |
Size of pop-up. |
height: 278px; |
height: 478px; |
|
.QSttc div |
Width of the quick selector cell content before truncation. |
width:290px; |
width:580px; |
|
.QSfooter |
Top position of the footer. The default is. |
top:240px; |
top:440px; |
|
.QSContainer .QSscrollRegion |
Height of the scroll region. |
height:200px; |
height:400px; |
Notices that when you write the CSS classes, make sure to include the other CSS attributes as well. For example, if BaseStyle.css contains the following attributes:
.QSContainer .QSscrollRegion
height: 200px;
left: 0px;
overflow: auto;
position: absolute;
top: 40px;
width: 100%;
z-index: 2;
}
To set the new width and height 400px, you need to write the following in Style.css:
.QSContainer .QSscrollRegion
height: 400px;
left: 0px;
overflow: auto;
position: absolute;
top: 40px;
width: 100%;
z-index: 2;
}
To resize individual quick selector page, define the CSS classes in Style.css as above. However, instead of override the existing CSS classes in BaseStyle.css, you give the CSS classes new names such as .QSSize1, .QSttc1 div, .QSfooter1, .QSscrollRegion1. In addition, you need to modify the Quick Selector page to use the new classes.
Step 1: In the Property Sheet, set the “Pop-up CSS class” property to be the new class such as “QSSize1”:
Step 2: Go inside SelectorTableControl, select the cell with PaginationPanel and set the following cell attribute to be class=QSfooter1:
Step 3: Now go inside SelectorPanel, inside SelectorFields, select cell with QuickSelectorItem. Select cell attribute and change QSttc to QSttc1:
Step 4: Finally go to the Panel level and change the class attribute to your new value QSScrollRegion1:
Note: When the text direction is set to Right-to-left and HTML Editor is used on a page, display position of the QuickSelector is not correct. In order to resolve this issue, please use different editor from the available options, such as CKEditor.