Search code examples
htmlcssmobilemodal-dialognette

Best option which css styles to apply for the modal dialog in Nette on the mobile device

How I can apply such styles in css for the modal dialog box written in PHP and Nette on the mobile device? The modal dialog box must be seen at least across whole display and must be not seen off screen. I'm appreciate for any help.

This is example of the modal dialog box that is not working good on the mobile devices.

  <div class="modal fade show" id="testDialog" aria-modal="true" role="dialog" style="padding-right: 17px; display: block;">
    <div class="modal-dialog">
      <div id="snippet--testDialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3 class="modal-title">Some title</h3>
          </div>
          <div class="modal-body">
            <div>Some text in the body of the modal dialog box</div>
            <div class="document-preview">
              <div class="document-preview-container" style="height: 607px;">
                <img src="images\tmp\af3d5211-007a-4d5d-a6c6-ecc5c6e19fbe.png" style="width: 100%">
              </div>
            </div>
            <div class="document-download-link">
              <a class="ajax show-pdf-document" href="/test/www/homepage/default/5?do=showPdfDocument">Show document</a>
            </div>
            <table style="width: 100%; text-align: center;">
              <tbody>
                <tr>
                  <td style="width: 25%">
                    <button class="any_form_button" onclick="hide()">Cancel</button>
                  </td>
                  <td style="width: 25%">
                    <a href="/test/www/file/get/5">Download</a>
                  </td>
                  <td style="width: 25%">
                    <input type="checkbox" name="checkbox" id="checkbox" style="margin-right: 10px" checked="">Check
                  </td>
                  <td style="width: 25%">
                    <a id="link" class="ajax" style="display: none" href="/test/www/homepage/default/5?do=showDocument"></a>
                    <button id="sendCode" class="any_form_button" onclick="canDo('Test')">Show</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

There are styles in .css.

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  cursor: pointer;
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: 0.75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1050;
  top: 3%;
  bottom: 0;
  width: 100%;
  overflow: auto;
  outline: 0;
  padding-right: 0 !important;
  margin-top: 15px;
}

.modal-dialog {
  margin: auto;
}

.modal-dialog-small {
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
}

.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  outline: 0;
  -webkit-background-clip: padding-box;
  -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
  box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  background-color: #f7f8fa;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 900px;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.modal .basic_form {
  margin: 0 0 1em;
  display: inline-block;
}

.modal .basic_form input[type="text"],
.modal .basic_form input[type="email"],
.modal .basic_form input[type="tel"],
.modal .basic_form input[type="number"],
.modal .basic_form input[type="password"],
.modal .basic_form select {
  display: block;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 100%;
  break-inside: avoid-column;
  border: 1px solid #ddd;
  min-width: 240px;
  background-color: transparent;
}

.modal .basic_form input[type="text"]:focus,
.modal .basic_form input[type="email"]:focus,
.modal .basic_form input[type="tel"]:focus,
.modal .basic_form input[type="number"]:focus,
.modal .basic_form input[type="password"]:focus,
.modal .basic_form select:focus {
  outline: none;
  border-color: #dd9933;
}

.modal .basic_form input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.modal .basic_form input[type="checkbox"] + label span {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 26px;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.modal .basic_form input[type="checkbox"] + label span::before {
  position: absolute;
  display: block;
  content: "";
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 16px;
  background-color: #005ca9;
  border-radius: 100%;
  opacity: 0.3;
  transition: 300ms;
}

.modal .basic_form input[type="checkbox"] {
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin-right: -10px;
}

.modal .basic_form input[type="checkbox"]:checked + label span::before {
  transform: translateX(12px);
  opacity: 1;
}

.modal .basic_form input[type="file"] {
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin-right: -10px;
}

.modal .basic_form input[type="file"] + label {
  cursor: pointer;
  display: block;
  padding: 5px 10px 5px 35px;
  font-family: inherit;
  font-size: 100%;
  break-inside: avoid-column;
  border: 1px solid #ddd;
  min-width: 240px;
  background: url(assets/upload.svg) no-repeat 10px center;
  background-size: 16px;
}

.modal .basic_form button,
.modal .basic_form input[type="submit"],
.modal .basic_button,
.any_form_button {
  display: inline-block;
  position: relative;
  border: 1px solid #030955;
  color: #030955 !important;
  text-decoration: inherit !important;
  padding: 4px 20px;
  border-radius: 15px;
  transition: 300ms;
  text-align: center;
  background-color: transparent;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  text-transform: uppercase;
  outline: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.3333px;
}

.modal .basic_form button:hover:not([disabled]),
.modal .basic_form input[type="submit"]:hover:not([disabled]),
.modal .basic_button.not:hover:not([disabled]),
.any_form_button.not:hover:not([disabled]) {
  background-color: #030955;
  color: #fff !important;
}

.modal .basic_form button:disabled,
.modal .basic_form input[type="submit"]:disabled,
.modal .basic_button:disabled,
.any_form_button:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: default;
}

.modal .basic_form > div {
  margin: 0 -10px 20px -10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.modal .basic_form > div > * {
  margin: 0 10px 1em 10px;
}

.modal .modal-flash {
  height: 35px;
  width: 240px;
  padding-top: 5px;
  display: inline-block;
  color: #fff;
  margin: 30px 0 30px;
  background-color: #030955;
}

.modal .pdf-preview {
  border: 1px solid rgba(227, 227, 227, 1);
  margin: 10px 0 10px 0;
}

.modal .pdf-preview div {
  overflow: auto;
  height: 580px;
}

.modal .show-pdf-document {
  display: none;
}

.modal .dialog-fixed-width {
  width: 600px;
}

.pdf-download-link {
  margin-bottom: 10px;
  text-align: center;
}

.modal a {
  color: #005ca9;
  text-decoration: underline;
}

.modal a:hover {
  color: #dd9933;
}

@media only screen and (max-width: 768px) {
  .modal .fade .show {
    padding-left: 0 !important;
    top: -20px;
  }

  .modal .pdf-preview div,
  .modal .pdf-preview img {
    display: none;
  }

  .modal .show-pdf-document {
    display: block;
    text-align: center;
    padding-bottom: 10px;
  }

  .modal .dialog-fixed-width {
    width: auto;
  }
}

@media only screen and (max-width: 600px) {
  .modal.fade.show {
    pointer-events: none;
    left: 50%;
    top: 50%;
    bottom: -50%;
    transform: translate(-50%, -50%) !important;
    position: absolute;
  }
}
Solution

  • If you use Bootstrap 4, you can use a plugin like this for better mobile experience: https://github.com/keaukraine/bootstrap4-fs-modal<