Как добавить поле ввода в карусель?

Question

Я пытаюсь добавить поле ввода отдела в каруселью

Вот мой HTML форме

<div class="tree"> 
    <ul id="carouselDiv" class="caurosel-box"> 
     <li style="width: 75%;" > 

      <flex-slider slider-id="carousel" 
       flex-slide="department in data.departments track by $index" animation="slide" 
       animation-loop="false" item-width="240" item-margin="1" 
       as-nav-for="#slider" slideshow="false" control-nav="false"> 
      <ul style="margin-top: 20px; width:100%;" > 

       <li id="sl"> 
        <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="" ng-model="department.name" ng-blur="addDepartment(department);"> 

        <label style="width:95%; text-align:left;" for="inputEmail3">DEPARTMENT</label> 
        <div class="dropdown"> 
         <button class="btn btn-default dropdown-toggle" style="width:95%;height:50px;" type="button" data-toggle="dropdown">HR 
         <span class="caret" style="margin-left:60%"></span></button> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Manager</a></li> 

         </ul> 
        </div> 

        <ul style="height:200px;width:100%;margin-top: 20px;border-radius:5px;"> 
         <li style="background-color:#fff"> 
          <div style="width:225px;white;border-radius:5px; padding: 0 10px 0px 10px;"> 
           <div class="strike"> 
            <span>{{department.name}}</span> 
           </div> 
           <label class='control-label pull-left'>ROLES</label> 
           <div ng-repeat="role in department.roles track by $index"> 
            <div class="form-group"> 
             <input type="text" class="form-control grn-text-input" value="{{role.name}}" readonly/> 
            </div> 
           </div> 
          </div> 
          <div class="form-group"> 
           <input type="button" ng-click="currentDepartment(department.name)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="width:90%;background-color:#3CC01A" id="button" name="button" value="Add Role" /> 
          </div> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      </flex-slider> 
     </li> 

    </ul> 
</div> 

Здесь поле ввода:

<li style="width:25%;"> 
        <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="{{department.name}}" ng-model="department.name" ng-blur="addDepartment(department);"> 
      </li> 

Я хочу, чтобы добавить это поле в карусельном поле. Как правильно разместить это поле ввода, пожалуйста, предоставьте мне несколько предложений.

Answer 1

Я предполагаю, что это то, что вы хотите, чтобы иметь вход рядом с карьерой, основанной на «ширине» и предположении встроенного стиля.

<div class="tree"> 
     <ul id="carouselDiv" class="caurosel-box"> 
      <li style="width: 75%;" > 

       <flex-slider slider-id="carousel" 
        flex-slide="department in data.departments track by $index" animation="slide" 
        animation-loop="false" item-width="240" item-margin="1" 
        as-nav-for="#slider" slideshow="false" control-nav="false"> 
       <ul style="margin-top: 20px; width:100%;" > 

        <li id="sl"> 
         <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="" ng-model="department.name" ng-blur="addDepartment(department);"> 

         <label style="width:95%; text-align:left;" for="inputEmail3">DEPARTMENT</label> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" style="width:95%;height:50px;" type="button" data-toggle="dropdown">HR 
          <span class="caret" style="margin-left:60%"></span></button> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Manager</a></li> 

          </ul> 
         </div> 

         <ul style="height:200px;width:100%;margin-top: 20px;border-radius:5px;"> 
          <li style="background-color:#fff"> 
           <div style="width:225px;white;border-radius:5px; padding: 0 10px 0px 10px;"> 
            <div class="strike"> 
             <span>{{department.name}}</span> 
            </div> 
            <label class='control-label pull-left'>ROLES</label> 
            <div ng-repeat="role in department.roles track by $index"> 
             <div class="form-group"> 
              <input type="text" class="form-control grn-text-input" value="{{role.name}}" readonly/> 
             </div> 
            </div> 
           </div> 
           <div class="form-group"> 
            <input type="button" ng-click="currentDepartment(department.name)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="width:90%;background-color:#3CC01A" id="button" name="button" value="Add Role" /> 
           </div> 
          </li> 
         </ul> 
        </li> 
       </ul> 
       </flex-slider> 
      </li> 
      <li style="width:25%;"> 
       <input type="text" class="form-control" style="width:95%;margin-top: 25px;" id="adddepartment" name="adddepartment" placeholder="+ Add Department" value="{{department.name}}" ng-model="department.name" ng-blur="addDepartment(department);"> 
      </li> 
     </ul> 
    </div>