Weird Switch Render Bug

Radzen Studio Angular
1

image

When checking HTML it seems some switches have a checkbox hidden behind them and some others do not. I am unsure as to what causes this to happen.

2

Hi @Damian,

All switches will have hidden input type=checkbox - this is how the component is implemented.

3

Hey @enchev,

I see, is there any way to hide the checkbox in the top left corner of the switches pictured above. It seems that sometimes, not for every switch, they are shown rather than hidden from view.

4

Do you have any global CSS styles for input components? Can you provide more info how to reproduce the problem?

5

No style changes outside of changing the font color on labels to white and this fix you guys recommended for datagrid in a fieldset not showing options properly on page size dropdowns.

As far as replication goes, I put the Switch in side of a column, which is inside of a collapsible fieldset. The switches were originally checkboxes, though I replaced them for switch as it looks better in my opinion. It seems to always show for the ones in the fieldset, though only sometimes for ones not in the fieldset.

6

Can you post the exact markup to try to replicate the problem? You can use markdown to format the code.

7 

label {
  color: white !important;
  display: inline-block;
  margin-bottom: 0.5rem;
}

h3 {
  color: white !important;
}

.ui-fieldset-content-wrapper {
    overflow: auto !important;
}

These are the only changes to our CSS. We are also using the Dark theme.

8

Can you post the page meta json also?

9

Created a test page where it still generates the same issues, tested in both Firefox and Chrome to try to eliminate browser-based issues as well as caching problems.

{
  "access": [],
  "components": [
    {
      "components": [
        {
          "name": "pageTitle",
          "size": "H1",
          "text": "Test",
          "type": "heading",
          "visible": ""
        },
        {
          "events": {
            "click": [
              {
                "code": "console.log(this.switch0);",
                "type": "execute"
              }
            ]
          },
          "name": "button0",
          "text": "",
          "type": "button",
          "visible": true
        },
        {
          "name": "switch0",
          "type": "switch",
          "value": ""
        }
      ],
      "container": "main",
      "type": "content"
    }
  ],
  "events": {
    "load": [
      {
        "name": "generate",
        "type": "set",
        "value": "${generate}"
      }
    ]
  },
  "layout": "Main",
  "name": "Test"
}
10

I am unsure as to how, but it seems to have fixed itself from me testing some things out. I will keep an eye out if this issue occurs again.