Как растянуть checkbox на весь div?

Question

[ince]

Использую компоненты jQuery UI, не могу растянуть кнопки, что можно предпринять?

Пишу такой код:

<div id="cl-checkbox" class="collapse align-items-center align-middle d-flex">

        <div id="cl-checkbox-cont" 
                class="container-fluid col-md-11 col-sm-11 align-items-center align-middle form-group custom-controls" 
                defined = "false">

                    <div id="header-row" class="container col-md-6 justify-content-center">
                            <h2>Проверочные условия</h2>                         
                    </div>

                    <fieldset id="fs1">
                        <legend><u>В отчете об оценке</u>:</legend>
                        <label for="checkbox-1"> Имеется расчет стоимости сравнительным подходом</label>
                        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="form-control">
                    </fieldset>  
                    <fieldset id="fs2">
                        <legend><u>В сравнительном подходе</u>:</legend>                                                            
                        <label for="checkbox-2"> Приведено 3 (три) и более аналогов</label>
                        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="form-control">
                    </fieldset>                                                                                                       
                    
        </div>

</div>

После запускаю инициализатор от jQueryUI для каждого inputa (он применяет классы, стили и все такое):

$('input').checkboxradio();

В итоге генерируется следующий код:

<div id="cl-checkbox" class="collapse align-items-center align-middle d-flex">

        <div id="cl-checkbox-cont" class="container-fluid col-md-11 col-sm-11 align-items-center align-middle form-group custom-controls" defined="false">

                    <div id="header-row" class="container col-md-6 justify-content-center">
                            <h2>Проверочные условия</h2>                         
                    </div>

                    <fieldset id="fs1">
                        <legend><u>В отчете об оценке</u>:</legend>
                        <label for="checkbox-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
                          <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"> 
                          </span><span class="ui-checkboxradio-icon-space"> 
                          </span> 
                          Имеется расчет стоимости сравнительным подходом</label>
                        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="form-control ui-checkboxradio ui-helper-hidden-accessible">
                    </fieldset>  
                    <fieldset id="fs2">
                        <legend><u>В сравнительном подходе</u>:</legend>                                                            
                        <label for="checkbox-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
                          <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"> 
                          </span>
                          <span class="ui-checkboxradio-icon-space"> 
                          </span> 
                          Приведено 3 (три) и более аналогов</label>
                        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="form-control ui-checkboxradio ui-helper-hidden-accessible">
                    </fieldset>                                                                                                       
                    
        </div>

</div>

Answer 1

[0xD34F]

fieldset > .ui-checkboxradio-label {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

Comments

[ince]

Как боженька ;`0