I think I have this mostly figured out and wanted to confirm.
Right now the complete button is stored in the footer container and it's hard to do styles (like the screenshot) without custom CSS.
I think adding a custom widget is the answer, as that will be in with the questions and can be placed with the isStartWithNewLine property and I can let a user customize it a bit more.
My question is, is this the right approach in the widget's afterRender
function? It feels a bit strange to go from the question to surveyImpl
to get to the completeLastPage()
function. It works in the v2 Test Survey tab. If this is the correct approach, please let me know.
JavaScriptafterRender: function (question, el) {
var buttonSubmit = el.getElementsByTagName("button")[0];
var rootQuestion = question;
if (!question.isReadOnly){
buttonSubmit.onclick = function(){
rootQuestion.surveyImpl.completeLastPage();
console.log("clicked!");
}
}
To add to this, I found that do the below to property set a
height:100%
so that the button was the correct size. An extra<div>
was being added that wasn't in myhtmlTemplate
either.afterRender: function (question, el) { el.parentNode.classList.add("cd-button-container"); el.parentNode.parentNode.classList.add("cd-button-container"); el.classList.add("cd-button-container-parent");`