Page 1 of 1
Hide check box label with CSS
Posted: Wed May 26, 2021 5:10 pm
by vintoICT
On my grid edit page , i have a check box . I will like to hide the label . I inspect with chrome and i have this
HTML :
<label class="custom-control-label" for="x1_Custodian_id_671849">Doe</label>
CSS :
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: top;
}
on user style I tried
label[for="x1_Custodian_id_828170"]
{
display:none;
}
but its not working
Re: Hide check box label with CSS
Posted: Wed May 26, 2021 5:51 pm
by mobhar
Make sure you have already reloaded the latest generated .css file. If necessary, you may clear cache the browser, and then try again.
Re: Hide check box label with CSS
Posted: Wed May 26, 2021 5:55 pm
by arbei
The id is unique and random, you may try a better selector (e.g. by name attribute) to select the labels, e.g. if the field a boolean field,
input[name$='_Custodian_id[]'] + .custom-control-label { /* See note below */
}
Note: Right click the element you want to hide in Chrome and select Inspect to check the real id and/or class of the CSS selector, read Open the Elements panel to inspect the DOM or CSS.
Re: Hide check box label with CSS
Posted: Sat May 29, 2021 2:16 am
by vintoICT
.input[name$='_Custodian_id[]'] + .custom-control-label {
display:none;
}
did not work . i addedit to user styles
Re: Hide check box label with CSS
Posted: Sat May 29, 2021 9:58 am
by mobhar
Just want to clarify:
- Did you use User Values for the Custodian_id field so that you can select one or more item by using Checkbox control?
- If so, how many Checkbox item in that field? Is it more than one item, and did you want to hide only one of them?
Re: Hide check box label with CSS
Posted: Sat May 29, 2021 1:43 pm
by vintoICT
Its a lookup check box on a Grid edit page.
I want to hide all the labels and display just the check box. Thanks
Re: Hide check box label with CSS
Posted: Sat May 29, 2021 3:26 pm
by mobhar
If you want to obviously hide all the Labels caption for Checkboxes control in Grid-Edit page, then you may simply use Lookup_Selecting server event.
For example, the field is Custodian_id and the lookup table name is lookup, it has two fields: Code and Description, which the link field is Code, and the display field is Description, then you may simply use this code:
if ($fld->Name == "Custodian_id" && $this->isGridEdit())
$fld->Lookup->setOptions(ExecuteRows("SELECT Code, ' ' AS Description FROM lookup")); // adjust the lookup table name to yours
Re: Hide check box label with CSS
Posted: Sun May 30, 2021 6:25 am
by vintoICT
This is working
if ($fld->Name == "Custodian_id"){
AddFilter($filter, "id = '$vintocustodianid'");
$fld->Lookup->setOptions(ExecuteRows("SELECT id, ' ' AS Lastname FROM custodianstbl WHERE id = '$vintocustodianid'"));
}
Re: Hide check box label with CSS
Posted: Mon May 31, 2021 8:35 am
by mobhar
Although your code is working fine in Grid-Edit mode, you should add condition to check whether the current page is in Grid-Edit mode, just like you mentioned in your first post above.
This code:
if ($fld->Name == "Custodian_id"){
should be:
if ($fld->Name == "Custodian_id" && $this->isGridEdit()) {
If you did not add that condition, then you will see in the List page (not Grid-Edit mode), the value in that Custodian_id column will be blank.