Formbuilder "Auswahlfeld"

[Tommy Herrmann]

wie meinst Du das jetzt - mache mal einen Screenshot - oder meinst Du beim Aufklappen?

Dann musst Du den Block größe machen oder dem block eine "padding-bottom" (Innenabstand-Unten) geben.

z.B. dem <div> Bereich in dem das Formular liegt:

style="padding-bottom: 150px;"

Wenn wir fertig sind muss Mobirise hier nur noch abschreiben

[Tommy Herrmann]

Es gibt von Bootstrap einen online "Form Builder" - geil

https://bootstrapformbuilder.com/

Das teste ich morgen mal - das habe ich gerade erst entdeckt. Da müsste man dann nur noch den Code in einen Mobirise-Block kopieren.

[inno]

Hier nochmal der Screenshot!

[inno]

... hat sich leider nichts geändert!

[Tommy Herrmann]

Ich weiß immer noch nicht was Du meinst

... ach Du meinst wahrscheinlich das "Test1" (ich dachte Du meinst das gesamte Dropdown der Auswahl).

Hast Du denn dort auch ein:

Code: Alles auswählen

padding-left: 0.5rem;

eingetragen und nicht etwa:

Code: Alles auswählen

padding: 0.5rem;

Mit einem Screenshot kann ich nicht so furchtbar viel anfangen, eigentlich müsstest Du das in ein Testverzeichnis am Server publizieren, damit man in den Quelltext gucken kann.

[inno]

... "Test 1" sitzt doch viel näher an unteren der Linie als die andern Namen "Email" , ...
Grüße

[Tommy Herrmann]

ja - keine Ahnung warum - ich müsste den Quelltext sehen.

[inno]

Hier der Quelltext:

Code: Alles auswählen

<section class="form" group="Form" plugins="formstyler, datepicker">
    <mbr-parameters>
        <header>Size</header>
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <header>Style</header>
        <input type="checkbox" name="customStyle" title="Custom Style" checked>
        <input type="checkbox" name="disableElements" title="Disable Control">
        <input type="color" name="fieldColor" title="Field" value="#ffffff" condition="customStyle">
        <input type="color" name="fieldHover" title="Field Hover" value="#efefef" condition="customStyle">
        <input type="color" name="borderColor" title="Border" value="#cccccc" condition="customStyle">
        <input type="color" name="borderHover" title="Border Hover" value="#cccccc" condition="customStyle">
        <input type="color" name="formText" title="Text" value="#000000" condition="customStyle">
        <input type="color" name="formFocusText" title="Text Focus" value="#232323" condition="customStyle">
        <input type="color" name="formPlaceholder" title="Placeholders" value="#c1c1c1" condition="customStyle">
        <input type="color" name="formFocusPlaceholder" title="Placeholders Focus" value="#c1c1c1" condition="customStyle">
        <header>Background</header>
        <fieldset type="background" name="bg">
            <input type="image" title="Background Image" value="../assets/background.jpg">
            <input type="color" title="Background Color" value="#ffffff" selected>
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#ffffff" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.4" condition="overlay && bg.type !== 'color'">
    <input type="hidden" name="usedRecaptcha" value="false"></mbr-parameters>
    <div class="mbr-overlay" mbr-if="(overlay && bg.type=='image')"></div>
    <div class="container">
        <div class="row">
            <div mbr-form class="col-lg-8 mx-auto mbr-form">
