From 9f9c3d90b17ce753d039f5eae5206acb5b8a7acb Mon Sep 17 00:00:00 2001 From: jekuaitk Date: Mon, 30 Jun 2025 14:08:09 +0200 Subject: [PATCH 1/2] #4676: Adjusted webform flexbox layout styling --- CHANGELOG.md | 3 +++ .../os2forms_selvbetjening_theme/assets/app.scss | 13 +++++++++++++ .../os2forms_selvbetjening_theme/build/app.css | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd0aeeae..72816ab1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ Nedenfor ses dato for release og beskrivelse af opgaver som er implementeret. * Opdaterede fejlede jobs personaliseret view. * Fjernede ubrugt custom modul. +* Opdaterede styling i flexbox layout. + * Sikrede at checkbox labels og beskrivelser laver linjeskift. + * Tiljusterede placeringen af checkbox input felter. ## [4.4.0] 2025-06-16 diff --git a/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss b/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss index 134e7e97..00724942 100644 --- a/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss +++ b/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss @@ -117,3 +117,16 @@ border-width: 2px !important; border-radius: 5px; } + +/* Fix for webform flexbox. Overrides web/modules/contrib/webform/css/webform.element.flexbox.css */ +@media (min-width: 768px) { + .webform-flex--container .form-type-checkbox, + .webform-flex--container .form-type-radio { + white-space: inherit; + } + + /* Add margin to align checkboxes inside flex layout. */ + .webform-flexbox { + margin: 0 var(--space-l) calc(var(--space-m) + var(--space-s)); + } +} diff --git a/web/themes/custom/os2forms_selvbetjening_theme/build/app.css b/web/themes/custom/os2forms_selvbetjening_theme/build/app.css index b7fe4bce..1c4a0bf4 100644 --- a/web/themes/custom/os2forms_selvbetjening_theme/build/app.css +++ b/web/themes/custom/os2forms_selvbetjening_theme/build/app.css @@ -1 +1 @@ -.content-header{background-color:transparent;padding-bottom:var(--space-s)}.logo img{margin-bottom:1em;max-height:60px}.footer{margin-bottom:.75rem;overflow:hidden;padding:1.5rem 0 0}.footer .layout-container{display:block;width:100%}.footer .layout-container>div{box-sizing:border-box;display:block;float:left;padding:0 1em;width:25%}.footer .layout-container>div:first-child{padding-left:0}.footer .layout-container>div:last-child{padding-right:0}@media only screen and (max-width:600px){.footer .layout-container>div{padding:0;width:100%}.footer .layout-container>div:first-child{padding-left:0}.footer .layout-container>div:last-child{padding-right:0}}.footer .logo img{max-height:60px}.footer .menu,.footer .menu li,.footer .nav,.footer .nav li{list-style:none;margin:0;padding:0}.footer .menu li>a,.footer .nav li>a{display:block;padding:10px 15px;position:relative}@media only screen and (max-width:600px){.footer .menu li>a,.footer .nav li>a{padding:0}}.block-lang-dropdown{display:flex;justify-content:flex-end}@media only screen and (max-width:600px){.block-lang-dropdown{justify-content:flex-start}}.block-lang-dropdown .form-item{margin-top:0}@media (max-width:768px){.webform-multiple-table-responsive table td legend>span.visually-hidden{color:#232429;height:auto;position:relative!important;width:auto}}.webform-scale-options>.webform-scale-option>div.form-item{position:relative}.button--outline--primary{background-color:#fff;color:#003ecc}.button--outline--primary,.button--outline--primary:hover{border-color:#003ecc!important;border-radius:5px;border-width:2px!important;cursor:pointer}.button--outline--primary:hover{background-color:#003ecc;color:#fff} \ No newline at end of file +.content-header{background-color:transparent;padding-bottom:var(--space-s)}.logo img{margin-bottom:1em;max-height:60px}.footer{margin-bottom:.75rem;overflow:hidden;padding:1.5rem 0 0}.footer .layout-container{display:block;width:100%}.footer .layout-container>div{box-sizing:border-box;display:block;float:left;padding:0 1em;width:25%}.footer .layout-container>div:first-child{padding-left:0}.footer .layout-container>div:last-child{padding-right:0}@media only screen and (max-width:600px){.footer .layout-container>div{padding:0;width:100%}.footer .layout-container>div:first-child{padding-left:0}.footer .layout-container>div:last-child{padding-right:0}}.footer .logo img{max-height:60px}.footer .menu,.footer .menu li,.footer .nav,.footer .nav li{list-style:none;margin:0;padding:0}.footer .menu li>a,.footer .nav li>a{display:block;padding:10px 15px;position:relative}@media only screen and (max-width:600px){.footer .menu li>a,.footer .nav li>a{padding:0}}.block-lang-dropdown{display:flex;justify-content:flex-end}@media only screen and (max-width:600px){.block-lang-dropdown{justify-content:flex-start}}.block-lang-dropdown .form-item{margin-top:0}@media (max-width:768px){.webform-multiple-table-responsive table td legend>span.visually-hidden{color:#232429;height:auto;position:relative!important;width:auto}}.webform-scale-options>.webform-scale-option>div.form-item{position:relative}.button--outline--primary{background-color:#fff;color:#003ecc}.button--outline--primary,.button--outline--primary:hover{border-color:#003ecc!important;border-radius:5px;border-width:2px!important;cursor:pointer}.button--outline--primary:hover{background-color:#003ecc;color:#fff}@media (min-width:768px){.webform-flex--container .form-type-checkbox,.webform-flex--container .form-type-radio{white-space:inherit}.webform-flexbox{margin:0 var(--space-l) calc(var(--space-m) + var(--space-s))}} \ No newline at end of file From b88e6f62fc005cb2291060dea52f78ea089e2e85 Mon Sep 17 00:00:00 2001 From: jekuaitk Date: Mon, 30 Jun 2025 14:20:47 +0200 Subject: [PATCH 2/2] #4676: Adjusted comments --- web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss b/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss index 00724942..f7312b07 100644 --- a/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss +++ b/web/themes/custom/os2forms_selvbetjening_theme/assets/app.scss @@ -118,8 +118,9 @@ border-radius: 5px; } -/* Fix for webform flexbox. Overrides web/modules/contrib/webform/css/webform.element.flexbox.css */ +/* Adjustments for webform flexbox */ @media (min-width: 768px) { + /* Allow potential wrapping. Overrides web/modules/contrib/webform/css/webform.element.flexbox.css */ .webform-flex--container .form-type-checkbox, .webform-flex--container .form-type-radio { white-space: inherit;