Form label css - bold

Suite and Optimus
#1

Hi all,

I created a form with grouped radio/checkboxes and I noticed by default the labels are not in bold. I looked through the suites default css and I do not recall seeing one for labels. Is it possible to add a css style (font-weight) for a label?

Thanks!

#2

Please, try to use:

<style>
    .dhx_checkbox__holder .dhx_text{
        font-weight: bold
    }
    .dhx_radiobutton .dhx_text{
        font-weight: bold
    }
</style>
#3

Hey sematik,

that bolds the radio/checkbox ā€œoptionā€ text but attribute label is not affected

form code example: (See - // <<<<<<<<<< need this bold and uploaded image showing your recommendation)

const form = new dhx.Form(null, {
  padding: 15,
  
  rows: [
       {
            id: "report",
            name: "report",
            type: "radioGroup",
            required: false,
            label: "Report",   // <<<<<<<<<< need this bold
            labelPosition: "top",
            value: "report",
            options: {
                rows: [
                    {
                        type: "radioButton",
                        text: "Report 1",
                        value: "R-1",height: 30
                    },
                    {
                        type: "radioButton",
                        text: "Report 2",
                        value: "R-2",height: 30
                    },
                    {
                        type: "radioButton",
                        text: "Report 3",
                        value: "R-3",height: 30
                    },
                    {
                        type: "radioButton",
                        text: "Report 4",
                        value: "R-4"
                    }
                ]
            }
        },
         {
            id: "base",
            type: "checkboxGroup",
            name: "base",
            label: "Base", // <<<<<<<<<< need this bold
            labelWidth: 0,
            labelPosition: "top",
            
            options: {
                
                rows: [
                    {
                        id: "base_01",
                        type: "checkbox",
                        text: "Base 01",
                        value: "base_01",height: 30,
                    },
                    {
                         labelPosition: "left",
                      
                        id: "base_02",
                        type: "checkbox",
                        text: "Base 02",
                         value: "base_02",height: 30,
                        
                    }
                ]
            }


        },

        {   
            
            
            type: "checkbox",
            name: "aor",
            id: "aor",
            value: "aor",
            text: "AOR_01",
            padding: 0
        }

  ]
});

layout.getCell("filter").attach(form);

dhx_form_example

#4

form labels have the higher font-weight by default.
https://snippet.dhtmlx.com/scs712zl
image

You may increase it by

<style>
    .dhx_label{
        font-weight: 700
    }
    </style>

https://snippet.dhtmlx.com/n5n6yf8n

1 Like
#5

Yes sir this css did the trick - thanks!

I didnā€™t think it was normal to have the same weight for a label as the option textā€¦perhaps I have a custom css screwing w/ it? I donā€™t know but thankfully you provided a fix for meā€¦appreciate the fast response!