How To Customize your Display using CSS file

Overview

This guide describes and explains how to change the default survey display using a customized CSS file that will be uploaded

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External style sheets are stored in CSS files

Steps

Navigate to the 'Custom Display' tab in the 'Survey Web Display Properties' - Navigate to the 'Styles' tab and choose the option 'Custom CSS' 
mceclip0.png

If you would like to use your own CSS file and not the default CSS, Click on the option 'Download Current CSS' to download the CSS currently implemented (attached to this guide you will find a template CSS)mceclip0.png

Update the CSS file and click on 'Use A Custom CSS' and upload it

Please note:

  • The CSS should only include classes and selectors that you wish to change, there is no need for the  default CSS file to be included with all the classes.
  • That if your CSS file will not include or update a certain element it will use the default. 
  • Once you upload your own CSS file it will override any changes done using the UI. 
  • Any new elements created in your CSS file will be ignored. 

Inspect page Items

When testing the survey in the browser you can use the Inspect (F12) in order to find the name of the class you would like to change. 

  1. Right Click on the section that you would like to find the class name and choose inspect - for example right click on the progress bar (as shown in image below) 
  2. Once you click on inspect the class name will show as marked and it will navigate to it as well on the right side of the screen (F12 option that opened)
  3. Take the Class name - in this case it's 'stgProgressBarCell' and search for it in your CSS file to change or update it

Please Note: If you have a class name that you would like to see what it affects in the browser do the following:

  1. Click on F12 while the survey is showing in the browser 
  2. Click on Ctrl+F to search and enter the class name - hit the enter
  3. Once the class is found hover with the mouse over the class and on the right side of the screen you will be able to see the section it will affect

Please Note:

  1. You can use SurveyToGo CSS Studio to view the CSS file and what it would look like unrelated to a specific survey, click here to learn how. 
  2. There is no need to include all the classes in your customized CSS only those classes you would like to change.

STG CSS Elements

In the table below you will find the STG elements and their description which are available for use

STG Element Name Description
stgLinkButton The link button of a single choice question that is rendered as links
stgTableContainer Scrollable table with header fixed 
stgScrolltable Scrollable table with header fixed 
stgScrollthead Scrollabe table with header fixed 
stgSurveyOuterTable This table contains the survey inner table, all the brand controls - top, right, left, bottom, and the label version
stgSurveyInnerTable This table contains the survey panel which contains- the progress bar, the navigation bar and the main questions table
stgLeftBrandControl A span tag containing the left pane image of the survey's brand
stgRightBrandControl A span tag containing the right pane image of the survey's brand
stgTopBrandControl A span tag containing the left pane image of the survey's brand
stgSurveyFotter A span tag containing the left pane image of the survey's brand
stgSurveyPanel This panel contains the progress bar, the navigation bar(back button next button and page index) and the main questions table
stgSurveyPanelBorderLess Used when not using custom CSS if the borderless survey property is enabled
stgProgressBarFilledCell When progressing through the survey the progress bar is filled this table cell represents a filled step
stgProgressBarCell When progressing through the survey the progress bar is filled this table cell represents a step which is not yet filled
stgTopBannerPanel This panel is visible when displaying the survey's top panel (set in the survey properties and through the user logic)
stgTopBannerLabel When displaying the survey's top banner this label will hold the top banner text
stgMainQuestionsTable This table contains the navigation bar and the question displayed in the current page
stgMainQuestionsTableBorderless This table contains the navigation bar and the question displayed in the current page
stgQuestionsTable This table will contain all the current page questions it will contain more than one question if displaying more than one question per page
stgQuestionTable This table will contain a single survey question 
stgQuestionTableBorderless This table will contain a single survey question 
stgErrorLabel This label will be visible if trying to advance from a question which is not filled correctly or does not meet the validation rule
stgNavigationTable This table will contain all the visible navigation buttons - next, back (also home and end if they are displayed) and the page indicator label
stgNavigationBorderless This table will contain all the visible navigation buttons - next, back (also home and end if they are displayed) and the page indicator label
stgNavButton Survey navigation buttons (stgNavButton is the base class)
stgNextButton Survey navigation buttons (stgNavButton is the base class)
stgBackButton Survey navigation buttons (stgNavButton is the base class)
stgNextButtonFinish Survey navigation buttons (stgNavButton is the base class)
stgEndButton Survey navigation buttons (stgNavButton is the base class)
stgHomeButton Survey navigation buttons (stgNavButton is the base class)
stgHelpLink Displayed only when enabling the 'show help link' property through the web survey properties screen
stgPageIndexLabel This label is placed inside stgNavigationTable it specifies the current displayed survey's page and the total number of pages in the survey
stgClearAnswerButton Clear answer button - displayed only when enabling the option through the web survey properties screen
stgAnswersTable This table will contain the question's answer and topics
stgShowBorder This table will contain the question's answer and topics
stgVersionLabel This label indicates the current Dooblo web client version
stgOtherSpecifyTextBox If the question contains an answer which is set as an 'other-specify' answer a text box will be rendered along with the answer label, this class will be added to it
stgCommentTextBox If the question is set to 'Allow comments' a text box will and a label with the text 'Add Comment Here:' will be rendered allowing the user to enter a comment, this class will be added to the text-box.
stgTextBox A base class for all text box answers, for example used for answers in questions like - open ended, numeric open ended grid etc.
stgCommentLabel If the question is set to 'Allow comments' a text box and a label with the text 'Add Comment Here:' will be rendered allowing the user to enter a comment, this class will be added to the label 
stgOtherSpecifyGridCell A base class for other specify answers in grid questions like single choice grid and multiple selection grid, this is the cell that will hold the radio button or check-box
stgCheckBox A base class for answers that are represented by check boxes used in multiple selection questions like - multiple selection and multiple selection grid
stgRadioButton Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid
stgSelectionBox Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid
stgSelectionBoxItem Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid
stgButton Base class for answers that are represented by radio buttons used in single choice questions like - single choice and single choice grid
stgGridHeaderRow A base class for the header row in grid questions that are rendered as a table like single choice grid and multiple selection grid
stgGridHeaderRowFlip A base class for the header row in grid questions that are rendered as a table like single choice grid and multiple selection grid
stgBeforeLabel A base class for before and after labels used in questions that have a before and after text property like numeric, numeric grid, open ended etc. This label will hold the question's before and after text
stgAfterLabel A base class for before and after labels used in questions that have a before and after text property like numeric, numeric grid, open ended etc. This label will hold the question's before and after text
stgRTL This base class is added to controls when the current survey's language is set as an RTL language
stgTextAlignRight This base class is added to controls when the current survey's language is set as an RTL language
stgLTR This base class is added to controls when the current survey's language is set as an LTR language
stgTextAlignLeft This base class is added to controls when the current survey's language is set as an LTR language
stgNavigationTableM This class will set the navigation table width
stgGridTable A base class for the grid table in grid questions that are rendered as table like single choice grid and multiple selection grid, this table will hold the header row, topics, answers and radio buttons or check-boxes
stgMGridTable The same as stgGridTable but used when the survey is conducted on mobile devices
stgGridRow A base class for a row in the grid table for grid questions that are rendered as table like single choice grid and multiple selection grid
stgGridRowAlter A base class for a row in the grid table for grid questions that are rendered as table like single choice grid and multiple selection grid
stgHorizontalBorder Added to rows inside stgMGridTable when the survey is conducted on mobile devices 
stgMultiSelectCheckBox When rendering a multiple selection question as selection list or auto-complete list each answer is rendered as a input taf with checkbox type, this class is added to each tag in addition to the stgCheckBox base class
stgMultiSelectAnswerLabel For each visible answer a label tag will be created, this class is added to each tag in addition to the stgAnswerLabel base class
stgMultiSelectOtherSpecifyTextBox If the question contains an answer which is set as an 'other-specify' answer an input tag will be rendered along with the answer span tag, this class will be added to it along with the stgOtherSpecifyTextBox base class
stgMultiSelectGridCheckBox When rendering a multiple selection grid question as table each answer-topic cell will hold an input tag with a checkbox type, this class will be added to each tag
stgMultiSelectGridTable When rendering a multiple selection grid question as table, this class will be added to the table which will contain all the topics, answers and check-boxes
stgMultiSelectGridRow When rendering a multiple selection grid question as table, this class will be added to each table row
stgMultiSelectGridRowAlter When rendering a multiple selection grid question as table and enabling the 'alternate row color', this class will be added to each alternating table row
stgMultiSelectGridAnswerLabel For each visible answer a span tag will be created, this class will be added to each tag along with the stgAnswerLabel base class
stgMultiSelectGridTopicLabel For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class
stgOtherSpecMultiSelectGridCell For each answer that is set as 'Other specify' this class will be added to the cell with check-box representing the answer along with the stgOtherSpecifyGridCell base class
stgMultiSelectGridHeaderRow When rendering a multiple selection grid question as table, this class will be added to table header row along with the stgGridHeaderRow class
stgMultiSelectGridHeaderRowFlip When rendering a multiple selection grid quesiton as a flipped table, this class will be added to table header row along with the stgGridHeaderRowFlip class
stgSingleChoiceRadioButton When rendering a single choice question as radio buttons each answer is rendered as an input tag with a radio type, this class is added to each tag in addition to the stgRadionButton base class
stgSingleChoiceAnswerLabel For each visible question answer a label tag will be created, this class will be added to each tag along with the stgAnswerLabel base class
stgSingleChoiceOtherSpecifyTextBox If the question contains an answer which is set as an 'other-specify' answer an input tag will be rendered along with the answer span, this class will be added to it along with the stgOtherSpecifyTextBox base class
stgSingleChoiceLinkButton When rendering a single choice question as links each answer is rendered as an 'a' tag with an href property, this class is added to each tag in addition to the stgLinkButton base class
stgSingleChoiceLinkCloud When rendering a single choice question as link clouds each answer is rendered as an 'a' tag with an href property, this class is added to each tag in addition to the stgLinkCloud base class
stgSingleChoiceLinkCloudSelected When rendering a single choice question as link clouds each answer is rendered as an 'a' tag with an href property this class is added to each tag that represents a selected answer in addition to the stgLinkCloud base class
stgSingleChoiceComboSelectionBox When rendering a single choice quesiton as selection box each answer is rendered as an option tag inside a select tag, this class is added to the select tag in addition to the stgSelectionBox base class
stgSingleChoiceComboSelectionBoxItem When rendering a single choice quesiton as selection box each answer is rendered as an option tag inside a select tag, this class is added to each option tag in addition to the stgSelectionBoxItem base class
stgSingleChoiceGridHeaderRow When rendering a single choice grid quesiton as table, this class will be added to table header row along with the stgGridHeaderRow class
stgSingleChoiceGridHeaderRowFlip When rendering a single choice grid quesiton as a flipped table, this class will be added to table header row along with the stgGridHeaderRowFlip class
stgSingleChoiceGridRadioButton When rendering a single choice grid question as table each answer-topic cell will hold a radio button, this class will be added to each one
stgSingleChoiceGridTable When rendering a single choice grid question as table, this class will be added to the table which will contain all the topics, answers and radio buttons
stgSingleChoiceGridRow When rendering a single choice grid question as table, this class will be added to each table row along with the stgGridRow base class
stgSingleChoiceGridRowAlter When rendering a single choice grid question as table and enabling the 'alternate row color', this class will be added to each alternating table row along with the stgGridRowAlter base class
stgSingleChoiceGridAnswerLabel For each visible answer a span tag will be created, this class will be added to each tag along with the stgAnswerLabel base class
stgSingleChoiceGridTopicLabel For each visible topic a span tag  will be created, this class will be added to each tag along with the stgTopicLabel base class
stgSingleChoiceGridComboSelectionBox When rendering a single choice grid question as selection box each topic is rendered as a select tag, this class is added to the tag in addition to the stgSelectionBox base class
stgSingleChoiceGridComboSelectionBoxItem When rendering a single choice grid question as selection box each answer is rendered as an option tag inside a select tag, this class is added to each select tag in addition to the stgSelectionBoxItem base class
stgOtherSpecifySingleChoiceGridCell For each answer that is set as 'Other specify' this class will be added to the cell with radio button representing the answer along with the stgOtherSpecifyGridCell base class
stgOpenEndedTextBox The answer of the open ended question is rendered as an input tag, this class will be added to it along with the stgTextBox base class
stgOpenEndedGridTextBox For each topic in an open ended grid question an input tag is rendered, this class will be added to it along with the stgTextBox base class
stgOpenEndedGridTopicLabel For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class
stgOpenEndedGridRow Each open ended grid topic span and it's input tag are placed inside a table row, this class will be added to each row along with the stgGridRow base class
stgOpenEndedGridRowAlter If the question's 'alternate row color' property is set, this class will be added to each alternating table row along with the stgGridRowAlter base class
stgNumericTextBox The answer of the numeric question is rendered as a text box, this class will be added to it along with the stgTextBox base class
stgNumericGridTextBox For each topic in a numeric grid question an input tag is rendered, this class will be added to it along with the stgTextBox base class
stgNumericGridTotalLabel If the question is set to 'Show Total', two spans will be added to indicate the topics total value, the value of this span will be the text set in the survey texts 'numeric grid total' property
stgNumericGridTotalValueLabel If the question is set to 'Show Total', two spans will be added to indicate the topics total value, the value of this span will be the total value of all the topics
stgNumericGridRemainLabel If the question's 'Topics should no exceed' property is enabled, two spans will be added, the value of this span will be 'Remaining:
stgNumericGridRemainValueLabel If the question's 'Topics should no exceed' property is enabled, two spans will be added, the value of the span will be the the value which is set as the should not exceed value, minus, the total value of each of topic value
stgNumericGridRow Each numeric grid topic and it's input tag are placed inside a table row, this class will be added to each row along with the stgGridRow base class
stgNumericGridRowAlter If the question's 'alternate row color' property is set, this class will be added to each alternating table row along with the stgGridRowAlter base class
stgNumericGridTopicLabel For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class
stgDateTimeTextBox The answer of the numeric question is rendered as an input tag with a date or time mode, this class will be added to it along with the stgTextBox base class
stgDateTimeCheckBox In a date time question an input tag with a checkbox type is rendered, which will be marked by the user to indicate that he answered the question
stgDateTimeNowButton If the question's 'no button' property is disabled this button tag will be added, clicking on it will set the stgDateTimeTextBox to current browser date or time and also will check the stgDateTimeCheckBox
stgMatrixRadioButton For each topic and each step between the question's lower limit and upper limit an input tag with a radio type will be rendered
stgMatrixIrrelevantRadioButton If displaying the 'Irrelevant' column this input tag with a radio type will be added to each column step between the question's lower limit and upper limit
stgMatrixIrrelevantHeaderLabel If displaying the 'Irrelevant' column another column will be added to the grid this span tag will hold the the value set as the column's text in the question
stgMatrixTopicLabel For each visible topic a span tag will be created, this class will be added to each tag along with the stgTopicLabel base class
stgMatrixLowLabel A span tag holding the question's lower text
stgMatrixHighLabel stgMatrixHighLabel
stgMatrixGridRow This class will be added to each grid row along with the stgGridRow base class
stgMatrixGridRowAlter If the question's 'alternate row color' property is set, this class will be added to each alternating table row along with the stgGridRowAlter base class
stgMatrixHeaderRow This row holds the lower, upper and irrelevant(if displayed) texts, this class will be added to the row along with the stgGridHeaderRow class
stgMatrixHeaderRowFlip When the question's 'flipped scale' property is enabled, this class will be added to table header row along with the stgGridHeaderRowFlip class
stgScaleRadioButton For each scale step an input tag with radio type will be rendered, this class will added to it along with the stgRadioButton base class
stgScaleGridTable This class will be added to the table which will contain the lower and upper texts and the radio buttons
stgScaleGridRow This class will be added to each table row
stgScaleNumbersRow This class will be added to the row which will contain the scale step values
stgScaleHeaderRow This class will be added to the table header row
stgListSourceCheckBox The check box element of an external list question when rendered as multiple selection
stgListSourceRadioButton The check box element of an external list question when rendered as Single selection
stgListSourceAnswerLabel External list question answer label
stgOtherSpecifyPopUp The Popup window to be shown when Other Specify window is prompt for Grid Questions
stgOtherSpecifyPopUpContent  
stgOtherSpecifyPopUpHeader The header of the Grid Other Specify PopUp window
stgOtherSpecifyPopUpFooter The Footer of the Grid Other Specify PopUp window
stgOtherSpecifyPopUpCloseButton The Close button of the Grid Other Specify PopUp window
stgOtherSpecifyPopUpBody The popup body – the white part between the header and the part with the accept button of the Grid Other Specify PopUp window
stgOtherSpecifyPopUpBodyText The text area of the Grid Other Specify PopUp window
stgOtherSpecifyPopUpAcceptButton The accept button of the Grid Other Specify PopUp window
stgFinishPageMainTable This table contains the Finish page layout
stgFinishPageInner This table contains the Finish page inner table layout
stgCompoundGridTable This table contains the layout of the Compound Grid
stgCompoundGridTableBorderLess This table contains the layout of the Compound Grid borderless survey property is enabled
stgCompoundGridHeaderLabel This table contains the layout of the Header Label in a Compound Grid 
stgMinimumSpaces Used when the minimum spaces option is enabled
stgQuestionInstructionText Class responsible for the 'Surveyor Instructions' layout
stgCheckBoxHighLightBorder A class to be used when using the render 'Highlighted Border' in Multiple Selection
stgRadioButtonHighLightBorder A class to be used when using the render 'Highlighted Border' in single choice
stgAnswerLabelHighLightBorder A class to be used to design the Answer label in 'Highlighted Border' render mode
stgMultiSelectAnswerLabelHighLightBorder A class to be used to design the Answer label in Multiple Selection Question rendered as 'Highlighted Border' 
stgTextHighlightLabel A class to be used to design the label in highlighted Text render mode
stgSingleChoiceAnswerLabelHighLightBorder A class to be used to design the label in Single Choice highlighted border render mode

stgSingleChoiceGridTopicLabelTwoStatmentsRightAlignSecondStatment

A class to be used to design Single Choice Grid 2 Statements render mode
stgMultimediaDropZone a class to design the Multimedia 'DropZone' after attachments are included
stgMultimediaDropZoneM Same as 'stgMultimediaDropZoneM' but used when the survey is conducted on mobile devices
stgMultimediaDropZoneNoAttach a class to design the Multimedia 'DropZone' when no attachments are included
stgMultimediaHighlight a class to design how the highlighted areas will look like
stgMultimediaDropFileLabel A class to design Multimedia Question File label
stgMultimediaClearFileButton A class to design Multimedia Question 'Clear' Button, this is the button prior to adding a file
stgMultimediaUpload A class to design the Multimedia Question upload area
stgMultimediaPreviewAddFileButton A class to design Multimedia Question 'Preview File' Button
stgMultimediaErrorLabel A class to design Multimedia Question Error label
stgMultimediaMediaPlayer A class to design Multimedia Question Media player container, will be used after loading a video or audio file
stgMultimediaImageGallery A class to design Multimedia Question Image Gallery container
stgMultimediaMediaPlayerM Same as 'stgMultimediaMediaPlayer' but used when the survey is conducted on mobile devices
stgMultimediaImageGalleryM Same as 'stgMultimediaImageGallery' but used when the survey is conducted on mobile devices
stgMultimediaControls A class to design the Multimedia Question controls
stgMultimediaClearButton A class to design Multimedia Question 'Clear' Button, this is the button after a file is added
stgMultimediaAddButton A class to design Multimedia Question 'Add File' Button
stgScaleSliderContainer class to define the layout of a 'Scale' Question slider container
stgScaleSlider class to define the layout of a 'Scale' Question slider
stgScaleCheckBox class to define the layout of a 'Scale' Question check box
stgScaleTextsContainer class to define the layout of a 'Scale' Question texts container
stgScaleImageContainer class to define the layout of a 'Scale' Question images container
stgScaleLowImage class to define the layout of a 'Scale' Question Low Image
stgScaleLowText class to define the layout of a 'Scale' Question Low Text
stgScaleUpperText class to define the layout of a 'Scale' Question Upper text
stgScaleMidText class to define the layout of a 'Scale' Question Middle Text
stgScaleMidImage class to define the layout of a 'Scale' Question Middle Image
stgScaleUpperImage class to define the layout of a 'Scale' Question Upper Image
stgScaleAboveImage Class to define the layout of a 'Scale' Question Above Image
stgScaleCurrentContainer Class to define the layout of a 'Scale' Question selected container
stgScaleCurrentRateLabel  Class to define the layout of a 'Scale' Question selected rate label
stgScaleCurrentRateLabelValue Class to define the layout of a 'Scale' Question selected rate label value
stgCountersTotalImages class to define the layout of the 'Counter' Question Total Images when used
stgCountersTable class to define the layout of the 'Counter' Question table container
stgCountersRow class to define the layout of the 'Counter' Question Row
stgCountersText class to define the layout of the 'Counter' Question Text
stgCountersLabel class to define the layout of the 'Counter' Question label
stgCountersUpButton class to define the layout of the 'Counter' Question UP (Increase) button
stgCountersDownButton class to define the layout of the 'Counter' Question DOWN (Decrease) button
stgCountersResetButton class to define the layout of the 'Counter' Question Reset button
stgCountersTopicLabel class to define the layout of the 'Counter' Question Topic Label
stgCountersSmallButton class to define the layout of the 'Counter' Question when small button is used
stgCountersSmallText class to define the layout of the 'Counter' Question when small text is used
stgCountersTotalLabel class to define the layout of the 'Counter' Question Totals label when used
stgCountersTotalValueLabel class to define the layout of the 'Counter' Question Totals Value label when used
stgCountersRowAlter class to define the alter row layout in a 'Counter' question.
stgRatingAnswerLabel Class to define the layout of a 'Rating' question Answer Label
stgRatingRemoveButton Class to define the layout of a 'Rating' question Remove button
stgRatingRatingIndex Class to define the layout of a 'Rating' question Index
stgRatingDropZone Class to define the layout of a 'Rating' question Drop Zone
stgRatingDropZoneM Same as 'stgRatingDropZone' but used when the survey is conducted on mobile devices
stgRatingDropZoneTable Class to define the layout of a 'Rating' question specific Drop Zone Table container
stgRatingDropZoneTableM Same as 'stgRatingDropZoneTable' but used when the survey is conducted on mobile devices
stgRatingAnswersTable Class to define the layout of a 'Rating' question Answers table container
stgRatingDropZonesTable Class to define the layout of a 'Rating' question multiple Drop Zones table
stgRatingAnswersTableM Same as 'stgRatingAnswersTable' but used when the survey is conducted on mobile devices
stgRatingDropZonesTableM Same as 'stgRatingDropZonesTable' but used when the survey is conducted on mobile devices
stgMultiChoiceGridDropZone Class to define the layout of a 'Multiple Choice Grid' question specific Drop Zone Table container
stgMultiChoiceGridDropZones Class to define the layout of a 'Multiple Choice Grid' question multiple Drop Zones Table container
stgMultiChoiceGridTopicsList Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' topics list
stgMultiChoiceGridDropList Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' drop list
stgMultiChoiceGridDropListM Same as 'stgMultiChoiceGridDropList' but used when the survey is conducted on mobile devices
stgMultiChoiceDropGridListM Same as 'stgRatingAnswersTableM' but used when the survey is conducted on mobile devices
unselectableText Class to define the Rank Scale Topic that is un-selectable.
stgMultiChoiceGridTopicsList  Class to define 'Multi Choice Grid' Question topics list
stgCountersNeutralColors class to define a 'Counter' Question buttons 
stgScrolltheadSticky class to define a 'Multi Topic Grid' when freezing the header
stgTopicLabelBold Class to define a topic label when set as bold
stgAnswerLabelBold Class to define an Answer label when set as bold
stgSliderTicks class to define a 'Slider' when ticked
stgSliderCheck class to define a 'Slider' when checked
stgSliderContainer class to define a 'Slider' container
stgSlider class to define the 'Slider'
stgSliderEdge class to define the 'Slider' Edges
stgSliderValue class to define the 'Slider' values
stgSliderValueNotSelectable class to define the 'Slider' values that were not selected
stgSliderValueImageHolder class to define the 'Slider' values Image holder
stgSliderValueImage class to define the 'Slider' values Image
stgSingleChoiceSliderTicks class to define a Single Choice Question rendered as 'Slider' when ticked
stgSingleChoiceSliderCheck class to define a Single Choice Question rendered as 'Slider' when checked
stgSingleChoceSliderContainer class to define a Single Choice Question rendered as 'Slider' container
stgSingleChoiceSlider class to define a Single Choice Question rendered as 'Slider'
stgSingleChoiceSliderEdge class to define a Single Choice Question rendered as 'Slider' Edges
stgSingleChoiceSliderValue class to define a Single Choice Question rendered as 'Slider' values
stgSingleChoiceSliderValueImageHolder class to define a Single Choice Question rendered as 'Slider' values Image holder
stgSingleChoiceSliderValueImage class to define a Single Choice Question rendered as 'Slider' values Image
stgSingleChoiceGridTopicsList  Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' topics list
stgSingleChoiceGridDropZone Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zone
stgSingleChoiceGridDropZones Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zones
stgSingleChoiceGridDropList Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop list
stgSingleChoiceGridAnswerDivM Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' Answer surrounding div when running on a mobile device
stgSingleChoiceGridDropZoneDivM Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zone surrounding div when running on a mobile device
stgSingleChoiceGridDropListM Same as 'stgSingleChoiceGridDropList' but used when the survey is conducted on mobile devices
   
stgSingleChoiceGridSliderTicks class to define a Single Choice Grid Question rendered as 'Slider' when ticked
stgSingleChoiceGridSliderCheck class to define a Single Choice Grid Question rendered as 'Slider' when checked
stgSingleChoiceGridSliderContainer class to define a Single Choice Grid Question rendered as 'Slider' container
stgSingleChoiceGridSlider class to define a Single Choice Grid Question rendered as 'Slider'
stgSingleChoiceGridSliderEdge class to define a Single Choice Grid Question rendered as 'Slider' Edges
stgSingleChoiceGridSliderValue class to define a Single Choice Grid Question rendered as 'Slider' values
stgSingleChoiceGridSliderValueImageHolder class to define a Single Choice Grid Question rendered as 'Slider' values Image holder
stgSingleChoiceGridSliderValueImage class to define a Single Choice Grid Question rendered as 'Slider' values Image
stgNumericSliderTicks class to define a Numeric Question rendered as 'Slider' when ticked
stgNumericSliderCheck class to define a Numeric Question rendered as 'Slider' when checked
stgNumericSliderContainer class to define a Numeric Question rendered as 'Slider' container
stgNumericSlider class to define a Numeric Question rendered as 'Slider'
stgNumericSliderEdge class to define a Numeric Question rendered as 'Slider' Edges
stgNumericSliderValue class to define a Numeric Question rendered as 'Slider' values
stgNumericSliderValueImageHolder class to define a Numeric Question rendered as 'Slider' values Image holder
stgNumericSliderValueImage class to define a Numeric Question rendered as 'Slider' values Image
stgNumericGridSliderTicks class to define a Numeric Grid Question rendered as 'Slider' when ticked
stgNumericGridSliderCheck class to define a Numeric Grid Question rendered as 'Slider' when checked
stgNumericGridSliderContainer class to define a Numeric Grid Question rendered as 'Slider' container
stgNumericGridSlider class to define a Numeric Grid Question rendered as 'Slider'
stgNumericGridSliderEdge class to define a Numeric Grid Question rendered as 'Slider' Edges
stgNumericGridSliderValue class to define a Numeric Grid Question rendered as 'Slider' values
stgNumericGridSliderValueImageHolder class to define a Numeric Grid Question rendered as 'Slider' values Image holder
stgNumericGridSliderValueImage class to define a Numeric Grid Question rendered as 'Slider' values Image
stgScaleSliderHandle Class to define a 'Scale' questions slider handle
unselectableText Class to define a 'Rank Scale' Question Topic that is un-selectable
stgMultiChoiceGridTopicsList Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' Topic list
stgMultiChoiceGridDropList Class to define a 'Multi Choice Grid' Question rendered as 'Ranked Scale' drop list
stgMultiChoiceGridAnswerDivM Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' Answer surrounding div when running on a mobile device
stgMultiChoiceGridDropZoneDivM  Class to define a 'Single Choice Grid' Question rendered as 'Ranked Scale' drop zone surrounding div when running on a mobile device
stgTextBoxFullWidth  Class to define the Text box full width
stgListBoxLimitedHeight class to define a list box height limit
stgMultiChoiceGridDropZonesPnlM when rendering a Multiple choice grid question as ranked scale on a mobile device, this class will be added to the dive containing all the answers and the drop zones
stgSingleChoiceGridDropZonesPnlM When rendering a single choice grid question as ranked scale on a mobile device, this class will be added to the dive containing all the answers and the drop zones

 

 That's It !

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

1 comment
  • "Use A Custom CSS" hidden

    0
    Comment actions Permalink

Please sign in to leave a comment.