Question

company.html

＆＃13;

<section class="main">
 <h1>Company Management</h1>
 <md-card>
   <button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
    <md-icon style="color:white;">add</md-icon>
   </button>
      <div class="table-responsive">
     <table class="table adminTable">
       <thead>
         <th>Name</th>
         <th>Email</th>
         <th>country</th>
         <th>Action</th>
       </thead>
       <tbody>
         <tr *ngFor="let company of companies">
           <td>{{company.user_name}}</td>
           <td>{{company.email}}</td>
           <td>{{company.country}}</td>
           <td>
               <button class="btn" md-raised-button>Guide</button>
               <button class="btn" md-raised-button>Pin</button>
               <button class="iconBtn first">
                <i class="fa fa-pencil" aria-hidden="true"></i>
               </button>
               <button class="iconBtn second">
                 <i class="fa fa-trash-o" aria-hidden="true"></i>
               </button>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
 </md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Add Company</h4>
      </div>
      <div class="modal-body row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
                <input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="E-mail" [(ngModel)]="email" required>
                <div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
            </md-input-container>
            <md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
                <input type="password" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="password" placeholder="Password" [(ngModel)]="password" required>
                <div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
            </md-input-container>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
                <mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched"> Active </mat-slide-toggle>
            </div>
            <md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
                <input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="username" placeholder="User name" [(ngModel)]="username" required>
                <div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
            </md-input-container>
            <md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
                <input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="country" placeholder="Country" [(ngModel)]="country" required>
                <div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
            </md-input-container>
            <div class="form-group">
                <label class="mat-input-container ng-pristine ng-valid ng-touched"> Membership* </label>
                <ng-select [options]="status" name="option" [(ngModel)]="option" class="filterDropDown"></ng-select>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
                <mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched">Is notification on</mat-slide-toggle>
                <mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched">Is GPS on</mat-slide-toggle>
            </div>
        </div>
      </div>
      <div class="modal-footer cat-btn">
           <button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel</button>
           <button md-raised-button class="md-raised save color-white">Save</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

styles.css的

＆＃13;

.row {
  margin: 0px !important;
}

ul li {
  list-style-type: none;
}

.loginMainDiv {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #55595c;
  top: 0px;
  z-index: 9999999999999;
}

.btn-info.disabled,
.btn-info:disabled {
  background-color: #17a2b8;
  border-color: #17a2b8;
  cursor: no-drop;
}

.loginpageForm {
  margin: 100px auto auto auto;
  width: 370px;
  height: auto;
  background-color: white;
  padding: 60px 15px 70px 15px;
}

.loginpageForm h2 {
  font-family: 'Roboto', sans-serif;
  color: #b7b7b7;
  text-align: center;
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 45px;
}

.loginpageForm .form-group {
  margin-bottom: 25px;
}

.loginbtn {
  margin-top: 35px;
}

.loginbtn button {
  cursor: pointer;
  width: 92%;
  margin: auto;
  margin-left: 4%;
  font-family: Tahoma;
  font-size: 18px;
  transition: all 0.4s linear;
  height: 45px;
  margin-top: 0px;
  margin-bottom: 15px;
}

.loginbtn button:hover {
  background-color: floralwhite;
  color: #00b8e6;
  transition: all 0.4s linear;
  transform: translateY(-0.20em);
}

p.forgetpwd {
  font-size: 16px;
  margin: auto;
  text-align: right;
  font-family: Arial;
  letter-spacing: 0.7px;
  margin-right: 16px;
  color: #b7b7b7;
}

.loginpageForm input {
  color: #b7b7b7;
}

.forgetpwd a {
  cursor: pointer;
  color: #0275d8 !important;
}

.forgetpwd a:hover {
  color: #014c8c !important;
  text-decoration: underline !important;
}

.error {
  padding-left: 8px !important;
  margin-top: -20px;
  margin-bottom: 10px;
  color: red;
}

button.navbar-toggle {
  border: 0px;
  background: none;
  cursor: pointer;
  outline: none !important;
  padding: 0px;
}

