Buy Now
Sign in

Checkbox with blank label/tooltip/description is not shown

RalfF , October 25 at 17:40
R
RalfF

Hi to all,
When I use a "pure" checkbox (with blank label, tooltip and description fields, the checkbox is not shown. It doesn't matter which style I use.

Any idea how to solve?
Placing a label text and hiding it with display: none would work but is not my desired solution.

GreyHead

Hi Ralf,

Please post a link to the form so I can take a quick look.

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

R
RalfF

Hi Bob,
Please find the link below:

Private content
The content here is visible only for authorized users.


Ralf

GreyHead

Hi Ralf,

It looks as though there is some CSS in your template to pretty up the checkboxes and this has the result of hiding that one. It's actually there in the HTML. And if you view the form without the template at index.php?option=com_chronoforms6&chronoform=mail-form-01-copy&tmpl=component everything is OK.

Please check the template settings and turn off any options to re-format form elements.

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

R
RalfF

Hi Bob,

I think it is not an CSS issue.

I found this CSS code in "# Semantic UI 2.2.4 - Reset" file - line 413 and 873

.ui.checkbox .box::before, .ui.checkbox label::before {
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
content: '';
background: #fff;
border-radius: 2.99999994px;
-webkit-transition: border .1s ease,opacity .1s ease,box-shadow .1s ease,-webkit-transform .1s ease;
transition: border .1s ease,opacity .1s ease,box-shadow .1s ease,-webkit-transform .1s ease;
transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease;
transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease,-webkit-transform .1s ease;
border: 1px solid #d4d4d5;
}

Please pay attention to "label::before"

In my template the checkbox label tag <label> </label> is stripped if the label is blank - in your component view it is existing also when the label is blank - see attached screenshots. And this is why the "label::before" doesn't work in the template but in the component view.

I do not really know who is stripping the label tag all the time - but I swear, it's not me ;-)

Best Ralf

Btw: actually I solved it with a blank in the label text.

Attachments
chronoforms_1.pdf
(124.2 KiB)
8 Downloads/Views
GreyHead

Hi Ralf,

It is most likely your template altering the page HTML.

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much