- Posts: 56
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Question borders and alignment
- AntPIC
- Topic Author
- Offline
- Senior Member
Less
More
7 months 3 weeks ago #249981
by AntPIC
Question borders and alignment was created by AntPIC
LimeSurvey Cloud
Versione 3.28.66
==================
I have
1. multi short text (nome e cognome)
1. short text with validation (email)
1. short text with validation (codice fiscale)
1. drop down
How Can I Allign and hide the borders?
I put this code in my custom.css
.no-question { border-top:transparent none; }
.no-question .question-title-container { display:none; }
.no-question .question-valid-container { display:none; }
.no-question .answer-container {
padding-top: 0em;
padding-bottom: 0em;
}
.no-bottom { border-bottom:transparent none;margin-bottom:0; }
.no-bottom .answer-container {
padding-bottom: 0em;
and another code
@media only screen and (min-width: 768px) {
.inline-answers-question .question-title-container.col-xs-12,
.inline-answers-question .question-valid-container.col-xs-12,
.inline-answers-question .answer-container.col-xs-12 {
width: auto;
}
.inline-answers-question .question-valid-container,
.inline-answers-question .answer-container {
padding-top: 1em;
}
.inline-answers-question .answer-container > div {
padding-top: 0;
}
.inline-answers-question .answer-container .ls-answers {
padding-top: 0;
}
.inline-answers-question .answer-container .answer-item {
display: block;
float: left;
clear: none;
margin-bottom: 0;
}
}
Versione 3.28.66
==================
I have
1. multi short text (nome e cognome)
1. short text with validation (email)
1. short text with validation (codice fiscale)
1. drop down
How Can I Allign and hide the borders?
I put this code in my custom.css
.no-question { border-top:transparent none; }
.no-question .question-title-container { display:none; }
.no-question .question-valid-container { display:none; }
.no-question .answer-container {
padding-top: 0em;
padding-bottom: 0em;
}
.no-bottom { border-bottom:transparent none;margin-bottom:0; }
.no-bottom .answer-container {
padding-bottom: 0em;
and another code
@media only screen and (min-width: 768px) {
.inline-answers-question .question-title-container.col-xs-12,
.inline-answers-question .question-valid-container.col-xs-12,
.inline-answers-question .answer-container.col-xs-12 {
width: auto;
}
.inline-answers-question .question-valid-container,
.inline-answers-question .answer-container {
padding-top: 1em;
}
.inline-answers-question .answer-container > div {
padding-top: 0;
}
.inline-answers-question .answer-container .ls-answers {
padding-top: 0;
}
.inline-answers-question .answer-container .answer-item {
display: block;
float: left;
clear: none;
margin-bottom: 0;
}
}
Please Log in to join the conversation.
- AntPIC
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 56
- Thank you received: 0
7 months 3 weeks ago #249984
by AntPIC
Replied by AntPIC on topic Question borders and alignment
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12959
- Thank you received: 3986
7 months 3 weeks ago #249988
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Question borders and alignment
Well,
just wanted to tell you that yyou should use the same question type "multiple short text"
And I do not see any issue with (of course you may adapt)
and an additional (to align and to narrow the spaces)
To get
And you also should use the same question type for your drop-downs
Here the script
just wanted to tell you that yyou should use the same question type "multiple short text"
And I do not see any issue with (of course you may adapt)
Code:
.no-question{border-top:0;} .no-question .question-title-container{display:none;} .no-question .question-valid-container{display:none;} .no-bottom{border-bottom:0;margin-bottom:0;} .no-question .answer-container { padding-top: 0em; padding-bottom: 0.5em; } .no-bottom .answer-container { padding-bottom: 0em; }
and an additional (to align and to narrow the spaces)
Code:
<style type="text/css"> label.control-label { text-align: left !important; } ul.ls-answers { margin-bottom: 0em; } .ls-answers { padding-bottom: 0; } </style>
To get
And you also should use the same question type for your drop-downs
Here the script
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:complete',function() { var qID = {QID}; var inputNum = 1; // Adapt to your needs // Define the select element (dropdown) var prov1 = '<select id="prov1" class="form-control">\ <option value="">--Please, select--</option>\ <option value="1">Option 1</option>\ <option value="2">Option 2</option>\ <option value="3">Option 3</option>\ <option value="4">Option 4</option>\ </select>'; // Hide the text input $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').hide(); // Insert the select elements if($('#question'+qID+' .question-item:eq('+(inputNum-1)+') select').length == 0) { $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov1); } // Initially select an option if the question has already been answered $('#question'+qID+' select').each(function(i) { if($.trim($(this).next('input[type="text"]').val()) != '') { $(this).val($.trim($(this).next('input[type="text"]').val())); } }); // Listener on the dropdowns - insert selected values into hidden text input $('#question'+qID+' select').change(function() { var thisInput = $(this).next('input[type="text"]'); $(thisInput).val($(this).val()); checkconditions($(thisInput).attr('value'), $(thisInput).attr('name'), 'text'); }); // Some styles $('#question'+qID+' select').css({ 'margin':'0.3em 0 0 0' }); }); </script>
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- AntPIC
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 56
- Thank you received: 0
7 months 3 weeks ago #250001
by AntPIC
Replied by AntPIC on topic Question borders and alignment
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12959
- Thank you received: 3986
7 months 3 weeks ago #250009
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Question borders and alignment
1.
if you put it into "custom.js" you must not surround with <script></script>
Therefore the error sign.
2.
What makes you put it into "custom.js".
As you see the script is customized for this one question.
Such scripts you should put into the source code of the question.
3.
The rest are just warnings.
if you put it into "custom.js" you must not surround with <script></script>
Therefore the error sign.
2.
What makes you put it into "custom.js".
As you see the script is customized for this one question.
Such scripts you should put into the source code of the question.
3.
The rest are just warnings.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- AntPIC
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 56
- Thank you received: 0
7 months 3 weeks ago #250022
by AntPIC
Replied by AntPIC on topic Question borders and alignment
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12959
- Thank you received: 3986
7 months 3 weeks ago #250026
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Question borders and alignment
Sorry, you seem to have no rights to insert javascript.
Though you said you are working with a installation that is hosted at LimeSurvey GmbH.
Here you have these rights.
Or is the installation something else?
Insert a simple test
If it pops up, fine, otherwise you have to find a different approach.
And why do you change things?
In the original script there is
var qID = {QID};
This has not to be changed as {QID} always contains the actual questionID
And why did you change
var prov1 = '<select id="prov1" class="form-control">\
to
var Prova = '<select id="Prova" class="form-control">
but did not change it here
$('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov1);
Though you said you are working with a installation that is hosted at LimeSurvey GmbH.
Here you have these rights.
Or is the installation something else?
Insert a simple test
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:complete',function() { alert("Hello, javascript speaking"); });
And why do you change things?
In the original script there is
var qID = {QID};
This has not to be changed as {QID} always contains the actual questionID
And why did you change
var prov1 = '<select id="prov1" class="form-control">\
to
var Prova = '<select id="Prova" class="form-control">
but did not change it here
$('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov1);
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- AntPIC
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 56
- Thank you received: 0
7 months 3 weeks ago #250029
by AntPIC
Replied by AntPIC on topic Question borders and alignment
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12959
- Thank you received: 3986
7 months 3 weeks ago #250034
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Question borders and alignment
Sorry, my mistake.
Of course you have to close the text script with </script>
I thought you had noticed that. All scripts here are surrounded by <script></script> tags.
Of course you have to close the text script with </script>
I thought you had noticed that. All scripts here are surrounded by <script></script> tags.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- AntPIC
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 56
- Thank you received: 0
7 months 3 weeks ago #250039
by AntPIC
Replied by AntPIC on topic Question borders and alignment
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12959
- Thank you received: 3986
7 months 3 weeks ago #250046
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Question borders and alignment
So you did not see this (or something similar, depends on browser)?
Then you can't use javascript.
By the way:
Here the sample survey I showed.
Import and run.
If it doesn't show the drop-down in the last subquestion insted some text of the script in the question text, bad luck.
Consider something else.
Joffm
Then you can't use javascript.
By the way:
Here the sample survey I showed.
Import and run.
If it doesn't show the drop-down in the last subquestion insted some text of the script in the question text, bad luck.
Consider something else.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.