header {
  background-color: #55595c;
  padding: 20px 15px;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 99999;
}

.admin {
  text-align: right;
}

.admin span {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  letter-spacing: 0.8px;
  position: fixed;
  top: 0px;
  padding-top: 20px;
  right: 20px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  cursor: pointer;
}

.admin span:hover {
  color: #55595c;
  background-color: white;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}

.admin span img {
  margin-left: 15px;
}

header img {
  border-radius: 100%;
  width: 50px;
  min-height: 50px;
}

.col-xs-6 {
  max-width: 50%;
}

.logoutDiv {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  letter-spacing: 0.8px;
  position: fixed;
  margin-top: 10px;
  padding-top: 25px;
  right: 20px;
  padding-bottom: 15px;
  padding-left: 43px;
  padding-right: 35px;
  display: none;
  background-color: white;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}

.logoutDiv i {
  margin-right: 20px;
  color: #7e8890;
  font-size: 18px;
}

.logoutDiv h4:hover {
  color: #64bbfb;
}

.logoutDiv h4:hover i {
  color: #64bbfb;
}

.admin span:hover .logoutDiv {
  display: block;
  color: #55595c;
}

.navigation {
  width: 100%;
  background-color: #676a6d;
  height: 75px;
  margin-top: -16px;
  padding: 0 7.4%;
  margin-top: 90px;
  0 3px 1px -2px rgba(0, 0, 0, .2),
  0 2px 2px 0 rgba(0, 0, 0, .14),
  0 1px 5px 0 rgba(0, 0, 0, .12)
}

.navigation ul {
  padding: 0px;
}

.navigation ul li {
  float: left;
  height: 75px;
  display: block;
  padding: 22px 35px;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  color: white;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease-in;
  outline: none !important
}

li.activeTab {
  background-color: rgb(248, 248, 248);
  color: #4d87c5 !important;
  cursor: context-menu !important;
}

.navigation ul li:hover {
  background-color: rgb(248, 248, 248);
  color: #4d87c5;
}

footer {
  bottom: 0px;
  width: 100%;
  background-color: #55595c;
  padding: 30px 0;
}

.no-padding {
  padding: 0 !important;
}

.padingClass {
  padding: 0 7.4%;
}

footer p,
footer p a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #ecf0f1;
  font-size: 18px;
  text-decoration: none;
  margin: 6px 0 0;
  transition: all 0.3s linear;
}

footer p a:hover,
footer p a:active,
footer p a:focus {
  color: darkgray
}

.back-fa {
  background: #fff;
  border-radius: 30px;
}

.social-bar li {
  float: left;
  margin: 5px 10px;
}

.social-bar li a {
  color: #434343;
  -webkit-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s;
}

.social-bar li a:hover {
  color: #4d88c6;
}

.main h1 {
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  color: #55595c;
  margin-bottom: 40px;
}

section.main {
  padding: 30px 7.4%;
}

.add-task {
  position: absolute !important;
  float: right;
  right: 2%;
  top: -22px;
  overflow: hidden;
  background-color: #58B6A2 !important;
  outline: none !important;
  width: 50px !important;
  height: 50px !important;
}

.add-task md-icon {
  font-size: 28px;
  line-height: 33px !important;
  height: 32px;
  width: 32px;
}

.add-task:hover {
  background-color: #367c6d !important;
}

md-card {
  padding: 50px 0px !important;
  background: white;
}

.md-content {
  padding-bottom: 0px;
  font-family: 'roboto', sans-serif;
  color: #727272;
  text-align: center;
  white-space: nowrap;
}

.title {
  text-align: center;
}

.title span {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  color: #727272;
  letter-spacing: 0.5px;
}

.content span {
  color: #727272;
  cursor: pointer;
  font-size: 16px;
}

.content span:hover {
  color: #333;
}

.iconBtn {
  background: none;
  border: 0px;
  padding: 0px;
  outline: none !important;
  margin-right: 10px;
}

