Hide outer ring when radio button is disabled

swisstopo · Jan 10, 2024 · 94b6780 · 94b6780
1 parent 0fe6d08
commit 94b6780
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/src/client/src/commons/form/borehole/segments/coordinatesSegment.js b/src/client/src/commons/form/borehole/segments/coordinatesSegment.js
@@ -388,7 +388,16 @@ const CoordinatesSegment = props => {
                     <FormControlLabel
                       value={referenceSystems.LV95.code}
                       sx={{ flexGrow: 1 }}
-                      control={<Radio disabled={!isEditable} />}
+                      control={
+                        <Radio
+                          disabled={!isEditable}
+                          sx={{
+                            "&.Mui-disabled input": {
+                              zIndex: -1,
+                            },
+                          }}
+                        />
+                      }
                       label={
                         <DomainText
                           id={referenceSystems.LV95.code}
@@ -399,7 +408,16 @@ const CoordinatesSegment = props => {
                     <FormControlLabel
                       value={referenceSystems.LV03.code}
                       sx={{ flexGrow: 1 }}
-                      control={<Radio disabled={!isEditable} />}
+                      control={
+                        <Radio
+                          disabled={!isEditable}
+                          sx={{
+                            "&.Mui-disabled input": {
+                              zIndex: -1,
+                            },
+                          }}
+                        />
+                      }
                       label={
                         <DomainText
                           id={referenceSystems.LV03.code}

diff --git a/src/client/src/commons/form/borehole/segments/restrictionSegment.js b/src/client/src/commons/form/borehole/segments/restrictionSegment.js
@@ -88,17 +88,44 @@ const RestrictionSegment = props => {
                 }}>
                 <FormControlLabel
                   value="TRUE"
-                  control={<Radio disabled={!isEditable} />}
+                  control={
+                    <Radio
+                      disabled={!isEditable}
+                      sx={{
+                        "&.Mui-disabled input": {
+                          zIndex: -1,
+                        },
+                      }}
+                    />
+                  }
                   label={<TranslationText id={"yes"} />}
                 />
                 <FormControlLabel
                   value="FALSE"
-                  control={<Radio disabled={!isEditable} />}
+                  control={
+                    <Radio
+                      disabled={!isEditable}
+                      sx={{
+                        "&.Mui-disabled input": {
+                          zIndex: -1,
+                        },
+                      }}
+                    />
+                  }
                   label={<TranslationText id={"no"} />}
                 />
                 <FormControlLabel
                   value="NULL"
-                  control={<Radio disabled={!isEditable} />}
+                  control={
+                    <Radio
+                      disabled={!isEditable}
+                      sx={{
+                        "&.Mui-disabled input": {
+                          zIndex: -1,
+                        },
+                      }}
+                    />
+                  }
                   label={<TranslationText id={"np"} />}
                 />
               </RadioGroup>