Как прокрутить, увеличив размер div с помощью Resizable Jquery? - PullRequest
Новая
       1

Как прокрутить, увеличив размер div с помощью Resizable Jquery?

0 голосов
/ 05 января 2019

Я использую шаблон AdminLTE 3, у меня есть div, который я могу увеличить его высоту благодаря изменяемому размеру Jquery-UI, проблема в том, что когда я пытаюсь увеличить размер div, страница не падает, пока Я расширяю div.

Я не хочу ставить полосу прокрутки в div, я просто хочу, чтобы при увеличении высоты div, страница также автоматически закрывалась с помощью Jquery или CSS

Вот мой код: 

$(document).ready(function(){


$("#main_row_About_results").resizable({
									handles: "s"
								});
                
                
});
body {
  margin: 0;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #ffffff;
}

html,
body,
.wrapper {
  min-height: 100%;
  overflow-x: hidden;
}

.wrapper {
  position: relative;
}

.layout-boxed .wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.layout-boxed .wrapper, .layout-boxed .wrapper:before {
  margin: 0 auto;
  max-width: 1250px;
}

@media (min-width: 768px) {
  .content-wrapper,
  .main-footer,
  .main-header {
    transition: margin-left 0.3s ease-in-out;
    margin-left: 250px;
    z-index: 3000;
  }
}

@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .content-wrapper,
  .main-footer,
  .main-header {
    transition: none;
  }
}

@media (min-width: 768px) {
  .sidebar-collapse .content-wrapper, .sidebar-collapse
  .main-footer, .sidebar-collapse
  .main-header {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .content-wrapper, .content-wrapper:before,
  .main-footer,
  .main-footer:before,
  .main-header,
  .main-header:before {
    margin-left: 0;
  }
}

.content-wrapper {
  background: #f4f6f9;
}

.content-wrapper > .content {
  padding: 0 0.5rem;
}

.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

.main-sidebar, .main-sidebar:before {
  transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
  width: 250px;
}

@media screen and (prefers-reduced-motion: reduce) {
  .main-sidebar, .main-sidebar:before {
    transition: none;
  }
}

.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar:before {
  margin-left: -250px;
}

@media (max-width: 991.98px) {
  .main-sidebar, .main-sidebar:before {
    box-shadow: none !important;
    margin-left: -250px;
  }
  .sidebar-open .main-sidebar, .sidebar-open .main-sidebar:before {
    margin-left: 0;
  }
}

.main-footer {
  padding: 15px;
  color: #555;
  border-top: 1px solid #dee2e6;
  background: #ffffff;
}

.content-header {
  padding: 15px 0.5rem;
}

.content-header h1 {
  font-size: 1.8rem;
  margin: 0;
}

.content-header .breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  line-height: 1.8rem;
}

.hold-transition .content-wrapper,
.hold-transition .main-header,
.hold-transition .main-footer {
  transition: none !important;
}

/*
 * Component: Main Header
 * ----------------------
 */
.main-header {
  z-index: 1000;
}

.main-header .navbar-nav .nav-item {
  margin: 0;
}

.main-header .nav-link {
  position: relative;
  height: 2.5rem;
}

.main-header .navbar-nav[class*="-right"] .dropdown-menu {
  margin-top: -3px;
  right: 0;
  left: auto;
}

@media (max-width: 575.98px) {
  .main-header .navbar-nav[class*="-right"] .dropdown-menu {
    left: 0;
    right: auto;
  }
}

.navbar-img {
  height: 1.25rem;
  width: auto;
}

.navbar-badge {
  position: absolute;
  top: 9px;
  right: 5px;
  font-size: .6rem;
  font-weight: 300;
  padding: 2px 4px;
}

.btn-navbar {
  border-left-width: 0;
  background-color: transparent;
}

.form-control-navbar {
  border-right-width: 0;
}

.form-control-navbar + .input-group-append {
  margin-left: 0;
}

