Now I have the problem that the slider labels are not displayed correctly on smartphones. Any ideas how to solve that? Please have look at the attached basic example.
I only have one answer column and I don't want the slider to use the whole width of the column. That's why I changed its width with the following code
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() { //pageload ready?
// Push the text input widths to XX% of their parent containers
$( 'div#question41522 table.question input[type="text"]' ).css({ 'width':'50%' });
$( 'div#question41522 table.question tbody th' ).css({ 'text-align':'center' });
});
</script>
If I float the left and right labels, they are displayed on the far left and right of the answer column, i.e. not near the ends of the slider. That's why I used the padding. Do you have a hint for a better way to change the slider width?
