Profil von Jathe677

Jathe677

27.01.2025, 16:04

Hey, also ich habe ein project in der dynamisch html Seiten generiert werden. Eine Seite sieht folgendermaßen aus:


<body tabindex="0" class=" jspsych-display-element" style="margin: 0px; height: 100%; width: 100%;">
    <div id="jspsych-progressbar-container"><span>Completion Progress</span>
        <div id="jspsych-progressbar-outer">
            <div id="jspsych-progressbar-inner" style="width: 12.5%;"></div>
        </div>
    </div>
    <div class="jspsych-content-wrapper">
        <div id="jspsych-content" class="jspsych-content">
            <style id="jspsych-survey-multi-choice-css">
                .jspsych-survey-multi-choice-question {
                    margin-top: 3em;
                    margin-bottom: 2em;
                    text-align: left;
                    height: 75vh
                }

                .jspsych-survey-multi-choice-text span.required {
                    color: darkred;
                }

                .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {
                    text-align: center;
                }

                .jspsych-survey-multi-choice-option {
                    line-height: 2;
                }

                .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {
                    display: inline-block;
                    margin-left: 1em;
                    margin-right: 1em;
                    vertical-align: top;
                }

                label.jspsych-survey-multi-choice-text input[type='radio'] {
                    margin-right: 1em;
                }

                html {
                    scroll-behavior: smooth;
                }

                #jspsych-progressbar-container {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 1000;
                }

                .bottom-spacer {
                    height: 10vh
                }
            </style>
            <form id="jspsych-survey-multi-choice-form">
                <div id="jspsych-survey-multi-choice_container_0" class="question-container"></div>
                <div id="jspsych-survey-multi-choice-0" class="jspsych-survey-multi-choice-question">
                    <p class="jspsych-survey-multi-choice-text survey-multi-choice"><b>Gender: Please select your
                            gender<b></b></b><span class="required">*</span></p>
                    <div id="jspsych-survey-multi-choice-option-0-0" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-0" value=" Male" required=""><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-0">
                            Male</label></div>
                    <div id="jspsych-survey-multi-choice-option-0-1" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-1" value=" Female"><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-1">
                            Female</label></div>
                    <div id="jspsych-survey-multi-choice-option-0-2" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-2" value=" Diverse"><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-2">
                            Diverse</label></div>
                </div><input type="submit" class="jspsych-survey-multi-choice jspsych-btn" value="Continue">
                <div class="bottom-spacer"></div>
            </form>
        </div>
    </div>
</body>

Jetzt versuche ich sobald ein solches form in der html Seite ist, alles linksbündig ist. Aber nur dann. Ich bekomme es leider nicht hin. Habe es mit javascipt und text-align gemacht, funktioniert aber nicht.

...zum Beitrag

Antwort

von Jathe677

27.01.2025, 16:05

Hier noch mein stylesheet:

 @import urlhttps://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

 /* Container holding jsPsych content */

 img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
 }

 .jspsych-display-element {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
 }

 .jspsych-display-element:focus {
   outline: none;
 }

 .jspsych-content-wrapper {
   display: flex;
   margin: auto;
   flex: 1 1 100%;
   width: 100%;
 }

 .jspsych-content { 
/*    max-width: 95%; /* this is mainly an IE 10-11 fix */
  max-width: 95%;
  text-align: center;
  margin: auto; /* this is for overflowing content */
 }

 .jspsych-top {
   align-items: flex-start;
 }

 .jspsych-middle {
   align-items: center;
 }

/* fonts and type */

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  overflow-x: hidden;

}

/* Form elements like input fields and buttons */

.jspsych-display-element input[type="text"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 14px;
}

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
  /*display: inline-block;*/
  padding: 6px 12px;
  margin: 0px;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  width: 50%;
  height: 60%;
}

.jspsych-btn:hover {
  background-color: #ddd;
  border-color: #aaa;
}

.jspsych-btn:disabled {
  background-color: #eee;
  color: #aaa;
  border-color: #ccc;
  cursor: not-allowed;
}

/* jsPsych progress bar */

#jspsych-progressbar-container {
  color: #555;
  border-bottom: 1px solid #dedede;
  background-color: #f9f9f9;
  margin-bottom: 0.5vh; /*das*/
  text-align: center;
  padding: 8px 0px;
  width: 100vw;
  line-height: 1/3*5vh; /*das*/
}
#jspsych-progressbar-container span {
  font-size: 14px;
  padding-right: 14px;
}
#jspsych-progressbar-outer {
  background-color: #eee;
  width: 50%;
  margin: auto;
  height: 2vh;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#jspsych-progressbar-inner {
  background-color: #aaa;
  width: 0%;
  height: 100%;
}

/* Control appearance of jsPsych.data.displayData() */
#jspsych-data-display {
  text-align: left;
}

#jspsych-survey-multi-choice-next{
vertical-align: middle;
text-align: center;
margin-bottom: 1em;
}
.jspsych-survey-multi-choice-question {
 margin-top: 2em;
 margin-bottom: 2em;
}
.jspsych-survey-multi-choice-text span.required {
 color: darkred;
}
.jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text{
 text-align: center;
}

#jspsych-survey-multi-select-next {
  vertical-align: middle;
  text-align: center;
  margin-bottom: 1em; 
}

.jspsych-survey-multi-select-question {
  margin-top: 0em; 
  margin-bottom: 2em; 
  text-align: left;
}

.jspsych-survey-multi-select-text span.required {
  color: darkred;
}

.jspsych-survey-multi-select-horizontal .jspsych-survey-multi-select-text {
  text-align: center; 
}

...zur Antwort