Hi,
first some hints.
1. It's not necessary to enter the "dropdown"-script several times.
Code:
// Insert selects
$('.answer-item.answer_cell_3', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please select...</option>\
<option value="1">Option1</option>\
<option value="2">Option2</option>\
<option value="3">Option3</option>\
<option value="4">Option4</option>\
</select>');
$('.answer-item.answer_cell_4', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please select...</option>\
<option value="1">Value1</option>\
<option value="2">Value2</option>\
<option value="3">Value3</option>\
<option value="4">Value4</option>\
<option value="5">Value5</option>\
<option value="6">None of the above</option>\
</select>');
is sufficient.
2. Do you really want to store the text of the answer options.
To store the values change this
Code:
// Returning to page
$('.with-select input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputText = $.trim($(this).val());
$('select.inserted-select', thisCell).val(inputText);
});
to
Code:
// Returning to page
$('.with-select input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputText = $.trim($(this).val());
var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
$('select.inserted-select', thisCell).val(selectval);
});
3. In my opinion it is better to set the column of the slider in the variable
Code:
// The column to receive the sliders
var sliderColumn = 5;
...
var sliderColumn = 6;
instead of setting it always to "1" and adding an offset at several places.
Well, now your question
1. You did not set any slider width. If you set the label width to "hidden" and the slider width to 100% the next issue occurs.
2. Because the column is rather small the bootstrap media query is used which sets the width of the slider container to 66.6%.
You have to adjust this.
Code:
@media (min-width: 768px) {
.col-md-8 {
flex: 0 0 auto;
flex-grow: 0;
width: 100% !important;
}
And here the result (styling if the slider is a relict of an old survey of mine)
And your lss back (I removed the "autocomplete" part.)
BTW: Why didn't you use one of the several "autocomplete" examples of the forum?
Joffm
Topic Author
