Как сделать интервал между флажками и значениями - PullRequest
Новая
       11

Как сделать интервал между флажками и значениями

0 голосов
/ 02 января 2019

В моем JSP я заполняю список флажками.Проблема, с которой я столкнулся, заключается в том, что я не могу получить место между меткой и флажком.Я попытался применить стиль CSS с помощью пользовательского класса.Но это тоже не работает.Что можно сделать, чтобы решить эту проблему?

Представление: 

<c:forEach items="${permissions}" var="permission">
    <div class="check-box checkbox-margin" style="padding-left: 20px">
        <c:choose>
            <c:when test="${permission.checked}">
                <form:checkbox label="${permission.name}" value="${permission.id}" path="checkedPermissions" checked="checked"/>
            </c:when>
            <c:otherwise>
                <form:checkbox label="${permission.name}" value="${permission.id}" path="checkedPermissions"/>
            </c:otherwise>
        </c:choose>
    </div>
</c:forEach>

Стиль: 

.checkbox-margin {
    text-align:center;
}

.checkbox-margin input{
    margin: 0px 0px 0px 0px;
}

.checkbox-margin label{
    margin: 0px 20px 0px 3px;
}

Полученное представление HTML: 

<div class="check-box checkbox-margin" style="padding-left: 20px">
      <input id="checkedPermissions1" name="checkedPermissions" checked="checked" type="checkbox" value="1">
         <label for="checkedPermissions1">ROLE_LOGIN</label><input type="hidden" name="_checkedPermissions" value="on">

</div>

the checkbox list

Ответы [ 3 ]

0 голосов
/ 02 января 2019

Это было бы решением этой проблемы, поместите input и label внутри div. Затем дайте div поле. 

<body>
  <style>
    .check-box{
      margin: 0;
      padding: 0;
      border: 0;
    }
    .contain{
      margin-left: 50px;
    }
  </style>
  <div class="check-box">
    <h2>Premissions</h2>
    <div class="contain">
      <input id="checkedPermissions1" name="checkedPermissions" checked="checked" type="checkbox" value="1">
      <label for="checkedPermissions1">ROLE_LOGIN</label><input type="hidden" name="_checkedPermissions" value="on">
    </div>
    <div class="contain">
      <input id="checkedPermissions2" name="checkedPermissions" checked="checked" type="checkbox" value="1">
      <label for="checkedPermissions2">ROLE_SOMETHING</label><input type="hidden" name="_checkedPermissions" value="on">
    </div>
  </div>
</body>

Вот скриншот результата

0 голосов
/ 11 июня 2019

По своему опыту я обнаружил, что решение Сураджа наиболее подходит для проблемы, с которой я столкнулся.

Я вводил ввод в DOM, чтобы сидеть рядом с существующими элементами, используя следующее: - 

var filterOptions = ['001','002','005','009'];
// Inject radio inputs Using siteOptions
$.each(siteOptions, function (ind, val) {
    $('<input type="checkbox" class="checkClass siteBox" name="sitename" value="'+val+'" id="site-'+val+'" checked><label for="site-'+val+'">Site '+val+'</label><br>').insertBefore('#allSiteSelector');
});

При этом я заметил, что расстояние между элементами между входом и метками отличаетсяк тем для существующих элементов DOM.

С введенными элементами не было промежутка между меткой и вводом.

Исправлено было поместить &nbsp; между входом и меткой.

var filterOptions = ['001','002','005','009'];
// Inject radio inputs Using siteOptions
$.each(siteOptions, function (ind, val) {
    $('<input type="checkbox" class="checkClass siteBox" name="sitename" value="'+val+'" id="site-'+val+'" checked><label for="site-'+val+'">Site '+val+'</label><br>').insertBefore('#allSiteSelector');
});


// Set siteid radio inputs Using siteOptions
var siteOptions = ['001']

// Inject WITHOUT NBSP
$.each(siteOptions, function (ind, val) {
    var input = '<input type="checkbox" class="checkClass siteBox" name="sitename" value="' + val + '" id="site-' + val + '" checked>';
    var label = '<label for="site-' + val + '">No Non-Breaking Space ' + val + '</label><br>';
    $(input+label).insertBefore('#sitenameAll');
});

// Inject WITH NBSP
$.each(siteOptions, function (ind, val) {
    var input = '<input type="checkbox" class="checkClass siteBox" name="sitename" value="' + val + '" id="site-' + val + '" checked>';
    var nbsp = '&nbsp';
    var label = '<label for="site-' + val + '">With Non-Breaking Space ' + val + '</label><br>';
    $(input+nbsp+label).insertBefore('#sitenameAll');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cd-filter-content cd-filters list" id="filters">
		<h4>Site Filter</h4>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="001" id="001" checked>
		<label for="001">001 Site 1</label><br>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="002" id="002" checked>
		<label for="002">002 Site 2</label><br>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="003" id="003" checked>
		<label for="003">003 Site 3</label><br>
		<input type="checkbox" class="checkClass siteBox" name="sitename" value="004" id="004" checked>
		<label for="004">003 Site 4</label><br>
		<input type="checkbox" class="checkClass" name="sitename" value="All" id="sitenameAll" checked>
		<label for="sitenameAll">All</label>
		<br>
	</ul>
0 голосов
/ 02 января 2019

Удалите этот CSS: 

.checkbox-margin label{
    margin: 0px 20px 0px 3px;
}

Используйте &nbsp; между входом и меткой

или

В CSS 

.checkbox-margin label{
    margin-left: 10px !important;
}
...