Option to render checkbox outside of label

[enumag]

I'd like to be able to render checkbox (and radio) outside of the label tag. Without using manual rendering of course.

The reason is that I'd like to use awesome-bootstrap-checkbox to make them look better without using javascript.

[landsman]

Yes!

[dg]

Can you try to figure out any solution?

[landsman]

I am thinking about this again :(
What something like:

$form->addCheckbox("terms", "consultation.reserve.terms")->setHTML(...);

This is our problem:
https://api.nette.org/2.4.0/source-Forms.Controls.Checkbox.php.html#65

[enumag]

As you know I don't use nette/forms anymore... Currently I don't have a need nor time to solve this.

[enumag]

Closed by accident... it should probably be left open in my opinion.

[Olicek]

It can be handled in custom renderer. In renderLabel and renderControl methods check if $control is instance of Checkbox. If it's, there can be called getLabelPart or getControlPart insted of getControl.

Don't know if it's good enought solution.

But there is problem with radioList. Problem is here. If i would be able to switch those 2 lines, it would be good enought. What about 5. parameter for createInputList method, witch would be bool and swith those lines. This parameter would be settable in RadioList and CheckboxList

[enumag]

@Olicek Can you post the code for renderer? I need this on one of my older projects, fortunately only for single checkboxes, no lists. Also your link to the source doesn't work correctly anymore. You should lock it to one commit.

[Olicek]

@enumag I fixed my previous link (thanks for alert). My rendere is on gist. Is it enaught for you? Would you like to have something else?

[enumag]

@Olicek Actually I already solved it myself but thanks anyway. ;-)

[dakur]

I suggest to:

• render <input> before <label> by default – basically to swap these two lines
• to add id and for attributes for explicitly coupling of <input> and <label>

The problem is that now you can't render checkbox list which is compatible with Bootstrap v5 (or v4 custom control) markup as Bootstrap requires that label follows input. But it's not bootstrap-specific problem.

@dg Do you see any problem or BC break in making proposed changes? I can think only of broken styling if it depends on generated selectors and DOM structure:

form label input[type=checkbox] {
    border: 5px solid red;
}

[dg]

When you change the generated HTML, it is of course a BC break.

[dakur]

Ok, so what do you suggest then? There should be some way how to affect generated code, if we can not afford to change it.

[dg]

Just add a method to toggle generated code, right?

[dakur]

I don't understand. Generated code is of type string so what method do you think of that will be able to change it?

[dg]

$form->addCheckbox('xxx')
	->renderLabelSeparately();

[dakur]

Ok, why not, as basic solution that should be enough. 👍