.form-control-navbar,
.btn-navbar {
  transition: none;
}

.navbar-dark .form-control-navbar,
.navbar-dark .btn-navbar {
  background-color: rgba(255, 255, 255, 0.2);
  border: 0;
}

.navbar-dark .form-control-navbar::placeholder,
.navbar-dark .form-control-navbar + .input-group-append > .btn-navbar {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar :-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar:focus,
.navbar-dark .form-control-navbar:focus + .input-group-append .btn-navbar {
  border: 0 !important;
  background-color: rgba(255, 255, 255, 0.6);
  color: #343a40;
}

.navbar-light .form-control-navbar,
.navbar-light .btn-navbar {
  background-color: #f2f4f6;
  border: 0;
}

.navbar-light .form-control-navbar::placeholder,
.navbar-light .form-control-navbar + .input-group-append > .btn-navbar {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar :-moz-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar ::-moz-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar :-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar:focus,
.navbar-light .form-control-navbar:focus + .input-group-append .btn-navbar {
  border: 0 !important;
  background-color: #e9ecef;
  color: #343a40;
}

.brand-link {
  padding: 0.8125rem 0.5rem;
  font-size: 1.25rem;
  display: block;
  line-height: 1.5;
  white-space: nowrap;
}

.brand-link:hover {
  color: #ffffff;
  text-decoration: none;
}

[class*="sidebar-dark"] .brand-link {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #4b545c;
}

[class*="sidebar-light"] .brand-link {
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #dee2e6;
}

.brand-image {
  float: left;
  line-height: .8;
  max-height: 34px;
  width: auto;
  margin-left: .8rem;
  margin-right: .5rem;
  margin-top: -3px;
}

/**
 * Component: Sidebar
 * ------------------
 */
.main-sidebar {
  z-index: 1100;
  height: 100vh;
  overflow-y: hidden;
}

.sidebar {
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  overflow-y: auto;
  height: calc(100% - 4rem);
}

.user-panel {
  position: relative;
}

[class*="sidebar-dark"] .user-panel {
  border-bottom: 1px solid #4f5962;
}

[class*="sidebar-light"] .user-panel {
  border-bottom: 1px solid #dee2e6;
}

.user-panel,
.user-panel .info {
  overflow: hidden;
  white-space: nowrap;
}

.user-panel .image {
  padding-left: 0.8rem;
  display: inline-block;
}

.user-panel img {
  width: 2.1rem;
  height: auto;
}

.user-panel .info {
  display: inline-block;
  padding: 5px 5px 5px 10px;
}

.user-panel .status,
.user-panel .dropdown-menu {
  font-size: 0.875rem;
}

.nav-sidebar .nav-item > .nav-link {
  margin-bottom: 0.2rem;
}

.nav-sidebar .nav-item > .nav-link .right {
  transition: transform ease-in-out 0.3s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .nav-sidebar .nav-item > .nav-link .right {
    transition: none;
  }
}

.nav-sidebar .nav-link > p > .right {
  position: absolute;
  right: 1rem;
  top: 12px;
}

.nav-sidebar .menu-open > .nav-treeview {
  display: block;
}

.nav-sidebar .menu-open > .nav-link .right {
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.nav-sidebar > .nav-item {
  margin-bottom: 0;
}

.nav-sidebar > .nav-item .nav-icon {
  text-align: center;
  width: 1.6rem;
  font-size: 1.2rem;
  margin-right: .2rem;
}

.nav-sidebar > .nav-item .float-right {
  margin-top: 3px;
}

.nav-sidebar .nav-treeview {
  display: none;
  list-style: none;
  padding: 0;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
  width: 1.6rem;
}

.nav-sidebar .nav-header {
  font-size: .9rem;
  padding: 0.5rem;
}

.nav-sidebar .nav-header:not(:first-of-type) {
  padding: 1.7rem 1rem .5rem 1rem;
}

.nav-sidebar .nav-link p {
  display: inline-block;
  margin: 0;
}

#sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1099;
}

#blogArea
                            {
                                margin-left: 0;
                                /*width: 80px !important;*/
                                min-height: 967px; 
                                max-width: 80px !important;
                                width: 80px !important;
                                min-width: 80px !important;
                            }

                            #blogAreaContent
                            {
                              max-width: 80px !important;
                                width: 80px !important;
                                min-width: 80px !important;
                              }

                                    #main_row_About_results
                                  {
                                     border: 1px solid rgb(112, 113, 124);
                                     border-style: dashed;
                               
                                  }
                                  p:focus, h2:focus, h3:focus, a:focus
                                  { 
                                    outline: none !important; 
                                  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amin bilding</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="main.php" class="nav-link">Summery</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

    <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="main.php" class="brand-link">
      <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">ADMINS</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">Administrator Recons</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">

        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link active">
              <i class="nav-icon fa fa-dashboard"></i>
              <p>
                Dashboard
                <i class="right fa fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">

              <li class="nav-item">
                <a href="summery.php" class="nav-link">
                  <i class="fa fa-circle-o nav-icon"></i>
                  <p>Admin Options</p>
                </a>
              </li>

            </ul>
          </li>

        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
         
                              <!-- Content Wrapper. Contains page content -->
                              <div class="content-wrapper">
                                <!-- Content Header (Page header) -->
                                <div class="content-header">
                                  <div class="container-fluid">
                                    
                                    <div class="row">
                                      <div class="col-sm-6">
                                        <h1 class="m-0 text-dark">Title</h1>
                                      </div><!-- /.col -->
                                      <br><br><br>
                                      <div class="col-sm-6">
                                        <ol class="breadcrumb float-sm-right" style="margin-right: 14.6%;"><!-- style="margin-right: 12%;" -->
                                          <li class="breadcrumb-item">My Breadcrum</li>
                                        </ol>
                                      </div><!-- /.col -->


                                <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="max-width: 92.5%; width: 92.5%;"> <!--style="max-width: 94%; width: 94%;"-->
                                  <h5>Title Item: <b>(*)</b> </h5>
                                  <input type="text" name="blog_nameInfo" id="blog_nameInfo" class="form-control" required>
                                   <br>
                                   <br>
                                </div>

                                
                                            </div><!-- /.row -->
                                          </div><!-- /.container-fluid -->
                                        </div>
                                        <!-- /.content-header -->

                                        <!-- Main content -->
                          <section class="content">
                          <div class="container-fluid">
                            
                            <div class="row" id="main_row_for_blogs">
                              
                              <div class="col-lg-12 col-12" style="max-width: 92.5%; width: 92.5%;"><!--style="max-width: 94%; width: 94%;"-->
                                <div class="card" id="BlogEditorOptions">
                                
                                <div class="card-header">
                                  <h2>my title card</h2>
                                </div>
                               
                                <div class="card-body" id="main_container_blog_section">
                                
                                <div class="row" id="main_row_About_results" style="display: block; position: relative !important; width: 100%; margin-left: 0px; padding-top: 20px; padding-bottom: 20px;">

                                <!--this is the div that it's resizable-->
  
                                </div> 

                                </div>
                                
                              </div>
                             
                              </div>

                             </div>

                                  </div><!-- /.container-fluid -->
                                </section>
                                <!-- /.content -->
                              </div>
                              <!-- /.content-wrapper -->

                      <footer class="main-footer">
                        <strong>Copyright &copy; 2018 - MyBildingWall</strong>
                        <div class="float-right d-none d-sm-inline-block">
                          <b>Version</b> 1.0
                        </div>
                      </footer>

                      <!-- Control Sidebar -->
                      <aside class="control-sidebar control-sidebar-dark">
                        <!-- Control sidebar content goes here -->
                      </aside>
                      <!-- /.control-sidebar -->
                    </div>
                    <!-- ./wrapper -->

                    <!-- jQuery UI 1.11.4 -->
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
                    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->

                    <!-- Bootstrap 4 -->
                    <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

                    <!-- Slimscroll -->
                    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>

                    <script src="dist/js/adminlte.js"></script>

                    </body>
                    </html>

Как вы можете видеть, пытаясь поднять div с id = main_row_About_results выше, используя jquery изменяемый размер пользовательского интерфейса, тело не загружается автоматически. Я просто хочу, чтобы до тех пор, пока я устанавливаю div выше, тело также будет опускаться (прокручиваться) автоматически с помощью div. Прямо сейчас этого не происходит. Как я могу это сделать?

1 Ответ

0 голосов
/ 06 января 2019

Вам нужно будет настроить scrollTop при изменении размера. Есть несколько способов сделать это. Вот один пример: 

resize: function(event, ui){
  var rh = Math.round(ui.element.offset().top + ui.size.height);;
  var wh = $(window).height();
  var sp = $(document).scrollTop();
  var buff = wh + sp - 50;
  if (rh > buff) {
    $(document).scrollTop(rh - wh + 50);
  }
}

Вычисление позиции смещения и текущей высоты изменяемого размера дает нам правильное количество позиций мыши в документе. Верхняя прокрутка и высота окна дают нам хорошее число для сравнения. Мы добавили немного буфера, 50 пикселей, который можно настроить по желанию.

Как только условие выполнено, мы перемещаем верхнюю часть прокрутки, используя .scrollTop().

Рабочий пример 

$(function() {
  $("#main_row_About_results").resizable({
    handles: "s",
    resize: function(e, ui) {
      var rh = Math.round(ui.element.offset().top + ui.size.height);;
      var wh = $(window).height();
      var sp = $(document).scrollTop();
      var buff = wh + sp - 50;
      if (rh > buff) {
        $(document).scrollTop(rh - wh + 50);
      }
    }
  });
});
body {
  margin: 0;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #ffffff;
}

html,
body,
.wrapper {
  min-height: 100%;
  overflow-x: hidden;
}

.wrapper {
  position: relative;
}

.layout-boxed .wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.layout-boxed .wrapper,
.layout-boxed .wrapper:before {
  margin: 0 auto;
  max-width: 1250px;
}

@media (min-width: 768px) {
  .content-wrapper,
  .main-footer,
  .main-header {
    transition: margin-left 0.3s ease-in-out;
    margin-left: 250px;
    z-index: 3000;
  }
}

@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .content-wrapper,
  .main-footer,
  .main-header {
    transition: none;
  }
}

@media (min-width: 768px) {
  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .main-footer,
  .sidebar-collapse .main-header {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .content-wrapper,
  .content-wrapper:before,
  .main-footer,
  .main-footer:before,
  .main-header,
  .main-header:before {
    margin-left: 0;
  }
}

.content-wrapper {
  background: #f4f6f9;
}

.content-wrapper>.content {
  padding: 0 0.5rem;
}

.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

.main-sidebar,
.main-sidebar:before {
  transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
  width: 250px;
}

@media screen and (prefers-reduced-motion: reduce) {
  .main-sidebar,
  .main-sidebar:before {
    transition: none;
  }
}

.sidebar-collapse .main-sidebar,
.sidebar-collapse .main-sidebar:before {
  margin-left: -250px;
}

@media (max-width: 991.98px) {
  .main-sidebar,
  .main-sidebar:before {
    box-shadow: none !important;
    margin-left: -250px;
  }
  .sidebar-open .main-sidebar,
  .sidebar-open .main-sidebar:before {
    margin-left: 0;
  }
}

.main-footer {
  padding: 15px;
  color: #555;
  border-top: 1px solid #dee2e6;
  background: #ffffff;
}

.content-header {
  padding: 15px 0.5rem;
}

.content-header h1 {
  font-size: 1.8rem;
  margin: 0;
}

.content-header .breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  line-height: 1.8rem;
}

.hold-transition .content-wrapper,
.hold-transition .main-header,
.hold-transition .main-footer {
  transition: none !important;
}


/*
 * Component: Main Header
 * ----------------------
 */

.main-header {
  z-index: 1000;
}

.main-header .navbar-nav .nav-item {
  margin: 0;
}

.main-header .nav-link {
  position: relative;
  height: 2.5rem;
}

.main-header .navbar-nav[class*="-right"] .dropdown-menu {
  margin-top: -3px;
  right: 0;
  left: auto;
}

@media (max-width: 575.98px) {
  .main-header .navbar-nav[class*="-right"] .dropdown-menu {
    left: 0;
    right: auto;
  }
}

.navbar-img {
  height: 1.25rem;
  width: auto;
}

.navbar-badge {
  position: absolute;
  top: 9px;
  right: 5px;
  font-size: .6rem;
  font-weight: 300;
  padding: 2px 4px;
}

.btn-navbar {
  border-left-width: 0;
  background-color: transparent;
}

.form-control-navbar {
  border-right-width: 0;
}

.form-control-navbar+.input-group-append {
  margin-left: 0;
}

.form-control-navbar,
.btn-navbar {
  transition: none;
}

.navbar-dark .form-control-navbar,
.navbar-dark .btn-navbar {
  background-color: rgba(255, 255, 255, 0.2);
  border: 0;
}

.navbar-dark .form-control-navbar::placeholder,
.navbar-dark .form-control-navbar+.input-group-append>.btn-navbar {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar :-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar-dark .form-control-navbar:focus,
.navbar-dark .form-control-navbar:focus+.input-group-append .btn-navbar {
  border: 0 !important;
  background-color: rgba(255, 255, 255, 0.6);
  color: #343a40;
}

.navbar-light .form-control-navbar,
.navbar-light .btn-navbar {
  background-color: #f2f4f6;
  border: 0;
}

.navbar-light .form-control-navbar::placeholder,
.navbar-light .form-control-navbar+.input-group-append>.btn-navbar {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar :-moz-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar ::-moz-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar :-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.navbar-light .form-control-navbar:focus,
.navbar-light .form-control-navbar:focus+.input-group-append .btn-navbar {
  border: 0 !important;
  background-color: #e9ecef;
  color: #343a40;
}

.brand-link {
  padding: 0.8125rem 0.5rem;
  font-size: 1.25rem;
  display: block;
  line-height: 1.5;
  white-space: nowrap;
}

.brand-link:hover {
  color: #ffffff;
  text-decoration: none;
}

[class*="sidebar-dark"] .brand-link {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #4b545c;
}

[class*="sidebar-light"] .brand-link {
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #dee2e6;
}

.brand-image {
  float: left;
  line-height: .8;
  max-height: 34px;
  width: auto;
  margin-left: .8rem;
  margin-right: .5rem;
  margin-top: -3px;
}


/**
 * Component: Sidebar
 * ------------------
 */

.main-sidebar {
  z-index: 1100;
  height: 100vh;
  overflow-y: hidden;
}

.sidebar {
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  overflow-y: auto;
  height: calc(100% - 4rem);
}

.user-panel {
  position: relative;
}

[class*="sidebar-dark"] .user-panel {
  border-bottom: 1px solid #4f5962;
}

[class*="sidebar-light"] .user-panel {
  border-bottom: 1px solid #dee2e6;
}

.user-panel,
.user-panel .info {
  overflow: hidden;
  white-space: nowrap;
}

.user-panel .image {
  padding-left: 0.8rem;
  display: inline-block;
}

.user-panel img {
  width: 2.1rem;
  height: auto;
}

.user-panel .info {
  display: inline-block;
  padding: 5px 5px 5px 10px;
}

.user-panel .status,
.user-panel .dropdown-menu {
  font-size: 0.875rem;
}

.nav-sidebar .nav-item>.nav-link {
  margin-bottom: 0.2rem;
}

.nav-sidebar .nav-item>.nav-link .right {
  transition: transform ease-in-out 0.3s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .nav-sidebar .nav-item>.nav-link .right {
    transition: none;
  }
}

.nav-sidebar .nav-link>p>.right {
  position: absolute;
  right: 1rem;
  top: 12px;
}

.nav-sidebar .menu-open>.nav-treeview {
  display: block;
}

.nav-sidebar .menu-open>.nav-link .right {
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.nav-sidebar>.nav-item {
  margin-bottom: 0;
}

.nav-sidebar>.nav-item .nav-icon {
  text-align: center;
  width: 1.6rem;
  font-size: 1.2rem;
  margin-right: .2rem;
}

.nav-sidebar>.nav-item .float-right {
  margin-top: 3px;
}

.nav-sidebar .nav-treeview {
  display: none;
  list-style: none;
  padding: 0;
}

.nav-sidebar .nav-treeview>.nav-item>.nav-link>.nav-icon {
  width: 1.6rem;
}

.nav-sidebar .nav-header {
  font-size: .9rem;
  padding: 0.5rem;
}

.nav-sidebar .nav-header:not(:first-of-type) {
  padding: 1.7rem 1rem .5rem 1rem;
}

.nav-sidebar .nav-link p {
  display: inline-block;
  margin: 0;
}

#sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1099;
}

#blogArea {
  margin-left: 0;
  /*width: 80px !important;*/
  min-height: 967px;
  max-width: 80px !important;
  width: 80px !important;
  min-width: 80px !important;
}

#blogAreaContent {
  max-width: 80px !important;
  width: 80px !important;
  min-width: 80px !important;
}

#main_row_About_results {
  border: 1px solid rgb(112, 113, 124);
  border-style: dashed;
}

p:focus,
h2:focus,
h3:focus,
a:focus {
  outline: none !important;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="main.php" class="nav-link">Summery</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="main.php" class="brand-link">
      <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">ADMINS</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">Administrator Recons</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">

        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link active">
              <i class="nav-icon fa fa-dashboard"></i>
              <p>
                Dashboard
                <i class="right fa fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">

              <li class="nav-item">
                <a href="summery.php" class="nav-link">
                  <i class="fa fa-circle-o nav-icon"></i>
                  <p>Admin Options</p>
                </a>
              </li>

            </ul>
          </li>

        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">

        <div class="row">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Title</h1>
          </div>
          <!-- /.col -->
          <br><br><br>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right" style="margin-right: 14.6%;">
              <!-- style="margin-right: 12%;" -->
              <li class="breadcrumb-item">My Breadcrum</li>
            </ol>
          </div>
          <!-- /.col -->


          <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="max-width: 92.5%; width: 92.5%;">
            <!--style="max-width: 94%; width: 94%;"-->
            <h5>Title Item: <b>(*)</b> </h5>
            <input type="text" name="blog_nameInfo" id="blog_nameInfo" class="form-control" required>
            <br>
            <br>
          </div>


        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">

        <div class="row" id="main_row_for_blogs">

          <div class="col-lg-12 col-12" style="max-width: 92.5%; width: 92.5%;">
            <!--style="max-width: 94%; width: 94%;"-->
            <div class="card" id="BlogEditorOptions">

              <div class="card-header">
                <h2>my title card</h2>
              </div>

              <div class="card-body" id="main_container_blog_section">

                <div class="row" id="main_row_About_results" style="display: block; position: relative !important; width: 100%; margin-left: 0px; padding-top: 20px; padding-bottom: 20px;">

                  <!--this is the div that it's resizable-->

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <footer class="main-footer">
    <strong>Copyright &copy; 2018 - MyBildingWall</strong>
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->

<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>

<script src="dist/js/adminlte.js"></script>

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...