Wie kann ich Javascript verwenden, um ein Dropdown-Menü auf einer Seite zu zentrieren?

Question

Ich verwende eine Umfrage-Software von Drittanbietern (Qualtrics). Ich habe eine Umfragefrage und die Antwort ist ein Dropdown-Menü. Sie können dies am unteren Rand der Seite bei alsquest.org und im Bild unten sehen.

Ich mag die Dropdown-Menü unter dem Fragetext zu zentrieren. (Wenn das nicht klappt, wäre es eine andere Option, das Dropdown-Menü so einzurücken, dass es mit dem restlichen Text übereinstimmt. Ich glaube, der aktuelle Einzug ist 120px.)

Ich habe Zugriff auf den HTML-Code für den Fragetext, aber die einzige Möglichkeit, das Antwort-Dropdown-Menü zu ändern, ist die Verwendung von JavaScript. Qualtrics erlaubt es Ihnen, JavaScript hinzuzufügen, aber ich bin kein Programmierer, also habe ich keine Ahnung, welchen Code ich verwenden soll. Dies ist der Code-Shell, die sie für die JavaScript bieten:

Qualtrics.SurveyEngine.addOnload(function() 
 
{ 
 
\t /*Place Your JavaScript Here*/ 
 

 
});

Meine Frage ist, was JavaScript-Code muss ich dort Mitte setzen (oder Gedankenstrich) in der Dropdown-Menü? Irgendwelche Vorschläge oder Fragen würden geschätzt.

Answer 1

Um dies in JavaScript zu tun, müssen Sie das HTML-Element von der Seite abrufen und dann den CSS-Stil festlegen. Man könnte es wie folgt tun:

var dropDown = document.getElementById("the-dropdown"); 
dropDown.className = "dropdown-css-class"; 

dann in einer CSS-Datei auf der HTML-Seite enthalten, die Sie würde die Klasse definieren müssen:

.dropdown-css-class { 
    margin-left: 120px; 
} 

oder so:

var dropDown = document.getElementById("the-dropdown"); 
dropDown.style["margin-left"] = "120px"; 

Ohne den HTML-Code zu sehen, kann ich nur raten, wie Sie den Drop-down-Bereich zentrieren oder anderweitig ausrichten würden, aber das sollte Sie weiterbringen. Sie können mit jsfiddle experimentieren.

Answer 2

Ich denke, Sie können CSS durch jQuery wie folgt ändern: Zuerst müssen Sie ID oder Klasse des Dropdown-Menüs finden. Danach können Sie den Code jquery-Code wie folgt hinzufügen:

oder was immer Sie für CSS wollen.

Aber wenn Sie mehr Dropdown-Menüs haben. Sie sollten Klasse bekommen und sagen

$("CLASS NAME").on('click', function(){ 

and here get id from clicked one and then use above code for changing css 

}); 

Answer 3

Dies ist am besten mit CSS getan. In Ihrem Fall können Sie den folgenden Code in dem „Custom CSS“ der Advanced Look and Feel Settings hinzufügen:

#QID2 > div.Inner.BorderColor.DL > div > fieldset > div { 
    text-align: center !important; 
} 

Beachten Sie, dass dies nur für diesen speziellen Drop-Down in dieser spezifischen Umfrage arbeitet (Nichts anderes betroffen sein wird). Wenn Sie Ihr Umfragethema ändern, funktioniert es möglicherweise nicht mehr für Sie. Passen Sie also auf.

Als eine FYI arbeitete ich für ein Jahr im Qualtrics Support.