Добавлен идентификатор в div, теперь поле формы не на всю ширину - PullRequest
0 голосов
/ 02 мая 2018

У меня есть форма, которая динамически отображает одно из трех последующих полей, в зависимости от предыдущего вопроса. Это вопрос селектора и динамически появляющееся поле:

 <!-- Selector -->
        <div id="selector" class="form-group">
          <label class="col-md-12 control-label" for="selector">Booking Type</label>
          <div class="col-md-12">
                <div class="radio">
            <label for="selector">
              <input name="selector" id="selector" value="Customer/Jobsite" onclick="show1();" type="radio">Customer/Jobsite</label>
            </div>
                <div class="radio">
            <label for="selector">
              <input name="selector" id="selector" value="Absence" onclick="show2();" type="radio">Absence</label>
            </div>
                <div class="radio">
            <label for="selector">
              <input name="selector" id="selector" value="Custom" onclick="show3();" type="radio">Custom</label>
            </div>
          </div>
        </div>

        <!-- Result Jobsite -->
        <div id="ResultJobsite" class="form-group" style="display:none;">
            <div class="form-row">
          <label class="col-md-12 control-label" for="Result">Customer/Jobsite</label>
          <div class="col-md-12" class="form-group">
            <select id="ResultJobsite" name="ResultJobsite" class="form-control select2_field">
                <option value=""></option>
            @foreach (App\Models\Customer::all()->sortby('Customer') as $row)
                <option <?php if ("{{ $row->Customer }}" == "{{ $entry->Result }}") { ?> selected="selected" <?php } ?> value="{{ $row->Customer }}">{{ $row->Customer }}</option>
            @endforeach
            </select>
          </div>
        </div>

И это javascript, который контролирует его внешний вид:

 function show1(){
          document.getElementById('ResultJobsite').style.display ='block';
          document.getElementById('ResultAbsence').style.display ='none';
          document.getElementById('ResultLongform').style.display ='none';
          document.getElementById('ResultShortform').style.display ='none';
        }
        function show2(){
          document.getElementById('ResultJobsite').style.display ='none';
          document.getElementById('ResultAbsence').style.display ='block';
          document.getElementById('ResultLongform').style.display ='none';
          document.getElementById('ResultShortform').style.display ='none';
        }
        function show3(){
          document.getElementById('ResultJobsite').style.display ='none';
          document.getElementById('ResultAbsence').style.display ='none';
          document.getElementById('ResultLongform').style.display ='block';
          document.getElementById('ResultShortform').style.display ='block';
        }

По сути, добавление id = "ResultJobsite" в поле позволяет динамически отображать / скрывать его по мере необходимости, но больше не отображает полную ширину поля, как остальные. Удаление id = "ResultJobsite" восстанавливает его на полную ширину.

Что здесь происходит?

1 Ответ

0 голосов
/ 03 мая 2018

Добавьте управление формой класса к этим входным полям, чтобы получить полную ширину.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...