Naja, es ist das übliche Procedere.
Du nimmst ein Webdevelopment-Tool, das ja im Browser enthalten ist.
(Firefox: CTRL-SHIFT-C, Chrome: CTRL-SHIFT-I)
und untersucht das Objekt.
Und in
1 siehst Du, dass hier ein Input-Element mit der Klasse ".form-control" benutzt wird.
Unten in
2 siehst Du, dass ich bereits (rechts) in der "custom.css" etwas hinzugefügt habe, nämlich
Code:
.long input.form-control {
width: 100%;
}
Also bekommt dieses Element nun eine Länge von 100% verpasst; außerdem wird es aber beschränkt auf Elemente die auch die Klasse ".long" haben, damit nicht plötzlich jedes Textfeld riesig wird.
Und "long" wird dann wiederum im Fragendesigner im Feld "css-Klassen" eingetragen.
Das wäre jetzt schon schön, wenn nicht um das Textfeld noch ein Container wäre der Klasse(n) ".form-group.text-item.other-text-item".
Dann setzt man den eben auch auf eine gewisse Länge und das war's.
Code:
.long .form-group.text-item.other-text-item {
width: 100%;
}
Jetzt bestimmt der Container die Gesamtlänge, und das erste (input) bestimmt die Länge innerhalb des Containers.
Mit der Einstellung für beide von 100% sieht es m.E. nicht gut aus
Daher sollte der Container - je nach Länge des "Sonstigen"-Textes - vielleicht auf 70% gesetzt werden; musst Du ausprobieren.
Ein interessanter Workaround ist auch, dass man hinter dieser Frage eine Frage vom Typ "kurzer Text" platziert, welche mit diesem kleinen javascript-snippet in die erste Frage eingefügt wird.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// The "Other" sub-question code
var otherCode = 'SQ008';
// Identify this question
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
// Move the next question
$('.answer-item[id$="X'+qID+otherCode+'"]', thisQuestion).append(nextQuestion);
});
</script>
<style type="text/css">.answer-item .question-container {
margin: 0 0 0 -20px;
border: 0 none;
background: transparent;
}
.answer-item .question-title-container,
.answer-item .question-valid-container {
display: none;
}
.answer-item .answer-container,
.answer-item .answer-item {
padding: 0;
padding-left: 20px;
}
.answer-item .answer-container {
border: 0;
}
</style>
Hier wird ja der "Sonstigen"-Code hart eingegeben, in diesem Fall "SQ008"; und diese Textfrage muss auch die Relevanzgleichung "Q1_SQ008=="Y"" bekommen.
Viel Erfolg
Joffm