.iconBtn i {
  color: #727272;
  cursor: pointer;
  font-size: 18px;
}

.iconBtn i:hover {
  color: #333;
}

.cat-img {
  width: 75px;
  height: 60px;
}

.adminTable th {
  border-top: 0px !important;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #727272;
}

.adminTable td {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #727272;
}

.box {
  margin-bottom: 25px;
  width: 200px;
  height: 40px;
  color: #727272;
  padding: 5px;
  cursor: pointer;
  outline: none !important
}

.page {
  float: right;
  margin-right: 5%;
  cursor: pointer;
  font-size: 22px;
}

.page .current {
  cursor: pointer !important;
  background: #58B6A2 !important;
}

.page a:hover,
.page button:hover {
  background: none !important;
  text-decoration: none !important;
}

.page .disabled {
  cursor: no-drop !important;
}

.page a::after,
.page .disabled::after,
.page a::before,
.page .disabled::before {
  content: none !important;
}

li.pagination-next,
li.pagination-previous {
  font-size: 43px;
  position: relative;
  top: 7px;
}

td .btn {
 color: white;
 margin-right: 5px;
 margin-bottom: 10px;
 background-color: #58B6A2 ;
}

td .btn:hover {
 background-color: #367c6d ;
}

.modal {
  z-index: 999999999 !important;
  top: 30px !important;
  box-shadow: 1px 2px 5px #000000;
}

.modal.fade.in {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
 border-radius: 6px !important;
 margin: 180px auto auto auto !important;
}

.modal-header {
 background-color: #58B6A2 ;
 color: white;
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
}

.modal-title {
 margin:auto;
}

.modal-body {
 padding: 30px 40px 15px 40px !important;
} 

.form-group {
  margin-top: 15px;
}

.filterDropDown {
  margin-bottom: 20px;
}

.mat-input-container {
  width: 100%; 
  color:  #727272 !important;
}

.mat-input-underline .mat-input-ripple.mat-focused {
    background-color: #58B6A2 !important;
}

.mat-input-placeholder:not(.mat-empty),
.mat-input-placeholder.mat-focused {
    color: #58B6A2 !important;
    font-weight: 700 !important;
    padding-left: 8px;
}

.toggleClass md-slide-toggle {
    float: right;
    margin: auto 40px auto auto;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #58B6A2 !important;
    opacity: 0.4;
    cursor:pointer;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #58B6A2 !important;
}

.mat-slide-toggle-thumb {
    cursor: pointer;
    background-color: white;
    overflow: hidden;
}

.mat-slide-toggle-bar {
    background-color: gray;
}

.mat-slide-toggle-container {
    cursor: pointer !important;
    overflow: hidden;
}

.mat-slide-toggle-input {
  margin-left: -15px; 
}

.cat-btn .cancel {
  color: white;
  background-color: #FF5252;
  outline: none !important;
}

.cat-btn .save {
  color: white;
  outline: none !important;
  cursor: no-drop;
}

.cat-btn .cancel:hover , .cat-btn .save:hover {
  box-shadow: 5px 5px 5px grey;
}

＆＃13;

company.component.ts

＆＃13;

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  templateUrl: './company.html'
})
export class CompanyComponent {
 companies = [{"user_name":"company1","email":"test@test.com","country":"India"},
 {"user_name":"company2","email":"test1@test.com","country":"India"},
 {"user_name":"company3","email":"test2@test.com","country":"India"},
 {"user_name":"company4","email":"test3@test.com","country":"India"},
 {"user_name":"company5","email":"test4@test.com","country":"India"},
 ];
 status = [{ label: 'Free' }, { label: 'Premium'}];
}

＆＃13;

如何修复选择框选项和切换按钮的重叠问题

这里，在我点击选择框（成员资格）的输出中，它还在选择框的选项上显示切换按钮

简单地说（选择框选项和切换按钮）重叠

帮助我解决这个问题

如何解决选择框选项和切换按钮的重叠问题

company.html

styles.css的

company.component.ts

0 个答案: