Высота формы для увеличения по содержанию в AngularJs

У меня есть угловая форма, которая имеет несколько элементов управления. Когда страница загружается изначально, все содержимое вписывается в форму. Когда отображаются сообщения о проверке, кнопка отправки, кнопка отмены не отображаются. Эти кнопки идут ниже. Ниже приведен код в index.cshtml. Я только установил несколько элементов управления, также есть дополнительные элементы управления.Высота формы для увеличения по содержанию в AngularJs

<body class="ng-cloak"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> 
    <div ng-controller="testController" ng-init="init()"> 
     <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">  

      <div> 
       <!-- HEADER AND NAVBAR --> 
       <header> 
        <nav class="navbar navbar-default"> 
         <div class="container"> 
          <div class="navbar-header"> 
           <a class="navbar-brand">Test</a> 
          </div> 
          <ul class="nav navbar-right nav-pills"> 
           <li ng-class="{active: createMenu}"> 
        <a href="" ng-click="show('createMenu')">Create</a></li> 
           <li ng-class="{active: dashboardMenu}"> 
            <a href="" ng-click="show('dashboardMenu')"> Dashboard</a> 
           </li> 
          </ul> 

         </div> 
        </nav> 
       </header> 
      </div> 
      <div class="container" ng-show="createMenu"> 
       <br /> 
       <div class="row"> 
        <div class="col-sm-2"> 
         <label class="control-label">Groups:</label> 
        </div> 
        <div class="col-sm-4 form-group"> 
         <select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)"> 
          <option value="">-- Select the Group --</option> 
         </select> 
        </div> 
       </div> 
       <span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span> 

       <br /> 
       <div class="row"> 
        <div class="col-sm-2"> 
         <label>Name :</label> 
        </div> 
        <div class="col-md-6 form-group"> 
         <input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" /> 
        </div> 
       </div> 
       <span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span> 
       <br /> 
       <br /> 

       <div class="row"> 
        <div class="col-sm-6"> 
         <label class="control-label">Start date</label> 
         <div class="form-group"> 
          <div class="input-group date" id="startDatepicker"> 
           <input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate"> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
          </div> 
         </div> 
         <span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span> 
        </div> 
        <div class="col-sm-6"> 
         <label class="control-label">End date</label> 
         <div class="form-group"> 
          <div class="input-group date" id="endDatepicker"> 
           <input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate"> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
          </div> 
         </div> 
         <span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span> 
        </div> 

        <!--/col--> 
        <div class="col-sm-6"> 
         <label class="control-label">Start Time</label> 
         <div class="form-group"> 
          <div class="input-group" id="startTimepicker"> 
           <input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime"> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-time"></span> 
           </span> 
          </div> 
         </div> 
         <span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span> 
        </div> 

        <div class="col-sm-6"> 
         <label class="control-label">End Time</label> 
         <div class="form-group"> 
          <div class="input-group" id="endTimepicker"> 
           <input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime"> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-time"></span> 

           </span> 
          </div> 
         </div> 
         <span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-offset-4 col-sm-6"> 

          <input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" /> 
          <input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" /> 
         </div> 

        </div> 
        <br/> 
       </div> 
      </div>

Возможно ли соответствовать содержимому даже во время проверки сообщений? Я не устанавливаю какой-либо конкретный класс для установки высоты. Как убедиться, что кнопка отправки и отмены также видна, когда высота формы увеличивается. Я проверил эту ссылку extending a form's height to fit the content in the form, но не смог найти решение.

Добавление фрагмента кода, чтобы показать проблему: Начальная нагрузка показывает, как:

После сообщения об ошибке: Спасибо

источник

2017-01-12 venkat14

Вы можете создать jsfiddle для этого? –

Кстати, ваш код имеет отсутствующий> после тега LI здесь:

Create

–

Исправлен тег "li". Я не могу создать скрипку, поскольку размер формы увеличивается только тогда, когда отображаются сообщения об ошибках. – venkat14

Для изготовления ничего автоматически регулируется в соответствии с его содержанием, вы можете использовать мин -height Недвижимость.

min-height:100px;

Попробуйте это, добавьте его в форме CSS, как этот

<form name="mainForm" id="createForm" 
     ng-submit="mainForm.$valid && add()" 
     novalidate="" 
     style="min-height:100px;">

источник

2017-01-12 08:26:54

Привет, я добавил min-height, но все тот же. Я обновил код, чтобы показать дополнительные элементы управления. когда происходит проверка даты, кнопки кнопки отправки не видны. – venkat14

Можете ли вы создать плункер/скрипку, просто показывая форму и логику проверки? Потому что трудно перегенерировать проблему без какого-либо кода. –

Я добавил фрагмент проблемы. Я использовал bootstrap.css. Но все же проблема существует – venkat14

Высота формы для увеличения по содержанию в AngularJs

ответ

Смежные вопросы