Von Version 8.4
bearbeitet von gru
am 05.10.2022, 13:32
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 11.7
bearbeitet von gru
am 02.03.2023, 09:03
Änderungskommentar: Update document after refactoring.

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Formular per AJAX einbinden
1 +IncludeExternalContext
Inhalt
... ... @@ -18,15 +18,15 @@
18 18   <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
19 19   <script src="https://demo7.formcycle.eu/formcycle/form/include.js?auto=1&form_container_id=content&form_id=564&form_base=https://demo7.formcycle.eu/formcycle"></script>
20 20   </head>
21 -
22 - <body class="body">
21 +
22 + <body class="body">
23 23   <!-- this is the div where the form will be placed into -->
24 24   <div id="content"></div>
25 25   </body>
26 26   </html>
27 - {{/code}}
27 +{{/code}}
28 28  
29 -Die Einbindung erfolgt hier zur Demonstration in eine eigene HTML-Seite in einem iframe:
29 +Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
30 30  
31 31  {{html clean="false"}}
32 32   <style type="text/css">
... ... @@ -53,12 +53,25 @@
53 53   text-align:center;
54 54   }
55 55  
56 - span.box{
57 - display: block;
58 - padding: 20px;
56 + .resizer {
57 + display:flex;
58 + margin:0;
59 + padding:0;
60 + resize:both;
61 + overflow:hidden
59 59   }
63 +
64 + .resizer > .resized {
65 + flex-grow:1;
66 + margin:0;
67 + padding:0;
68 + border:0;
69 + height: inherit;
70 + }
71 + .border { border:4px dashed black; }
60 60   </style>
61 61  
62 -
63 - <iframe id="customerdemo" style="width:100%; height:900px" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
74 + <div class="resizer border" style="height: 1000px;">
75 + <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
76 + </div>
64 64  {{/html}}