<!--Formbuilder Form-->
<form action name="Form Name" method="POST" data-rcpha_sitekey="" data-rcpha_secretkey="" class="mbr-form form-with-styler">
<div class="form-row">
<div hidden="hidden" data-form-alert class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger class="alert alert-danger col-12">Oops...! some problem!</div>
</div>
<div class="dragArea form-row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h4 mbr-theme-style="display-5" class="mbr-fonts-style">Welcome to Form Builder</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<hr>
</div>
<div data-for="name" class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="text" name="name" placeholder="Name" data-form-field="name" mbr-theme-style="display-7" class="form-control" value>
</div>
<div data-for="email" class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="email" name="email" placeholder="Email" data-form-field="email" mbr-theme-style="display-7" class="form-control" value>
</div>
<div data-for="select" class="col-lg-12 col-md-12 col-sm-12 form-group">
<select name="select" data-form-field="select" mbr-theme-style="display-7" class="form-control">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
</div>
<div data-for="phone" class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="tel" name="phone" placeholder="Phone" pattern="*" data-form-field="phone" mbr-theme-style="display-7" class="form-control" value>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group" data-for="message">
<textarea name="message" placeholder="Message" data-form-field="message" mbr-theme-style="display-7" class="form-control"></textarea>
</div>
<div mbr-buttons="true" mbr-theme-style="display-7" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd" class="col-auto">
<a data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd" type="submit" class="btn btn-primary">Submit</a>
</div>
</div>
</form><!--Formbuilder Form-->
</div>
        </div>
    </div>
</section>

[Tommy Herrmann]

Moin,

Du - ich befürchte da musst Du mal an den Support von Mobirise schreiben:

support@mobirise.com

... denn bei mir sitzt das ebenso richtig wie mein Auswahlfeld.

Ich habe mal Deinen Formular-Teil in mein Formular kopiert und so sieht das aus:

Hier ist mein Code von meinem Formular-Teil, kannst das ja mal umgekehrt auch versuchen. Wahrscheinlich sitzt das dann bei Dir ebenso falsch mit meinem Code.

Code: Alles auswählen

<!--Formbuilder Form-->
<form action name="Form Name" method="POST" class="mbr-form form-with-styler">
<div class="form-row">
<div hidden="hidden" data-form-alert class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger class="alert alert-danger col-12">Oops...! some problem!</div>
</div>
<div class="dragArea form-row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h4 mbr-theme-style="display-5" class="mbr-fonts-style">Welcome to Form Builder</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<hr>
</div>
<div data-for="name" class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="text" name="name" placeholder="Name" data-form-field="name" mbr-theme-style="display-7" class="form-control" value>
</div>
<div data-for="email" class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="email" name="email" placeholder="Email" data-form-field="email" mbr-theme-style="display-7" class="form-control" value>
</div>
<div data-for="select" class="col-lg-12 col-md-12 col-sm-12 form-group">
<label mbr-text mbr-theme-style="display-7" for="select" class="form-control-label mbr-fonts-style">Bitte Auswahl treffen</label>
<select name="select" data-form-field="select" mbr-theme-style="display-7" required="required" class="form-control">
<option value="Select">Auswahl</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Fourth">Fourth</option>
</select>
</div>
<div data-for="message" class="col-lg-12 col-md-12 col-sm-12 form-group">
<textarea name="message" placeholder="Message" data-form-field="message" mbr-theme-style="display-7" class="form-control"></textarea>
</div>
<div class="col-auto" mbr-buttons="true" mbr-theme-style="display-7" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><a type="submit" class="btn btn-primary" data-app-placeholder="Type Text">Submit</a></div>
</div>
</form><!--Formbuilder Form-->

Hast Du schon die neueste Software v5.5.0 schon installiert?

viewtopic.php?p=4995#p4995

Das solltest Du tun. Gucke auch unter den Erweiterungen, ob es ein Update (gedrehter Pfeil) für den "Form Builder" bei Dir gibt.

[inno]

... ich habe noch die V 5.4.1.
Installiere gleich mal die aktuelle Version!

[inno]

... ist installiert. Haut leider auch nicht hin! Komisch!
Funktionieren bei dieser Version die neuen M5-Themes?

[inno]

... padding-bottom funktioniert leider auch nicht! -top geht.
Kann man es ausmitteln?

[inno]

Lösung gefunden bei den Static Styles:

.jq-selectbox__select {
padding: 0em 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 5px; }

Hier musst ich nur den padding-top Wert anpassen!

1000 Dank für deine tolle Hilfe!!!

[Tommy Herrmann]

prima

... aber schon komisch, dass sich das bei Dir anders verhält als bei mir

Mobirise scheint ein eigenes "ich" zu entwickeln