Bootstrap переключатель не работает в Bootstrap карусели - PullRequest
Новая
       37

Bootstrap переключатель не работает в Bootstrap карусели

0 голосов
/ 24 января 2020

У меня проблемы с использованием bootstrap переключателей и с редактированием флажков в карусели.

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

enter image description here

Есть две проблемы с этим решением.

Первый выпуск:
Флажки не редактируются. Я обнаружил, что флажки доступны для редактирования, когда я удаляю индикаторы карусели, поэтому я думаю, что возможной проблемой является то, что индикаторы прозрачно перекрывают флажки, чтобы они не редактировались. Как я мог это исправить? Индикаторы необходимы.

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

Есть ли кто-то, кто может помочь?

Я использую Angular с Typescript. Мой код показан ниже:

HTML

<div class="container mt-3">
   <div id="carouselPrufung" class="carousel slide" data-ride="carousel" data-interval="false">
    <ol class="carousel-indicators top carousel-indicators-numbers">
       <li data-target="#carouselPrufung" *ngFor="let j of arrAuftrag; let l = index" [attr.data- 
         slide-to]="l" [ngClass]="l == 0 ? 'active' : ''">{{l + 1}}</li>
    </ol>
    <div class="carousel-inner top-index">
      <div *ngFor="let i of arrAuftrag; let k = index" [ngClass]="k == 0 ? 'carousel-item active' : 
         'carousel-item'">
         <table class="table table-sm mt-5">
           <thead>
             <tr>
               <th scope="col">Kontrolle</th>
               <th scope="col">OK</th>
             </tr>
           </thead>
          <tbody>
             <tr *ngFor="let text of fehlertexte">
              <td>{{text.text}}</td>
              <td><input id="g{{getNumber(k + 1)}}id{{getNumber(text.fehlerId)}}" type="checkbox" 
                 checked data-toggle="toggle"></td>
             </tr>
          </tbody>
       </table>
      </div>
     </div>
   </div>
 </div>

CSS

    li {
        text-indent: 0;
        margin: 0 2px;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 100%;
        line-height: 30px;
        background-color: #999;
        color: #fff;
        transition: all 0.25s ease;
        text-align: center;
        &.active, &:hover {
            margin: 0 2px;
            width: 30px;
            height: 30px;
            background-color: #337ab7;        
          }
    }
    z-index: 1;
}
.top-index {
    z-index: 2;
}
.top {
    top: 10px;
    margin:0;
    padding-left:15px;
    padding-right:15px;
}
/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.toggle-off {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}```
...