Repository: jwstegemann/fritz2
Issue: Horizontal radioGroup: Selecting first option alters height and displaces following content

When using a horizontal radioGroup, the rendering of the ::before element on selecting the first entry apparently somehow changes the height of the component, which displaces following content.

See https://components.fritz2.dev/#RadioGroup, go to the horizontal example, select entry 2 (or 3 or 4) and then select entry 1.

Happens in firefox, Chrome and Opera on Win10.



Changed files:
styling/src/jsMain/kotlin/dev/fritz2/styling/theme/default.kt, components/src/jsMain/kotlin/dev/fritz2/components/switch/component.kt, components/src/jsMain/kotlin/dev/fritz2/components/radios/componentSingle.kt, components/src/jsMain/kotlin/dev/fritz2/components/checkboxes/componentSingle.kt, components/src/jsMain/kotlin/dev/fritz2/components/radios/componentGroup.kt

diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/checkboxes/componentSingle.kt b/components/src/jsMain/kotlin/dev/fritz2/components/checkboxes/componentSingle.kt
index f4ce0404..b342b069 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/checkboxes/componentSingle.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/checkboxes/componentSingle.kt
@@ -72,12 +72,13 @@ open class CheckboxComponent(protected val value: Store<Boolean>?) :
             "checkbox",
             """
             position: absolute;
-            height: 1px;                
-            width: 1px;                
+            border: 0px;
+            clip: rect(0px, 0px, 0px, 0px);
+            height: 0px;
+            width: 0px;
             overflow: hidden;
-            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-            clip: rect(1px, 1px, 1px, 1px);
-            outline: none;           
+            white-space: nowrap;
+            outline: none;
             &:focus{
                 outline: none;
             }           
@@ -88,22 +89,21 @@ open class CheckboxComponent(protected val value: Store<Boolean>?) :
     val size = ComponentProperty<FormSizesStyles.() -> Style<BasicParams>> { Theme().checkbox.sizes.normal }
     val icon = ComponentProperty<Icons.() -> IconDefinition> { Theme().icons.check }
 
-    private var labelField: (RenderContext.() -> Unit)? = null
-
+    private var label: (RenderContext.() -> Unit)? = null
     fun label(value: String) {
-        labelField = {
+        label = {
             span { +value }
         }
     }
 
     fun label(value: Flow<String>) {
-        labelField = {
+        label = {
             span { value.asText() }
         }
     }
 
     fun label(value: (RenderContext.() -> Unit)) {
-        labelField = value
+        label = value
     }
 
     val labelStyle = ComponentProperty(Theme().checkbox.label)
@@ -151,7 +151,7 @@ open class CheckboxComponent(protected val value: Store<Boolean>?) :
                 }
             }
 
-            this@CheckboxComponent.labelField?.let {
+            this@CheckboxComponent.label?.let {
                 div({
                     this@CheckboxComponent.labelStyle.value()
                 }) {
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentGroup.kt b/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentGroup.kt
index 1dbc4cdb..a22ebfcf 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentGroup.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentGroup.kt
@@ -130,6 +130,9 @@ open class RadioGroupComponent<T>(protected val items: List<T>, protected val va
         context.apply {
             div({
                 layoutOf(this@RadioGroupComponent.orientation.value(OrientationContext))()
+                verticalAlign { top }
+                css("-webkit-box-align: center;")
+                alignItems { center }
             }, styling, baseClass, id, prefix) {
                 (this@RadioGroupComponent.value?.data ?: this@RadioGroupComponent.selectedItem.values)
                     .map { selectedItem ->
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentSingle.kt b/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentSingle.kt
index fdb8e872..ef662d74 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentSingle.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/radios/componentSingle.kt
@@ -68,12 +68,12 @@ open class RadioComponent(protected val value: Store<Boolean>? = null) :
     private val radioInputStaticCss = style(
         """
             position: absolute;
-            height: 1px; 
-            width: 1px;
+            border: 0px;
+            clip: rect(0px, 0px, 0px, 0px);
+            height: 0px;
+            width: 0px;
             overflow: hidden;
-            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-            clip: rect(1px, 1px, 1px, 1px);
-            outline: none;
+            white-space: nowrap;
             &:focus{
                 outline: none;
             }
diff --git a/components/src/jsMain/kotlin/dev/fritz2/components/switch/component.kt b/components/src/jsMain/kotlin/dev/fritz2/components/switch/component.kt
index c6d2b6d6..a312df6e 100644
--- a/components/src/jsMain/kotlin/dev/fritz2/components/switch/component.kt
+++ b/components/src/jsMain/kotlin/dev/fritz2/components/switch/component.kt
@@ -70,12 +70,13 @@ open class SwitchComponent(protected val value: Store<Boolean>? = null) :
             "switch",
             """
             position: absolute;
-            height: 1px;                
-            width: 1px;                
+            border: 0px;
+            clip: rect(0px, 0px, 0px, 0px);
+            height: 0px;
+            width: 0px;
+            white-space: nowrap;
             overflow: hidden;
-            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-            clip: rect(1px, 1px, 1px, 1px);
-            outline: none;           
+            outline: none;
             &:focus{
                 outline: none;
             }           
diff --git a/styling/src/jsMain/kotlin/dev/fritz2/styling/theme/default.kt b/styling/src/jsMain/kotlin/dev/fritz2/styling/theme/default.kt
index f5884c64..ab682f8e 100644
--- a/styling/src/jsMain/kotlin/dev/fritz2/styling/theme/default.kt
+++ b/styling/src/jsMain/kotlin/dev/fritz2/styling/theme/default.kt
@@ -725,8 +725,8 @@ open class DefaultTheme : Theme {
             flex {
                 shrink { "0" }
             }
-            css("align-items:center;")
-            css("justify-content:center;")
+            css("align-items: center;")
+            css("justify-content: center;")
             width { "var(--rb-size)" }
             height { "var(--rb-size)" }
             background { color { neutral.main } }
@@ -739,10 +739,8 @@ open class DefaultTheme : Theme {
         }
         override val selected: Style<BasicParams> = {
             background { color { primary.main } }
-            color { gray300 }
-            border {
-                color { primary.main }
-            }
+            border { color { primary.main } }
+            color { primary.mainContrast }
             before {
                 css("content:\\"\\";")
                 display {