Wicket :: How to add style margin in checkboxes of CheckBoxMultipleChoice

Question

I passing list to CheckBoxMultipleChoice and generating checkboxes on front end using apache wicket

I want to add margin between all checkboxes.

My code is as follows:

HTML code

<div wicket:id="leasedLineChildChkLeft" style="width: 50%; float: right;"></div>

Java code

 final CheckBoxMultipleChoice<Integer> leasedLineChildDivLeft = new CheckBoxMultipleChoice<Integer>("leasedLineChildChkLeft", new Model(llSpeedSelectLeft), llSpeedListLeft);

Resulted Dynamic html genereted on front-end

    <div class="metaCommentListStyle" style="width: 50%; float: left;" wicket:id="leasedLineChildChkLeft"><input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_0" value="0" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_0">1</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_1" value="1" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_1">2</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_2" value="2" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_2">3</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_3" value="3" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_3">4</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_4" value="4" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_4">5</label><br>
</div>

i tried

leasedLineChildDivLeft.add(new SimpleAttributeModifier("class", "metaCommentListStyle"));

but as a result it will add class to div element and not to checkboxes

How do i add margin between checkboxes?

Answer 1

Style your inputs with CSS child selectors:

div.metaCommentListStyle input {
     margin-left: 4px;
}

If you need more control over the markup use CheckGroup/Check instead.

Answer 2

You can try something like :

leasedLineChildDivLeft.add(new SimpleAttributeModifier("style", "margin: 0 auto;"))

instead of

leasedLineChildDivLeft.add(new SimpleAttributeModifier("class", "metaCommentListStyle"));