How can I give a margin to the text of the checkbox?

Question

How can I give a margin to the text of the checkbox?

Navigation

#1 by (2 votes)
#2 by (0 votes)

-1

I have the following code:

  var fieldSet = "<div class='checkbox'><label><input " + propRequired + " data-is-common-control-note='" + IsCommonControlNote + "' data-is-required='" + IsRequired + "' class='input-details' type='checkbox' " + isDisabled + " id='"+id+"-" +
                ControlId + "' control-type='" +
                ControlType + "' name='" + ControlId + "' value='" + ControlName + "'>";

            if (ControlCaption !== "") {
                fieldSet = fieldSet + ControlCaption;
            }
            else {
                fieldSet = fieldSet + PhysicalName;
            }

            fieldSet = fieldSet + "</label></div>";

            var html = '<div control-type="' +
                ControlType + '" name="' +
                ControlName + '" data-field="' +
                PhysicalName + '" style="position:absolute; z-index:' + zIndex + "; left:" +
                ControlLeft + 'px; top:' +
                ControlTop + 'px; height: ' +
                ControlHeight + 'px; width:' +
                ControlWidth + 'px;">' + fieldSet + '</div>';
            $(html).appendTo(ContainerId);

When executing that block of code the checkboxs come out to me in the following way:

What could I do so that the text does not come out so close to me ????

Here is a fragment of the html code:

<div control-type="TIssCheckBox" name="IssCheckBox13" data-  field="IssCheckBox13" style="position:absolute; z-index:0; left:8px; top:2877px; height: 17px; width:97px;">
    <div class="checkbox">
       <label>
          <input data-is-common-control-note="" data-is-required="" class="input-details" disabled="disabled" id="Mother-7710" control-type="TIssCheckBox" name="7710" value="IssCheckBox13" type="checkbox">
             Mother
       </label>
    </div>
 </div>

javascript html5 css3 bootstrap asp.net-mvc

asked by Raidel Fonseca 18.04.2018 в 17:28

source

2 answers

Sum of numbers of a number in Javascript button name

score 2 · Answer 1

because you do not use the traditional something like this:

<input type="checkbox"><label>Option One</label>
<input type="checkbox"><label>Option Two</label>
<input type="checkbox"><label>Option Three</label>

result

already with it you can add css styles to your liking Put another way, first go to the input type checkbox then the label

score 0 · Answer 2

In your code you can see that the input[checkbox] is inside the label and to the right of the checkbox is the text. Try assigning a margin-left to checkbox so that the text separates from the checkbox:

.checkbox{
  display:inline;
  border:solid 1px black;
}
.checkbox input{
  margin-right:5px; /*<- separando el checkbox del texto */
  vertical-align: middle; /*<- centrando el checkbox en el medio */
}

<div class='checkbox'>
  <label>
    <input type="checkbox" />
    Texto 1
  </label>
</div>

<div class='checkbox'>
  <label>
    <input type="checkbox" />
    Texto 2
</div>

<div class='checkbox'>
  <label>
    <input type="checkbox" />
    Texto 3
  </label>
</div>