Browse code

Make sure non widget elements inside form grid have full container width

Benjamin Roth authored on24/01/2023 14:14:15
Showing2 changed files
... ...
@@ -36,6 +36,9 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
36 36
 	grid-template-columns: repeat(12, 1fr);
37 37
 	align-items: end;
38 38
 }
39
+.formbody > *:not(.widget) {
40
+	grid-column: auto / span 12;
41
+}
39 42
 .formbody > fieldset {
40 43
 	grid-column-start: 1;
41 44
 	grid-column: auto / span 12;
... ...
@@ -1 +1 @@
1
-input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea,select{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.widget input.captcha{max-width:4em}.formbody>fieldset{clear:left}.formbody>fieldset legend{color:inherit;font-size:123%;line-height:2;font-weight:normal;border-bottom:inherit 3px solid;margin-bottom:1em}.widget .radio_container legend,.widget .checkbox_container legend{color:inherit;font-size:100%;font-weight:normal;border-bottom:0;display:block;margin-bottom:.4em;line-height:1.5em}.widget .checkbox_container label,.widget .radio_container label{font-weight:normal;display:inline;margin-bottom:0}.widget .checkbox_container>span,.widget .radio_container>span{display:block}.widget.headline{margin-top:1em;font-size:108%;font-weight:bold;min-height:1.5em}.widget{padding:0 10px;margin-bottom:.5em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;min-height:4em;float:left;width:100%}.widget.cbx{min-height:1.5em;height:1.5em;padding:4px 10px}.widget label{display:block;margin-bottom:.4em;line-height:1.5em}.widget.error input,.widget.error select,.widget.error textarea{border-color:#e23e15}.widget p.error{font-size:85%;margin-top:-0.4em;margin-bottom:.4em}.widget.error .errortip{background-color:#e23e15;border-bottom-left-radius:50%;border-bottom-right-radius:50%;border-top-left-radius:50%;border-top-right-radius:50%;color:#fff;cursor:help;display:block;float:right;font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:normal;height:15px;line-height:13px;margin-top:3.25px;text-align:center;vertical-align:top;width:15px}.submit_container{min-height:2.1em}.widget.w10{float:left;width:10%}.widget.w11{float:left;width:11.111%}.widget.w15{float:left;width:15%}.widget.w16_5{float:left;width:16.6665%}.widget.w20{float:left;width:20%}.widget.w22{float:left;width:22.222%}.widget.w25{float:left;width:25%}.widget.w30{float:left;width:30%}.widget.w33{float:left;width:33.333%}.widget.w35{float:left;width:35%}.widget.w40{float:left;width:40%}.widget.w44{float:left;width:44.444%}.widget.w45{float:left;width:45%}.widget.w50{float:left;width:50%}.widget.w55{float:left;width:55%}.widget.w60{float:left;width:60%}.widget.w65{float:left;width:65%}.widget.w66{float:left;width:66.666%}.widget.w70{float:left;width:70%}.widget.w75{float:left;width:75%}.widget.w80{float:left;width:80%}.widget.w85{float:left;width:85%}.widget.w90{float:left;width:90%}.widget.w95{float:left;width:95%}.widget.w100{float:left;width:100%}.widget.clr,.formbody>fieldset{clear:left}@media screen and (max-width:43em){.widget.w10,.widget.w11,.widget.w15,.widget.w16_5,.widget.w20,.widget.w22,.widget.w25,.widget.w30,.widget.w33,.widget.w35,.widget.w40,.widget.w44,.widget.w45,.widget.w50,.widget.w55,.widget.w60,.widget.w65,.widget.w66,.widget.w70,.widget.w75,.widget.w80,.widget.w85,.widget.w90,.widget.w95,.widget.w100{float:none;width:100%}}.widget.w10:before,.widget.w10:after,.widget.w11:before,.widget.w11:after,.widget.w15:before,.widget.w15:after,.widget.w16_5:before,.widget.w16_5:after,.widget.w20:before,.widget.w20:after,.widget.w22:before,.widget.w22:after,.widget.w25:before,.widget.w25:after,.widget.w30:before,.widget.w30:after,.widget.w33:before,.widget.w33:after,.widget.w35:before,.widget.w35:after,.widget.w40:before,.widget.w40:after,.widget.w44:before,.widget.w44:after,.widget.w45:before,.widget.w45:after,.widget.w50:before,.widget.w50:after,.widget.w55:before,.widget.w55:after,.widget.w60:before,.widget.w60:after,.widget.w65:before,.widget.w65:after,.widget.w66:before,.widget.w66:after,.widget.w70:before,.widget.w70:after,.widget.w75:before,.widget.w75:after,.widget.w80:before,.widget.w80:after,.widget.w85:before,.widget.w85:after,.widget.w90:before,.widget.w90:after,.widget.w95:before,.widget.w95:after,.widget.w100:before,.widget.w100:after,form:before,form:after{content:" ";display:table}.widget.w10:after,.widget.w11:after,.widget.w15:after,.widget.w16_5:after,.widget.w20:after,.widget.w22:after,.widget.w25:after,.widget.w30:after,.widget.w33:after,.widget.w35:after,.widget.w40:after,.widget.w44:after,.widget.w45:after,.widget.w50:after,.widget.w55:after,.widget.w66:after,.widget.w65:after,.widget.w70:after,.widget.w75:after,.widget.w80:after,.widget.w85:after,.widget.w90:after,.widget.w95:after,.widget.w100:after,form:after{clear:both}.widget.widget-split input[type="text"],.widget.widget-split input[type="password"],.widget.widget-split input[type="date"],.widget.widget-split input[type="datetime"],.widget.widget-split input[type="email"],.widget.widget-split input[type="number"],.widget.widget-split input[type="search"],.widget.widget-split input[type="tel"],.widget.widget-split input[type="time"],.widget.widget-split input[type="url"],.widget.widget-split textarea,.widget.widget-split select{max-width:50% !important;min-width:10% !important;float:left;margin-right:10px;display:inline}.widget.widget-split.widget-split-3 input{max-width:30% !important}.widget.widget-split.widget-split-3 input[type="submit"]{max-width:70% !important}.widget.widget-split.widget-split-4 input{max-width:40% !important}.widget.widget-split.widget-split-4 input[type="submit"]{max-width:60% !important}.widget.widget-split.widget-split-5 input{max-width:50% !important}.widget.widget-split.widget-split-5 input[type="submit"]{max-width:50% !important}.widget.widget-split.widget-split-6 input{max-width:60% !important}.widget.widget-split.widget-split-6 input[type="submit"]{max-width:40% !important}.widget.widget-split.widget-split-7 input{max-width:70% !important}.widget.widget-split.widget-split-7 input[type="submit"]{max-width:30% !important}.widget.fl_right input[type="submit"],.submit_container.fl_right .submit{float:right}.widget.lblp{padding-top:1.9em;min-height:2.1em}.widget.autoh{min-height:0}.widget,form{*zoom:1}
2 1
\ No newline at end of file
2
+input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.widget input.captcha{max-width:4em}.formbody{display:grid;grid-gap:10px;row-gap:.75em;grid-template-columns:repeat(12,1fr);align-items:end}.formbody>:not(.widget){grid-column:auto/span 12}.formbody>fieldset{grid-column-start:1;grid-column:auto/span 12;display:grid;grid-gap:10px;row-gap:.75em;grid-template-columns:repeat(12,1fr);align-items:end}.formbody .widget.w10,.formbody .widget.w11,.formbody .widget.w15,.formbody .widget.w16_5{grid-column:auto/span 2}.formbody .widget.w20,.formbody .widget.w22,.formbody .widget.w25{grid-column:auto/span 3}.formbody .widget.w30,.formbody .widget.w33{grid-column:auto/span 4}.formbody .widget.w35,.formbody .widget.w40{grid-column:auto/span 5}.formbody .widget.w44,.formbody .widget.w45,.formbody .widget.w50{grid-column:auto/span 6}.formbody .widget.w55{grid-column:auto/span 7}.formbody .widget.w60,.formbody .widget.w65,.formbody .widget.w66{grid-column:auto/span 8}.formbody .widget.w70,.formbody .widget.w75{grid-column:auto/span 9}.formbody .widget.w80{grid-column:auto/span 10}.formbody .widget.w85,.formbody .widget.w90,.formbody .widget.w95{grid-column:auto/span 11}.formbody .widget.w100{grid-column:auto/span 12}.formbody .widget.clr{grid-column-start:1}@media screen and (max-width:599px){.formbody .widget.w10,.formbody .widget.w100,.formbody .widget.w11,.formbody .widget.w15,.formbody .widget.w16_5,.formbody .widget.w20,.formbody .widget.w22,.formbody .widget.w25,.formbody .widget.w30,.formbody .widget.w33,.formbody .widget.w35,.formbody .widget.w40,.formbody .widget.w44,.formbody .widget.w45,.formbody .widget.w50,.formbody .widget.w55,.formbody .widget.w60,.formbody .widget.w65,.formbody .widget.w66,.formbody .widget.w70,.formbody .widget.w75,.formbody .widget.w80,.formbody .widget.w85,.formbody .widget.w90,.formbody .widget.w95{grid-column:auto/span 12;grid-column-start:1}}
3 3
\ No newline at end of file