css-pilihan

css pilihan

====================================================================

Atur padding pada tabel / table bootstrap
Atur line-height / height pada tabel / table bootstrap
Atur jarak antar kolom agar lebih rapat

table tr td{
 padding-top:0px !important;
 padding-bottom:0px !important;
}

atau

table tr td{
 padding:0px !important;
}

====================================================================

css untuk media print kali ini kasus saya membuat halaman cetak / print angular 5 bootstrap 

pada halaman yg ada media print nya  (saya menggunakan modal ) letakan kode css berikut

        @media print {
            .cetak , .cetak *{  visibility: visible;   }
            .modal-header { display: none;  }
            .modal-body { top: -48px !important;   }  
        }

pada laman modal  tambahkan class modal-xl, cetak

 <div class="modal-dialog modal-xl">
 <div class="modal-body cetak"> 



pada  node-modules/bootstrap/scss/_modal.scss


tambahkan .modal-xl { max-width: 95%; } setelah .modal-sm

hingga menjadi seperti berikut

  .modal-sm { max-width: $modal-sm; }
  .modal-xl { max-width: 95%; }

pada src/scss/_custom.scss  tambahkan kode berikut

 
@media print {
      body *{  visibility: hidden; }
  } 



kode lengkap nya seperti berikut


 <div  class="modal fade " bsModal #viewModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title pull-left"> Cetak</h4>
                        <div *ngIf="loading" class="text-warning mb-0 mt-2">
                            <i class="fa fa-circle-o-notch fa-spin"></i> Loading Data...
                        </div>                       
                    </div>
                     <div class="modal-body cetak">

                    ...
                    ...

 


====================================================================

Tweet