I have different size of questions but my question area is always the same (I’m using CSS code, added here) I want the next and back buttons will be in the end of my question area and not in the buttom of the page, how can I do it?
.sg-int-virtual-page .sg-question-set > .sg-question.sg-page-current {
visibility: visible;
/* height: auto;*/
overflow: visible;
padding-bottom: 0px;
height: 300px;
}
.sg-int-virtual-page .sg-question-set {
perspective: 1200px;
transform-style: preserve-3d;
margin-top: 12px;
position: relative;
overflow-y: visible;
padding-bottom: initial;
height:310px;
}
.sg-survey .sg-mobile-optimized .sg-footer, .sg-survey .sg-body.sg-int-virtual-page .sg-footer {
background: transparent;
position: fixed;
bottom: 0;
top: initial;
left: 0;
right: 0;
width: 100%;
margin: 0;
padding: 0px 0;
height: 30px;
-webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: white;
z-index: 10000;
overflow: none;
text-align: center;
display: block;
color: transparent;
}
.sg-survey .sg-mobile-optimized .sg-button-bar .sg-next-button, .sg-survey .sg-mobile-optimized .sg-button-bar .sg-submit-button, .sg-survey .sg-body.sg-int-virtual-page .sg-button-bar .sg-next-button, .sg-survey .sg-body.sg-int-virtual-page .sg-button-bar .sg-submit-button {
font-family: SGIconFont;
float: left;
height: 30px;
width: auto;
min-width: 50px;
margin: 00px 0px 0;
text-align: center;
padding-top: 0px;
padding-bottom: 0px;
}
.sg-survey .sg-mobile-optimized .sg-button-bar .sg-back-button, .sg-survey .sg-body.sg-int-virtual-page .sg-button-bar .sg-back-button {
font-family: SGIconFont;
float: right;
margin: 00px 0 0 0px;
height: 30px;
min-width: 50px;
width: auto;
text-align: center;
text-indent: -4px;
padding-top: 0px;
padding-bottom: 0px;
}
.sg-question-set {
background-color: white;
opacity: 0.8;
margin:0;
max-height: 380px;
}
.sg-type-table .sg-table thead th, .sg-type-table .sg-table tbody th, .sg-type-table thead th.sg-column-header, .sg-type-table .sg-table tbody td, .sg-type-table thead th.sg-column-header, .sg-type-table .sg-table thead th.sg-column-subheader, .sg-type-table tbody td.sg-group-first-cell, .sg-rtl .sg-type-table td, .sg-type-table thead th.sg-column-subheader-1, .sg-rtl .sg-type-table thead th, .sg-rtl .sg-type-table thead th.sg-column-header, .sg-rtl .sg-type-table thead th.sg-column-subheader-1, .sg-rtl .sg-type-table tbody td.sg-group-first-cell {
border-color: transparent;
position:center;
}
.sg-survey .sg-mobile-optimized .sg-question .sg-question-options table[class^=”sg-“], .sg-survey .sg-mobile-optimized .sg-question .sg-question-options table[class^=”sg-“] tbody, .sg-survey .sg-mobile-optimized .sg-question .sg-question-options table[class^=”sg-“] tr:not(.sg-hide) {
display: block;
width: 100%;
text-align: center;
}/*
.simple-star .sg-mobile-optimized .sg-question-options .sg-header-row-first {
display:none;
}
.simple-star .sg-mobile-optimized .sg-question-options .sg-header-col-first {
display:none;
}
.simple-star .sg-mobile-optimized .sg-control-label {
display:none !important;
}
.sg-star-box .sg-mobile-optimized label.sg-star-0, .sg-star-box label.sg-star-0:hover {
display: none;
}
.simple-star .sg-mobile-optimized .sg-question-options tbody tr th {
display: none;
}
.simple-star .sg-mobile-optimized .sg-question-options{
position: center;
}
*//*
.simple-star .sg-question-options .sg-header-row-first {
display:none;
}
.simple-star .sg-question-options .sg-header-col-first {
display:none;
}
.simple-star .sg-control-label {
display:none !important;
}
.sg-star-box label.sg-star-0, .sg-star-box label.sg-star-0:hover {
display: none;
}
.simple-star .sg-question-options tbody tr th {
display: none;
}
.simple-star .sg-question-options{
position: center;
}*/
sg-survey .sg-mobile-optimized .sg-question .sg-question-options table[class^=”sg-“] tr th, .sg-survey .sg-mobile-optimized .sg-question .sg-question-options table[class^=”sg-“] tr td {
display: block;
width: 95%;
padding: 0px;
text-align: center;
/* align-self: flex-end; */
align-items: center;
}
.sg-survey .sg-mobile-optimized .sg-content-wrap, .sg-survey .sg-mobile-optimized .sg-wrapper, .sg-survey .sg-mobile-optimized .sg-body-int, .sg-survey .sg-mobile-optimized .sg-header-int, .sg-survey .sg-mobile-optimized .sg-page-title, .sg-survey .sg-mobile-optimized .sg-title, .sg-survey .sg-mobile-optimized .sg-title span, .sg-survey .sg-mobile-optimized .sg-page-title-wrap, .sg-survey .sg-mobile-optimized .sg-page-image-wrap1, .sg-survey .sg-mobile-optimized .sg-header, .sg-survey .sg-mobile-optimized .sg-header-hook-1, .sg-survey .sg-mobile-optimized .sg-header-hook-2, .sg-survey .sg-mobile-optimized .sg-content, .sg-survey .sg-mobile-optimized .sg-footer, .sg-survey .sg-mobile-optimized .sg-footer-hook-1, .sg-survey .sg-mobile-optimized .sg-right-col, .sg-survey .sg-mobile-optimized .sg-footer-hook-2 {
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
/* margin-bottom: 0px; */
/* padding-bottom: 0px; */
max-height: 100%px;
margin-top: 0px;
padding-top: 0px;
}
.sg-survey body.sg-mobile-optimized .sg-type-table-radio .sg-question-options label, .sg-survey body.sg-mobile-optimized .sg-type-table-card-sort-closed .sg-question-options label, .sg-survey body.sg-mobile-optimized .sg-type-table-card-sort .sg-question-options label, .sg-survey body.sg-mobile-optimized .sg-type-table-matrix .sg-question-options .sg-mobilize-label label, .sg-survey body.sg-mobile-optimized .sg-type-table-checkbox .sg-question-options label, .sg-survey body.sg-mobile-optimized .sg-question.sg-type-radio .sg-question-options label, .sg-survey body.sg-mobile-optimized .sg-question.sg-type-checkbox .sg-question-options label, .sg-survey body.sg-mobile-optimized .sg-question.sg-type-rank-table .sg-question-options th label, .sg-survey body.sg-mobile-optimized .sg-question.sg-type-rank-table .sg-question-options td label {
color: #000000;
background-color: rgba(255,255,255,0.00);
border-color: rgba(0, 0, 0, 0);
}/*
.sg-mobile-optimized .sg-question {
padding-bottom: 0px !important;
}
.sg-mobile-optimized .sg-question-set {
height:auto !important;
}*/
.sg-survey .sg-mobile-optimized.sg-rtl .sg-type-table-radio .sg-question-options label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-type-table-card-sort-closed .sg-question-options label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-type-table-card-sort .sg-question-options label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-type-table-matrix .sg-question-options .sg-mobilize-label label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-type-table-checkbox .sg-question-options label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-question.sg-type-radio .sg-question-options label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-question.sg-type-checkbox .sg-question-options label, .sg-survey .sg-mobile-optimized.sg-rtl .sg-question.sg-type-rank-table .sg-question-options th label {
text-align: right;
padding: 1px 40px 1px 1px;
}
html,body,.sg-int-blurred .sg-question-set > .sg-question,.sg-survey *
{
transition: opacity 0s ease-in-out;
-moz-transition: opacity 0s ease-in-out;
-webkit-transition: opacity 0s ease-in-out;
-moz-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
animation: none !important;
-webkit-animation: none !important;
}
.sg-page-rotateSlideOutPrev,.sg-page-rotateSlideOutNext {
display:none;
}
I’m not exactly sure what you are trying to do – can you elaborate on your question? The next and back buttons should automatically be at the bottom of any survey page…
